Diaporama - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Diaporama

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Diaporama (Lu 3337 fois)

Diaporama
« sur: le 03-03-2014 a 16:08:23 »

coco17170
Membre récent

Hors-Ligne

Messages: 12

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

Rapporter au modérateur

Re:Diaporama
« Répondre #1 sur: le 04-03-2014 a 18:12:59 »

jean-f
Membre récent

Hors-Ligne

Messages: 40

Je suis un lama!

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

Rapporter au modérateur

Re:Diaporama
« Répondre #2 sur: le 04-03-2014 a 18:50:51 »

coco17170
Membre récent

Hors-Ligne

Messages: 12

Merci pour votre réponse, mais je n'ai jamais utilise ce type de "plugins" donc SVP pouvez m'expliquer comment l'installer.

Merci

Rapporter au modérateur

Re:Diaporama
« Répondre #3 sur: le 04-03-2014 a 20:28:10 »

jean-f
Membre récent

Hors-Ligne

Messages: 40

Je suis un lama!

allez c'est parti !!!!

(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

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>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="jquery.bxslider.min.js"></script>

<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