Titre: Diaporama
Posté par: coco17170 le le 03-03-2014 a 16:08:23
Bonjour, je suis en train de créer un site internet avec dreamweaver (HTML 5) et je voudrais faire défiler des images avec un lien ou on clique dessus et une page s'ouvre et avec des flèches sur le côtés... ou autre.
Comme ceci (je ne veut pas faire de pub):http://www.meteo-ouest.fr/
Cordialement
coco17170 |
Titre: Re:Diaporama
Posté par: jean-f le le 04-03-2014 a 18:12:59
Salut,
une recherche avec "slider jquery" et tu pourras trouver ton bonheur
un exemple parmi tant d'autres http://bxslider.com/examples/auto-show-start-stop-controls
bouton "download" en haut de page pour telecharger les fichiers.
@+ en espérant que ca pourra t'aider |
Titre: Re:Diaporama
Posté par: coco17170 le le 04-03-2014 a 18:50:51
Merci pour votre réponse, mais je n'ai jamais utilise ce type de "plugins" donc SVP pouvez m'expliquer comment l'installer.
Merci
|
Titre: Re:Diaporama
Posté par: jean-f le le 04-03-2014 a 20:28:10
allez c'est parti !!!! ;D
(j'espère que tu as quelque notion de base pour html sinon on est pas sorti de l'auberge enfin plutôt du forum :P
quand tu fais une page avec dreamweaver ou autre ta une page du style (je mets pas toutes les balises juste l'essentiel :
Code:
<html>
<head>
</head>
<body>
</body>
</html>
|
|
entre les baslises :
Code:
<head>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
</head>
|
|
il faut que tu mettes les fichiers jquery.bxslider.min.js et jquery.bxslider.css au meme niveau que ton fichier html qui contiendra le diaporama (tu les trouves dans le dossier que tu as normalement téléchargé sur le site)
un exemple parmi tant d'autres http://bxslider.com/examples/auto-show-start-stop-controls
bouton "download" en haut de page pour telecharger les fichiers.
entre les balises :
Code:
<body>
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>
</body>
|
|
tu auras compris que
/images/pic1.jpg
/images/pic2.jpg
/images/pic3.jpg
/images/pic4.jpg
sont tes images du diaporama donc a changer le nom et/ou le répertoire de tes images
je pense avoir fait le tour de l'install si tu as un soucis .... peu être que je serais encore dans les parages ;) ;) ;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|