Posez votre question Signaler

Diaporama en html [Résolu]

Duriane 6Messages postés 15 janvier 2008Date d'inscription - Dernière réponse le 21 jui 2011 à 15:04
Bonsoir,
Néophyte, je viens de commencer mon premier site en html et je voudrais intégrer un diaporama dans ma page.
J' ai d'abord intégré le code du diaporama en javascript (trouvé sur le net), ce slideshow me paraissait tout beau tout mignon, mais là ça devient du grand n'importe quoi.
Il faut donc que je repasse à quelque chose de plus basique...le javascipt sera pour plus tard.... ou pas.
en substance mon site contient :
• 1 page d'accueil avec un menu > celui-ci mène a une 2eme page html
• 2eme page html > meme contenu que la 1ere page mais avec un sous-menu, proposant de choisir parmi différents thèmes de photos, puis dans chaque thème un diaporama.
Je voudrais donc créer un diaporama avec des vignettes disposées en colonnes 1 2 3
4 5 6 ....
et l'agrandissement de ces vignettes dans un bloc sur la même page et non en pop up.
J'ai peur de ne pas être claire.... mais si quelqu'un pouvait me donner des conseils... je serais toute ouïe.
Merci
Lire la suite 

Diaporama en html »

26 réponses
Réponse
+16
moins plus
SALUT

un simple CSS , html peu faire une presentation photo convenable !

Exemple


le code html

la CSS

RAD

Sounia72 - 14 jun 2011 à 15:10
Bonjour a toi et merci beaucoup pour les codes du diapo qui mon bien servis et avec lesquels j'ai pu m'amuser. bref! mon seul soucis c'est que j'aimerai savoir si c'est possible d'avoir au click de chaque images une description qui s'affiche en même temps sur le côté? si vous avez une réponse ou une idées merci de me la faire parvenir. :)
CyCoool - 6 jui 2011 à 17:08
Merci.
++++
Isabelle2204 - 21 jui 2011 à 15:04
Bonjour,
Super ce diapo pour les novices!!!
Tellement novice que je voudrais bien y ajouter un titre explicatif à chaque série de photos, et que je ne sais pas comment faire. Pouvez-vous m'aider???
D'avance merci tout plein
Ajouter un commentaire
Réponse
+0
moins plus
Bonsoir Duriane,

Quels sont les effets produits par Javascript sur ta page HTML ?
Le code est sans doute mal adapté mais il faudrait en savoir plus pour résoudre le problème.
Perso, j'aime pas l'usage de Javascript car si chez l'internaute consultant il est désactivé : pas de diaporama :-(
Mais si c'est Javascript que tu veux, on peu regarder .....
Sinon tu peux faire très simple et rester en HTML, avec un peu de CSS, pour tes vignettes, et proposer un agrandissement sur une page distincte avec commentaire à l'appui.
Attention à la taille et poids des images.
J'ai pas compris pourquoi 2 pages pour arriver au menu des thèmes ?

Tu peux me laisser un mail si tu veux plus d'infos.
Bon courage et bon surf ;-)
Duriane - 16 jan 2008 à 00:08
Bonsoir Pleuven,
non seulement le code js doit être mal adapté mais en plus je ne sais pas où le placer dans ma page html. Du coup il s'ouvre dans une autre page.
J'aimais bien les effet de transparence et de fondu qui lui donnait un coté plus classe, mais je pense que je vais abandonner.

Je voudrais que mes vignettes s'agrandissent sur la même pages.
Il faut que je fasse le menage sur mes pages et je pourrais te les envoyer ?
par contre je ne sais pas comment te donner mon adresse mail sans le faire apparaitre sur le forum.

merci
Duriane - 16 jan 2008 à 20:14
Bonsoir pleuven64,
j'aurais besoin d' aide mais je ne peux pas t'envoyer de message privé.

Help
Ajouter un commentaire
Réponse
+0
moins plus
tu peut le faire en fesant un méssage privé comme je t'es envoyer avent regarde dans ton profil! @+
Ajouter un commentaire
Réponse
+0
moins plus
Bonsoir Duriane tu peux m'écrire ici : pleutvaine@yahoo.fr
A bientôt si tu veux
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour, merci pour les codes.
En effet c'est pas mal, par contre ça ne marche pas sous safari et sous firefox les images s'affichent en transparences....
Je n'arrivent pas non plus à les faire s'afficher centrées dans un bloc.
Ajouter un commentaire
Réponse
+0
moins plus
ça ne marche pas sous safari et sous firefox les images s'affichent en transparences.... ????

pas chez moi !!?
FFX

safari

Je n'arrivent pas non plus à les faire s'afficher centrées dans un bloc

il faut que tu adapte la css a ce que tu veux faire !! mais c est le principe que je t ai montre , a toi de l adapter ;-))

