galerie photo avec javascript - alsacréations
galerie photo avec javascript - alsacréations
aller au contenu aller au menu aller à la recherche politique d'accessibilité
recherche dans les tutoriels
alsacréations
tutoriels
forum
blog
pro
boutique
plan
tutoriels par catégories
tous les tutorielsaccessibilité du web
bases et indispensables
construction de menus en css
faire une mise en page sans tableaux
gestionnaires de contenu (cms)
tutoriels et articles divers
tutoriels javascript
tutoriels php
trousse à outils
gabarits de mise en page css
galerie de menus
rendu par défaut des éléments html
générateur de squelettes (x)html
alsaquiz
partenaires
authentic :réédition
ancien
mettez vous au parfum
bons de réduction
annuaire miwim
(devenir parrain ?)
fil rss 1.0
page d'accueil
tutoriels javascript
galerie photo avec javascript
le 08-04-2005 par collectif alsacreations dans tutoriels javascript.
voici un petit exemple concret d'un cas où javascript permet un
gain au niveau de la navigation sans entrave à l'accès au contenu au
cas où ce dernier soit désactivé. la séparation du contenu et de la
partie script permet une facilité de gestion de votre galerie et un
allègement du poids des pages, en effet vous n'avez aucun code
javascript à ajouter dans votre page en elle même, tout est géré par le
script et appelé dans la partie <head> de la page.
il
peut être très avantageux d'utiliser le javascript pour certaines
choses comme notament des galeries photos (ou autre), en effet vous ne
rechargez pas la page au clic sur la miniature, la photo en taille
réelle est directement affichée sans recharger quoi que ce soit. les
galeries en php ne permettent pas ce genre de choses et de plus
nécessitent l'accès à cette technologie, ce qui n'est pas toujours le cas
notament dans le cas de certains hébergeurs gratuits.
les codes xhtml et css
nous
allons commencer par voir comment structurer notre code xhtml afin
d'agir dessus, il s'agira de présenter les miniatures sous forme de
liste non ordonnée et d'ajouter ensuite une zone pour l'image en taille
réelle.
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/photo1.png" title="titre de la photo 1"><img src="images/minis/m_photo1.png" alt="le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="titre de la photo 2"><img src="images/minis/m_photo2.png" alt="le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="titre de la photo 3"><img src="images/minis/m_photo3.png" alt="le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="titre de la photo 4"><img src="images/minis/m_photo4.png" alt="le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="titre de la photo 5"><img src="images/minis/m_photo5.png" alt="le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="titre de la photo 6"><img src="images/minis/m_photo6.png" alt="le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="titre de la photo 7"><img src="images/minis/m_photo7.png" alt="le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="titre de la photo 8"><img src="images/minis/m_photo8.png" alt="le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="titre de la photo 9"><img src="images/minis/m_photo9.png" alt="le titre de la photo 9" /></a></li>
</ul>
<dl id="photo">
<dt>titre de la photo 1</dt>
<dd><img id="big_pict" src="images/photo1.png" alt="photo 1 en taille normale" /></dd>
</dl>
</div>
nous
allons mettre un peu de style dans tout ça pour rendre le tout plus
agréable, voici donc un exemple de code css utilisable, à vous
d'adapter à vos besoins.
div#galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
voilà
notre galerie mise en place, à ce stade vous pouvez déjà tester le
résultat, vous vous rendez compte que les liens sur les miniatures
ouvrent les images en taille réelle dans la fenêtre. c'est le
comportement que vous aurez si le javascript est desactivé, vous voyez
donc que l'accès au contenu n'est pas bloqué dans ce cas, vos photos
sont alors disponibles normalement. il ne nous reste alors qu'à faire
le script javascript pour rendre ceci un peu plus agréable.
la fonction javascript gérant la galerie
il
faut maintenant créer la fonction javascript qui gérera notre galerie,
commençons par l'appeler dans notre page html en plaçant cette ligne
dans la partie <head> : <script type="text/javascript" src="script.js"></script>
il faut maintenant créer le fichier script.js.
function displaypics()
{
var photos = document.getelementbyid('galerie_mini') ;
// on récupère l'élément ayant pour id galerie_mini
var liens = photos.getelementsbytagname('a') ;
// on récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getelementbyid('big_pict') ;
// ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getelementbyid('photo').getelementsbytagname('dt')[0] ;
// et enfin le titre de la photo de taille normale
// une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // on change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // on change son titre
titre_photo.firstchild.nodevalue = this.title; // on change le texte de titre de la photo
return false; // et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displaypics;
// il ne reste plus qu'à appeler notre fonction au chargement de la page
et voilà votre galerie fin prête à être visitée, vous pouvez voir un exemple de ce que ça donne.
un problème, une question ?
vous avez des soucis avec ce tutoriel ? venez en discuter dans le salon spécifique aux tutoriels et articles du forum alsacréations.
haut de page - politique d'accessibilité - conception : alsacreations.fr - hébergement : nikozen- admin -
tous les codes sont mis à disposition sous un contrat creative commons.
mesure d'audience roi frequentation par
Acceuil
suivante
galerie photo avec javascript - alsacréations galerie La Route de la Soie et ses Merveilles Galerie art Afrique : photo d'Afrique Noire, livres et art ... Quarante-Deux XLII/Galerie virtuelle Galerie Paris - Naive and Primitive Art for sale and license Spot Image - GALERIE Le 31 restaurant bar lounge club Arludik La galerie de Majorie – peinture par numéro, numéro d’art, loisirs ... Galerie Fanny Guillon-Laffaille expert Raoul Dufy Bienvenue sur le site Papiers Gras La galerie du Haut-Pavé, activités de l'association culturelle. Les Grands Appartements et la Galerie des Glaces Art And Ecology - Accueil ArteDeco - Galerie du tableau pour la décoration de votre maison ... http://www.uni-ver.fr Galerie Catherine et André Hug - Art Contemporain Jacob1 Sport action art Gallery / Galerie d'art de la glisse de Pascal ... Galerie Octave Cowbell : Accueil Galerie Plaisance SEINE 51 - Galerie d'Art Contemporain - Paris Honfleur Galerie Dassonvalle Honfleur Tél:02 31 89 94 67 Paris Manaus Home Page ACCUEIL Galerie-DCor.com La GALERIE qui protège vos DROITS D'AUTEUR Galerie Natalie Boldyreff Ground7, Label indépendant, Galerie d'Art Virtuelle, Promotion des ... Galerie virtuelle d'art africain / African art virtual galery Galerie Le Feuvre, Art contemporain, Mobilier de créateurs Galerie Bailly Paris, Galerie d'art parisienne, expositions d ... Galerie d'art à Issy galerie moulage GALERIE HELENE LAMARQUE Art moderne et contemporain Le 1er Musée d'Instruments de Musique du Web Galerie d'art contemporain africain à Lyon Galerie Phal, Paris, Saint-Germain des Prés, Christine Phal, Art ... Galerie de peinture, art contemporain et galerie d'artiste peintre ... GALERIE : Vous êtes dans la catégorie Galerie de BIG-annuaire.com Akemi asia Galerie Vals La parole est à l'image - Galerie art magazine Arobance Galerie Photos - Cool'In Jazz Galerie Nelson Galerie Vidal Saint-Phalle GALERIE HONFLEUR - DANIELLE BOURDETTE Gorzkowski Exposition de ... philippe ramette - oeuvres (galerie xippas) Galerie Patrick Seguin 20th Century Furniture & Architecture Galerie Photos Art de Provence - Musées - Galerie des Ponchettes Galerie collection, musée, pinacothèque, accumulation, album, amas ... Galerie de peinture Jean Valina en marge La galerie Minsky - Leonor Fini ..:: Place des Arts ::.. Galerie d'art de Montpellier, verre ... La Galerie du Chateau: Peintures & Sculptures LISTOO ARTEXPO: galerie d'art virtuelle La galerie de LA et JR picasaweb.google.fr/tremechan/Martine Galerie Vitesse Galerie AKTUARYUS / Galerie Daniel Guidat art contemporain à Paris et à Monaco - Galerie incognito ...