Diaporama flash dans mon site internet
Fermé
absalone0
Messages postés
4
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
1 avril 2013
-
7 mars 2012 à 03:27
absalone - 22 mars 2012 à 05:03
absalone - 22 mars 2012 à 05:03
A voir également:
- Diaporama flash dans mon site internet
- Site de telechargement - Guide
- Site inaccessible - Guide
- Site de vente entre particulier - Guide
- Flash drive tester - Télécharger - Divers Utilitaires
- Gps sans internet - Guide
7 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
7 mars 2012 à 05:02
7 mars 2012 à 05:02
SALUT
Ce n est pas du flash sur le site que tu donne , mais du javascript !
voila quelques sites qui en propose avec Jquery , tu devrais trouver ton bonheur!
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
http://smashinghub.com/23-most-popular-jquery-photo-gallery-and-slider-plugins.htm
http://visionwidget.com/tuts/webtuts/588-free-jquery-photo-gallery-albums-with-tutorials.html
https://www.smashingapps.com/2011/01/07/awesome-jquery-techniques-to-create-visually-impressive-photo-galleries.html
http://blueprintds.com/developer-news/top-14-jquery-photo-slideshow-gallery-plugins/
https://www.vandelaydesign.com/jquery-image-galleries/
il y en a plein d autres si tu cherche, google est ton ami ;-))
a+
Ce n est pas du flash sur le site que tu donne , mais du javascript !
voila quelques sites qui en propose avec Jquery , tu devrais trouver ton bonheur!
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/
http://smashinghub.com/23-most-popular-jquery-photo-gallery-and-slider-plugins.htm
http://visionwidget.com/tuts/webtuts/588-free-jquery-photo-gallery-albums-with-tutorials.html
https://www.smashingapps.com/2011/01/07/awesome-jquery-techniques-to-create-visually-impressive-photo-galleries.html
http://blueprintds.com/developer-news/top-14-jquery-photo-slideshow-gallery-plugins/
https://www.vandelaydesign.com/jquery-image-galleries/
il y en a plein d autres si tu cherche, google est ton ami ;-))
a+
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
7 mars 2012 à 06:39
7 mars 2012 à 06:39
Bonjour,
Pour créer un diaporama en Flash, il y Simple Viewer qui est gratuit.
Pour créer un diaporama en Flash, il y Simple Viewer qui est gratuit.
absalone0
Messages postés
4
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
1 avril 2013
1
7 mars 2012 à 07:00
7 mars 2012 à 07:00
Oh merci beaucoup pour vos informations, je vais passer par le javascript effectivement, et je vais faire mes essais a partir de 'prettyphoto' tout me semble bien, j'ai retaper a peu pres comme il faut pour la aprtie html et css, par contre le java je n'y connais rien. alors ca marche tout bien, ca me charge mes photos comme sur le site de tenneson que j'ai montre en exemple (vous avez aime les photo en passant?) mais les photos une fois cliquees et du coup lancees dans javascript pour la navigation ne se positionnent que dans ma frame 'contenu' du coup ca ne fait pas tres beau, je vais essayer de fouiller un peu partout pour trouver comment rectifier tout ca, et merci pour vos conseils !
Me revoila de nouveau, j'ai bien avance dans mon petit site ( avec le slideshow prettyphoto)et je me suis fait ma gallerie avec toutes les photos qui sont dans le div "contenu" et lorsque je clique sur l'une d'elles le slideshow se lance, genial. Le probleme c'est que j'ai concu mon site de sorte que ma galerie (dans lesquels par consequent se trouvent mes liens pour le slideshow) se charge dans le div "contenu" comme ca ce n'est pas tout le site qui doit se rafraichir quand on navigue dans les differents menus.
Et le probleme alors c'est que mon slideshow ne se lance que dans le div' contenu', et c'est moche, je voudrais qu'il couvre la page entiere, mais je n'arrive pas a savoir comment faire.
pensez vous qu'il y a la solution la dedans?
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/
Et le probleme alors c'est que mon slideshow ne se lance que dans le div' contenu', et c'est moche, je voudrais qu'il couvre la page entiere, mais je n'arrive pas a savoir comment faire.
pensez vous qu'il y a la solution la dedans?
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
12 mars 2012 à 06:03
12 mars 2012 à 06:03
Salut
il faudrait voire la page pour t aider !
met un lien vers ton site !
a+
il faudrait voire la page pour t aider !
met un lien vers ton site !
a+
Salut, bon, je me suis bien battu, mais la, je bloque carement, donc j'ai continuer a creer mon petit site, et j'ai donc integre prettyphoto, et en cliquant sur une mniature, le slideshow se lance, genial, mais le probleme c'est que mes photos miniatures ne s'affichent pas, pourtant le chemin est le bon, je ne pige pas, auriez vous une idee? s'agit t-il d'une erreur de programmation? ah oui, j'ai egalement essaye de mettre un certain style pour la zone ou il y a les miniatures pour faire en sorte qu'elles s'espaces correctement en hauteur, avec Firefox ca marche mais pas avec internet explorer apparement..
Donc ma page est celle-ci
http://absalone.kegtux.org/trucs/imagesGallery/Portraits.html
Desole si ca semble etre le merdier mais c'est mon premier site, je suis debutant.
<html>
<head>
<title>Mathieu (45)slice2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- Save for Web Styles (Mathieu (45)slice2.psd) -->
<style type="text/css">
<!--
body {
background-color: #7C7C7C;
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}
#Header {
width:915px;
height:124px;
background-image: url(../images/Header.jpg);
position: absolute;
top: 0px;
}
#Menu {
width:915px;
height:47px;
background-image: url(../images/Menu.jpg);
position: absolute;
top: 124px;
text-decoration: none;
}
#MainContent {
width:915px;
height:auto;
background-image: url(../images/MainContent.jpg);
position: absolute;
top: 171px;
background-repeat: no-repeat;
background-color: #FFFFFF;
z-index:1;
font-family: "Courier New", Courier, monospace;
letter-spacing: 35px;
}
h1 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h2 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #030303;
text-decoration: none;
}
h3 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: right;
letter-spacing: 2px;
font-variant: normal;
color: #787878;
text-decoration: none;
padding-right: 12px;
}
h4 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 165px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h5 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bolder;
text-align: left;
padding-left: 108px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h6 {
text-align: left;
padding-left: 70px;
letter-spacing: 60px;
line-height: 210px;
}
a:link {
color: #393939;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #363636;
}
a:hover {
text-decoration: none;
color: #707070;
}
a:active {
text-decoration: none;
color: #363636;
}
body {
background-color: #E8E8E8;
}
#footer {
position:absolute;
width:915px;
height:auto;
z-index:2;
background-color: #FFFFFF;
}
.style5 {
font-family: "Adobe Arabic";
font-size: 24px;
}
.style6 {
font-family: "Adobe Arabic";
font-size: 36px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<!-- Save for Web Slices (Mathieu (45)slice2.psd) -->
<body>
<div id="container">
<div id="Header"> </div>
<div id="Menu">
<h1><a href="../index.html">Home</a> I <a href="../Gallery2.html">Gallery</a> I <a href="../Events.html">Events</a> I<a href="../Aboutme.html"> About me</a><a href="../Aboutme.html"></a> I <a href="../Contact.html">Contact</a></h1>
</div>
<div id="MainContent">
<div id="Content">
<p> </p>
<h5>Portraits</h5>
<p> </p>
<p> </p>
<h4> </h4>
<h6>
<ul class="gallery clearfix">
<p><a href="images/Grandformat/1LaMazarine.jpg" rel="prettyPhoto[gallery1]" title="La Mazarine">
<img src="images/mini/LaMazarineMini.jpg" width="120" height="120" alt="Et la le titre" /> </a>
<a href="images/Grandformat/2LeCri.jpg" rel="prettyPhoto[gallery1]" title="C'est le titre encore">
<img src="images/mini/LeCriMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/3fillette.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/filletteMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/4nuque.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/NuqueMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/5champs.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/Champs.jpg" width="120" height="120" alt="" /></a> </p>
<p> </p>
</ul>
</h6>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer">
<table width="915" border="0">
<tr>
<td><h2>Mathieu Copyright genial</h2></td>
<td><h3>Site created by Mathieu</h3></td>
</tr>
</table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_square',slideshow:3000,autoplay_slideshow: false, social_tools: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
</div>
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Un grand merci pour votre aide
Donc ma page est celle-ci
http://absalone.kegtux.org/trucs/imagesGallery/Portraits.html
Desole si ca semble etre le merdier mais c'est mon premier site, je suis debutant.
<html>
<head>
<title>Mathieu (45)slice2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<!-- Save for Web Styles (Mathieu (45)slice2.psd) -->
<style type="text/css">
<!--
body {
background-color: #7C7C7C;
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}
#Header {
width:915px;
height:124px;
background-image: url(../images/Header.jpg);
position: absolute;
top: 0px;
}
#Menu {
width:915px;
height:47px;
background-image: url(../images/Menu.jpg);
position: absolute;
top: 124px;
text-decoration: none;
}
#MainContent {
width:915px;
height:auto;
background-image: url(../images/MainContent.jpg);
position: absolute;
top: 171px;
background-repeat: no-repeat;
background-color: #FFFFFF;
z-index:1;
font-family: "Courier New", Courier, monospace;
letter-spacing: 35px;
}
h1 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h2 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: left;
padding-left: 45px;
letter-spacing: 2px;
font-variant: normal;
color: #030303;
text-decoration: none;
}
h3 {
font-family: "Lucida Sans";
font-size: 9px;
font-weight: normal;
text-align: right;
letter-spacing: 2px;
font-variant: normal;
color: #787878;
text-decoration: none;
padding-right: 12px;
}
h4 {
font-family: "Lucida Sans";
font-size: 13px;
font-weight: normal;
text-align: left;
padding-left: 165px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h5 {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bolder;
text-align: left;
padding-left: 108px;
letter-spacing: 2px;
font-variant: normal;
color: #4E4E4E;
text-decoration: none;
}
h6 {
text-align: left;
padding-left: 70px;
letter-spacing: 60px;
line-height: 210px;
}
a:link {
color: #393939;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #363636;
}
a:hover {
text-decoration: none;
color: #707070;
}
a:active {
text-decoration: none;
color: #363636;
}
body {
background-color: #E8E8E8;
}
#footer {
position:absolute;
width:915px;
height:auto;
z-index:2;
background-color: #FFFFFF;
}
.style5 {
font-family: "Adobe Arabic";
font-size: 24px;
}
.style6 {
font-family: "Adobe Arabic";
font-size: 36px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<!-- Save for Web Slices (Mathieu (45)slice2.psd) -->
<body>
<div id="container">
<div id="Header"> </div>
<div id="Menu">
<h1><a href="../index.html">Home</a> I <a href="../Gallery2.html">Gallery</a> I <a href="../Events.html">Events</a> I<a href="../Aboutme.html"> About me</a><a href="../Aboutme.html"></a> I <a href="../Contact.html">Contact</a></h1>
</div>
<div id="MainContent">
<div id="Content">
<p> </p>
<h5>Portraits</h5>
<p> </p>
<p> </p>
<h4> </h4>
<h6>
<ul class="gallery clearfix">
<p><a href="images/Grandformat/1LaMazarine.jpg" rel="prettyPhoto[gallery1]" title="La Mazarine">
<img src="images/mini/LaMazarineMini.jpg" width="120" height="120" alt="Et la le titre" /> </a>
<a href="images/Grandformat/2LeCri.jpg" rel="prettyPhoto[gallery1]" title="C'est le titre encore">
<img src="images/mini/LeCriMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/3fillette.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/filletteMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/4nuque.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/NuqueMini.jpg" width="120" height="120" alt="" /></a>
<a href="images/Grandformat/5champs.jpg" rel="prettyPhoto[gallery1]">
<img src="images/mini/Champs.jpg" width="120" height="120" alt="" /></a> </p>
<p> </p>
</ul>
</h6>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="Footer">
<table width="915" border="0">
<tr>
<td><h2>Mathieu Copyright genial</h2></td>
<td><h3>Site created by Mathieu</h3></td>
</tr>
</table>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_square',slideshow:3000,autoplay_slideshow: false, social_tools: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
</div>
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Un grand merci pour votre aide
