Voici une ébauche qui tourne sous firefox22 et qui n’utilise pas canvas. En espérant te mettre le pied à l’étrier.
fichier galerie.html
<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8"/>
<title>Galerie</title>
<link href="galerie.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="galerie">
<ul id="galerie-liste">
<li data-titre="titre1" data-sous-titre="sousTitre1" data-src="http://lorempixel.com/647/400/people/1" data-largeur="647" data-hauteur="400"><img alt="image1" id="galerie-miniature1" src="http://lorempixel.com/323/200/people/1"/>
<li data-titre="titre2" data-sous-titre="sousTitre2" data-src="http://lorempixel.com/647/400/people/2" data-largeur="647" data-hauteur="400"><img alt="image2" id="galerie-miniature2" src="http://lorempixel.com/323/200/people/2"/>
<li data-titre="titre3" data-sous-titre="sousTitre3" data-src="http://lorempixel.com/647/400/people/3" data-largeur="647" data-hauteur="400"><img alt="image3" id="galerie-miniature3" src="http://lorempixel.com/323/200/people/3"/>
<li data-titre="titre4" data-sous-titre="sousTitre4" data-src="http://lorempixel.com/647/400/people/4" data-largeur="647" data-hauteur="400"><img alt="image4" id="galerie-miniature4" src="http://lorempixel.com/323/200/people/4"/>
<li data-titre="titre5" data-sous-titre="sousTitre5" data-src="http://lorempixel.com/647/400/people/5" data-largeur="647" data-hauteur="400"><img alt="image5" id="galerie-miniature5" src="http://lorempixel.com/323/200/people/5"/>
<li data-titre="titre6" data-sous-titre="sousTitre6" data-src="http://lorempixel.com/248/400/people/6" data-largeur="248" data-hauteur="400"><img alt="image6" id="galerie-miniature6" src="http://lorempixel.com/124/200/people/6"/>
<li data-titre="titre7" data-sous-titre="sousTitre7" data-src="http://lorempixel.com/647/400/people/7" data-largeur="647" data-hauteur="400"><img alt="image7" id="galerie-miniature7" src="http://lorempixel.com/323/200/people/7"/>
</ul>
</div>
<script type="text/javascript" src="galerie.js"></script>
<noscript>
<div class="cache_ecran">
</div>
<div id="message">
<p>Pour profiter de toutes les fonctionnalités du site, veuillez activer le javascript.
<a href="http://www.maboite.qc.ca/activation_js.php">Comment activer le javascript<span class="quart_de_cadratin"> </span>?</a></p>
<br/>
</div>
</noscript>
</body>
</html>
fichier galerie.js
/*jslint browser: true */
var imageActive = 1, tabImages = [], TITRE = 0, SOUS_TITRE = 1, SRC = 2, LARGEUR = 3, HAUTEUR = 4;
/**
* À partir d’un obj récupère les valeurs de ses attributs commençant par data- et les mets dans un tableau
*
* @param obj objet HTML
* @param tabEtiquettes tableau de chaînes de caractères. Si on veut récupérer les attributs data-prenom et data-nom on passera le tableau ["prenom", "nom"]
* @return tableau de chaînes de caractères. Retourne la valeur des différents attributs data-*
*/
function recupererData(obj, tabEtiquettes) {
"use strict";
var ii, j, booRecherche, res = [];
for (ii = 0; ii < obj.attributes.length; ii += 1) {
// L’attribut courant d’obj est-il un attribut recherché ?
booRecherche = false;
for (j = 0; j < tabEtiquettes.length; j += 1) {
if (obj.attributes[ ii ].nodeName === "data-" + tabEtiquettes[j]) {
booRecherche = true;
break;
}
}
if (booRecherche) {
res[j] = obj.attributes[ ii ].nodeValue;
}
}
return res;
}
/**
* Retourne la largeur de l’icône de l’image n
*
* @param n entier positif
* @param flottant positif
*/
function largeurIcone(n) {
"use strict";
return tabImages[n - 1][LARGEUR] * 200 / tabImages[n - 1][HAUTEUR];
}
/**
* Retourne une image par rapport à l’image courante
*
* @param imageCourante entier
* @param liste objet HTML
* @param n entier 0 retourne l’image active 1=image suivante -1=image précédente
* @return objet HTML
*/
function retourneImage(imageCourante, liste, n) {
"use strict";
return ((imageCourante - 1) + n + liste.childNodes.length - 1) % (liste.childNodes.length - 1) + 1;
}
/**
* Positionne et affiche la nième miniature
*
* @param n entier
* @param pos entier
* @param droiteGauche vaut "left" ou "right"
*/
function afficherEtPlacer(n, pos, droiteGauche) {
"use strict";
if (droiteGauche === "left") {
document.getElementById("galerie-miniature" + n).style.left = Math.round(pos, 0) + "px";
document.getElementById("galerie-miniature" + n).style.right = "auto";
document.getElementById("galerie-miniature" + n).style.display = "block";
} else {
afficherEtPlacer(n, 1100 - pos - largeurIcone(n), "left");
}
}
/**
* Initialisation de la galerie
*
* @param booPremiere booléen vrai si premier passage
*/
function initialisation(booPremiere) {
"use strict";
var liste, galerie = document.getElementById("galerie"), ii, position, n;
liste = document.getElementById("galerie-liste");
if (booPremiere) {
// On rajoute le titre le cache blanc avant et arrière et le sous-titre
galerie.innerHTML = "<div id='miniatures'><div id='galerie-titre'></div><div id='galerie-cache-avant'></div>" + galerie.innerHTML + "<div id='galerie-cache-apres'></div><div id='galerie-precedent' onclick='imagePrecedente()'>←</div><div id='galerie-plus' onclick='agrandirImage()'>+</div><div id='galerie-suivant' onclick='imageSuivante()'>→</div><div id='galerie-sous-titre'></div></div><div id='grandFormat'><img id='imageGrandFormat'/><div id='fermer' onclick='fermer()'>×</div></div>";
}
// On cache les miniatures
for (ii = 1; ii < liste.childNodes.length; ii += 1) {
document.getElementById("galerie-miniature" + ii).style.display = "none";
}
// On récupère les données dans tabImages. Chaque ligne de tabImages représente une image sous forme de tableau dont l’élément 0 est la valeur de l’attribut data-titre l’élément 1 l’attribut data-sous-titre etc…
for (ii = 1; ii < liste.childNodes.length; ii += 1) {
tabImages[ii - 1] = recupererData(liste.childNodes[ ii ], ["titre", "sous-titre", "src", "largeur", "hauteur"]);
}
// On définit la position des caches avant et après
document.getElementById("galerie-cache-avant").style.right = Math.round((1100 + largeurIcone(imageActive)) / 2, 0) + "px";
document.getElementById("galerie-cache-apres").style.left = document.getElementById("galerie-cache-avant").style.right;
// Position de l’image active
afficherEtPlacer(retourneImage(imageActive, liste, 0), (1100 - largeurIcone(imageActive)) / 2, "left");
// Titre et sous-titre
document.getElementById("galerie-titre").innerHTML = tabImages[imageActive - 1][TITRE];
document.getElementById("galerie-sous-titre").innerHTML = tabImages[imageActive - 1][SOUS_TITRE];
// Position images précédentes
position = (1100 + largeurIcone(imageActive)) / 2;
n = 1;
while (position < 1100) {
afficherEtPlacer(retourneImage(imageActive, liste, -n), position, "right");
position += largeurIcone(retourneImage(imageActive, liste, -n));
n += 1;
}
// Position images précédentes
position = (1100 + largeurIcone(imageActive)) / 2;
n = 1;
while (position < 1100) {
afficherEtPlacer(retourneImage(imageActive, liste, n), position, "left");
position += largeurIcone(retourneImage(imageActive, liste, n));
n += 1;
}
}
function imageSuivante() {
"use strict";
imageActive = imageActive % tabImages.length + 1;
initialisation(false);
}
function imagePrecedente() {
"use strict";
imageActive = (imageActive + tabImages.length - 2) % tabImages.length + 1;
initialisation(false);
}
function agrandirImage() {
"use strict";
document.getElementById("miniatures").style.display = "none";
document.getElementById("imageGrandFormat").src = tabImages[imageActive - 1][SRC];
document.getElementById("imageGrandFormat").style.width = tabImages[imageActive - 1][LARGEUR];
document.getElementById("grandFormat").style.display = "block";
}
function fermer() {
"use strict";
document.getElementById("grandFormat").style.display = "none";
document.getElementById("miniatures").style.display = "block";
}
window.onload = function () {
"use strict";
initialisation(true);
};
fichier galerie.css
body {
background:#d4d4d4
}
#galerie {
background:white;
height:600px;
overflow:hidden;
position:absolute;
width:1100px
}
#galerie ul, #galerie-cache-avant, #galerie-cache-apres {
position:absolute;
top:200px;
height:200px;
margin:0;
-moz-padding-start:0
}
#galerie ul li {
float:left;
list-style-type:none;
width:1100px
}
#galerie ul img {
height:200px;
position:absolute
}
#galerie-cache-avant {
left:0
}
#galerie-cache-apres {
right:0
}
#galerie img {
height:400px
}
#galerie-cache-avant, #galerie-cache-apres {
background:rgba(255, 255, 255, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c0ffffff,endColorstr=#c0ffffff); /* hack pour ie */
z-index:1
}
#galerie-precedent, #galerie-suivant, #galerie-plus, #fermer {
cursor:pointer;
position:absolute;
top:420px;
height:20px;
width:20px;
}
#galerie-precedent {
left:0
}
#galerie-suivant {
right:0
}
#galerie-plus, #fermer {
left:525px
}
#galerie-titre, #galerie-sous-titre {
position:absolute;
text-align:center;
width:1100px
}
#galerie-titre {
top:50px
}
#galerie-sous-titre {
top:500px
}
#galerie img, #galerie-cache-avant, #galerie-cache-apres {
transition-property:left, right;
transition-duration:0.5s
}
#grandFormat, #galerie ul img {
display:none
}
#imageGrandFormat {
margin:auto
}
#grandFormat {
text-align:center
}
Je n’aurai pas dû utiliser la colorisation syntaxique. Tous les [ i ] ont été pris pour de l’italique, j’ai alors remplacé les i par des ii et là il me met des smyleys partout. Faites quelque chose chez alsa, s’il vous plaît c’est à peine pénible.
Modifié par adrien881 (05 Jul 2013 - 18:16)
merci mais je pense que cela ne colle pas avec mon script que voici :
)