Créer diaporama
Résolu
Bonjour,
j'aimerais créer un diaporama avec un peu le même style que wordpress, je m'explique : il faudrais que les images défile (avec une petite animation de la droite vers la gauche par exemple), il faudrais également qu'il y ait des flèches pour que l'on puisse avancer ou reculer, et les petits points en dessous du diaporama qui sont là en guise de "page" en quelque sorte.
J'ai cherché pendant au moins 2 ou 3 heures ; j'ai essayé de nombreux tuto mais soit ça ne fonctionnait pas ou soit ça ne correspondait pas à mes attentes.
Donc si vous auriez un tuto ou directement le code cela serait merveilleux !
Merci d'avance et bonne journée/soirée.
j'aimerais créer un diaporama avec un peu le même style que wordpress, je m'explique : il faudrais que les images défile (avec une petite animation de la droite vers la gauche par exemple), il faudrais également qu'il y ait des flèches pour que l'on puisse avancer ou reculer, et les petits points en dessous du diaporama qui sont là en guise de "page" en quelque sorte.
J'ai cherché pendant au moins 2 ou 3 heures ; j'ai essayé de nombreux tuto mais soit ça ne fonctionnait pas ou soit ça ne correspondait pas à mes attentes.
Donc si vous auriez un tuto ou directement le code cela serait merveilleux !
Merci d'avance et bonne journée/soirée.
4 réponses
-
Modérateurlut;)
'diaporama' n'est pas le TOP de ta question, on ne peut pas y répondre tant que l'on ne sait pas comment tu codes, ou sur quel site tu essaies, car il y tellement de possibilités ...
@+
-
C'est un site PHP. Et j'aurais du mettre "slideshow" et non d"iaporama".
Es ce que celà vous aide mieux ? -
Il y a plein de slideshow en jquery configurables et simples a mettre en place
étonnant que tu ne trouve pas ton bonheur la dedans
par exemple en voici un entièrement configurable qui slide n'importe quel contenu
https://css-tricks.com/anythingslider-jquery-plugin/
ou un autre en responsive
http://responsiveslides.com/
pour modifier l'apparence il suffit juste de bidouiller le css ou l'image des fleches de navigaton
pour les transitions tu modifies les options etc
-
Merci mais j'aimerais intégrer la diaporama dans ma propre page web avec des dimensions d'images différentes et lorsque l'on télécharge ces disporamas ils sont déjà sur une page web. Même si je copie le code html/css ça fonctionne rarement
Je recherche plutôt un tuto ou quelque chose à intégrer dans ma page et de simple.
Merci de votre aide-
il ne faut pas copier coller le code mais telecharger le js et integrer jquery
puis initialiser le script js qui s'appliquera sur le html
tous le sliders proposés fonctionnent, c'est que tu n'as pas compris comment les intégrer a ta page web
voici un tuto en francais
https://www.lafermeduweb.net
autre chose un slider avec des tailles différentes d'image meme si c'est possible, ce n'est pas le top
sinon plus simple voici un code a integrer mais ca reste très basique
1) tu mets tes photos (et aucun autre fichier) dans un repertoire que tu nomme photos (à la racine de ton site)
2) tu copie colle le code ci dessous
<DIV ID=ejs_photo_box></div>
<script type="text/javascript">
ejs_photo = new Array;
<?php
$a = 0;
$handle = opendir("photos"); // Pense mettre le vrai nom de ton dossier ici
$dir = opendir("photos");
while($file = readdir($dir)){
if(!in_array($file,array(".",".."))){
$files_array[] = $file;
}
}
natcasesort($files_array);
foreach($files_array as $file)
{
echo "ejs_photo[$a] = 'photos/$file';";
$a++;
}
closedir($handle);
?>
function ejs_aff_photos(num)
{
if(document.getElementById)
{
ejs_fin = "";
if(num!=0)
ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num-1)+");return(false)'>< Précédent</A> ";
if(num!=(ejs_photo.length-1))
ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num+1)+");return(false)'>Suivant ></A>";
document.getElementById("ejs_photo_box").innerHTML = "<CENTER> "+ejs_fin+" <BR><IMG SRC='"+ejs_photo[num]+"' BORDER=0 ><BR> "+ejs_fin+" </CENTER>";
}
}
window.onload = new Function("ejs_aff_photos(0)")
</script>
le css
#ejs_photo_box {
height : auto;
margin : 30px;
padding : 20px;
text-align : center;
border: 1px solid #99CCFF;
background-color: #99FFFF;
}
#ejs_photo_box a {
font-size : 20px;
color : #ff6600;
font-weight : bold;
text-decoration : none;
margin : 20px;
text-align : center;
}
#ejs_photo_box a:hover {
color:#FF3300;
background-color:#FFFFFF;
letter-spacing:2px;
}
#ejs_photo_box img {
border: 1px solid #99CCFF;
min-width:300px;
min-height:300px;
max-width: 80%;
margin : 20px 0 20px 0;
} -
-
-
-