RAD
Ajouter un commentaire
Réponse
+0
moins plus
je sais bien que je dois l'adapter, mais je ne peut pas inventer quelque chose que je ne connais pas. :'(
et ce n'est pas faute de chercher.....
Ajouter un commentaire
Réponse
+0
moins plus
je sais bien que je dois l'adapter, mais je ne peut pas inventer quelque chose que je ne connais pas. :'(

http://css.alsacreations.com/...

RAD
Ajouter un commentaire
Réponse
+0
moins plus
bonjour
je veut afficher des photos en mode diaporama avec la possibilité de les afficher en boucle
s'il vous plait j'ai besoin d'aide
merci d'avance
Ajouter un commentaire
Réponse
+0
moins plus
Merci à Rad...
Bien que n'étant qu'un petit amateur occasionnel, je suis arrivé à modifier en particulier le CSS pour l'adapter à mon besoin. Il est certain qu'il faut se gratter un peu la tête et ne pas attendre que cela tombe tout cuit du Net.
Quoique de nombreux développeur mettent bénévolement à notre disposition des bouts de codes, voire des outils complets en HTML, java C++, ... et le domaine des diaporamas est vraiment bien fourni depuis de nombreuses années. On trouve de tout à ce propos, dans tous les langages,...
Encore faut-il se donner la peine de chercher quelques minutes ;-) tellement il y a le choix et d'essayer de comprendre un peu pour l'adapter à son propre projet!
Merci donc à tous ces bénévoles y compris ceux qui font des bugs, mais en particulier à ceux qui prennent la peine de commentent leur code, facilitant ainsi notre apprentissage.
Et merci à ceux qui les hébergent!
0livier34 - 29 mai 2009 à 00:33
J'ai beau creusé le CSS et le code HTML avec ma povr' tête, même avec les explications données, mais là.... je bogue définitivement.

Ma souris se change bien en main au passage des vignettes mais ni les vignettes, ni les images ne s'affichent, l'écran reste désespérément noir.

Please donnez nous une indication supplémentaire... à défaut de LA solution.
Je n'en peux plus de chercher.
Danibleu - 29 mai 2009 à 10:41
Bonjour Olivier34

Voila ce que j'ai mis dans ma page empire. html
avant /head : <link rel="stylesheet" type="text/css" href="russe/russe.css">

Dans mon tableau
<!-- Galerie images -->
<tr>
<td style="vertical-align: top;">
<img src="images/ligne.gif" border="0" height="8" width="174" alt="Illustrated History of the Russian Empire">
<br><span style="font-weight: bold; color: rgb(204, 0, 0);">Pictures</span>
<br>
</td>
<td style="vertical-align: top; background-color: rgb(152,252,152); text-align: justify;">
<img src="images/ligne.gif" border="0" height="8" width="506" alt="Illustrated History of the Russian Empire">
<br>
<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="russe/empire_russe01.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe02.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe03.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe04.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe05.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
<br><a href="#nogo">
<img src="russe/empire_russe06.jpg" title="" alt="Illustrated History of the Russian Empire" /></a>
</em>
</div>
</td>
</tr>

le code CSS (russe/russe.css)
body {
background-color: #000000
}
#gallery {
position: relative;
width: 50px;
}
#thumbs {
width: 50px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 65px;
border: 0px solid #000;
}
#thumbs a img {
width: 50px;
height: 65px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
left: 60px;
top: 10px;
border: 1px solid #333;
}

Bonne chance
Ajouter un commentaire
Réponse
+0
moins plus
Merci Rad
Ajouter un commentaire
Réponse
+0
moins plus
Regarde du coté de la technologie AJAX, il doit y avoir de beau diaporama ou bien en flash (personnellement, j'opterai pour l'option ajax).
jlamyva - 16 fév 2009 à 18:39
Merci pour le message en réponse. Peux-tu m'indiquer où est l'erreur dans l'adaptation de ton exemple que je voudrais reproduire (voir mon message précédent) ?
Ajouter un commentaire
Réponse
+0
moins plus
moi je vus conseille xat.com
Ajouter un commentaire
Réponse
+0
moins plus
le css légèrement modifié pour les besoins, ce diaporama est tout à fait correct.
même balancé sur un blog dotclear !!

merci radz
Ajouter un commentaire
Réponse
-3
moins plus
bonjour !
j'ai bien vu que tu cherché comment faire un diapo en HTML
mais je te propose un truc plus simple !! je suis également débutant dans se domaine méme si cela fait 3 ans que je poccède mon site web !! j'arrive pas avec le HTML!!
j'utilise JOOMLA open source ou licenseGNU/GPL

JOOMLA est un système de gestion de contenu (en anglais, CMS, pour Content Management system) créé par une équipe internationale de développeurs récompensée à maintes reprises, celle-là même qui a hissé Mambo vers les sommets. Et un CMS, c'est quoi?? Pour faire simple, un CMS est un logiciel web qui vous permettra de créer un site internet dynamique en toute simplicité. Joomla! est un CMS Open Source distribué sous license GNU/GPL (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos,...), le tout sans connaissance technique particulière.

perso sa fait quelque mois que je le teste en local et c'est pas mal et depuis peut en ligne !!

pour les galleris photos tu a juste a r'ajouté un module et a mettre tes fichier dans (exemple) ma galleris et il te cré automatiquement la galleri!

regarde sur http://www.joomla.fr/ et sur http://www.joomlafrance.org/ tu peut également trouvé de la doc en format PDF comme JOOMLA pour les nul depuis le net !!

@++ et bon courage!
Ajouter un commentaire
Ce document intitulé « diaporama en html » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook