Charger les images des diapos et les afficher
Bonsoir à tous.
Je me présente à vous car je suis bloqué dans mon développement. En effet, voici ce que je cherche à faire:
Sur une page, je possède plusieurs diaporamas. Ceux-ci sont disposés comme tel:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="1" class="slide">
<p>
<a class="diapo" rel="tutoriel_slide_1" href="includes/download/big/image1.jpg"><img src="includes/download/mini/image1.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_1" href="includes/download/big/image2.jpg"><img src="includes/download/mini/image2.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_1" href="includes/download/big/image3.jpg"><img src="includes/download/mini/image3.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_1" href="includes/download/big/image4.jpg"><img src="includes/download/mini/image4.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_1" href="includes/download/big/image5.jpg"><img src="includes/download/mini/image5.jpg" class="slide_image"/></a>
</p>
</div>
<div id="2" class="slide">
<p>
<a class="diapo" rel="tutoriel_slide_2" href="includes/download/big/image1.jpg"><img src="includes/download/mini/image1.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_2" href="includes/download/big/image2.jpg"><img src="includes/download/mini/image2.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_2" href="includes/download/big/image3.jpg"><img src="includes/download/mini/image3.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_2" href="includes/download/big/image4.jpg"><img src="includes/download/mini/image4.jpg" class="slide_image"/></a>
<a rel="tutoriel_slide_2" href="includes/download/big/image5.jpg"><img src="includes/download/mini/image5.jpg" class="slide_image"/></a>
</p>
</div> |
Vous pouvez voir que j’identifie la zone de diaporama par un id unique contenue dans la base de donnée, mes liens possèdent tous un rel contenant cet id. Le diaporama va être ouvert par fancybox, dont voici le code:
Code:
1
2
3
4
5
6
7
8
9
|
$("a[rel=tutoriel_slide_1]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
}); |
Jusqu'ici pas de gros problème mais comme vous pouvez le voir, fancybox n'ouvre que les rel contenant l'id 1, hors j'en ai plusieurs, et je ne vais pas faire un fancybox pour chaque diaporamas en plus ne sachant pas quel est l'id. Comment je rends dynamique?
Voici donc mon idée:
Code:
1
2
3
4
|
$("a.diapo").click(function(){
id = $(this).parent().parent().attr('id');
}); |
Je récupère donc ici l'identifiant de mon div qui va contenir mes images.
Mais voilà! Comment dire à fancybox de prendre les images qui sont identifiées de manière unique par l'id?
Comme ceci?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
$("a.diapo").click(function(){
id = $(this).parent().parent().attr('id');
$("a[rel=tutoriel_slide_"+id+"]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
}); |
Cependant ça ne marche pas... Il ne prend même plus en compte fancybox.
Vous me direz qu'il y a surement d'autres idées plus simple mais je reste cantonné à celle-ci puisque personne n'est capable de m'en fournir une meilleur.
A postériori, je voudrais pouvoir charger les images de la base de donnée que lorsque je clic sur le lien avec JSON, mais ça aussi je sèche. Voilà le code de chargement:
Code:
1
2
3
4
5
6
7
8
9
10
|
$("a.diapo").click(function(){
id = $(this).parent().parent().attr('id');
$.getJSON("index.php",'index.php?controleur=admin&tache=listerImages&id='+id,function(data){
$.each(data,function(index,elem){
var image = '<a rel="tutoriel_slide_'+id+'" href="includes/download/big/'+elem.url+'"><img src="includes/download/min/'+elem.url+'" class="slide_image"/></a></div>';
a.after(image); // ici j'aimerais pouvoir construire après le lien sur lequel j'ai cliqué, chaque lien qui me permettront d'utiliser fancybox...
});
});
}); |
Et donc en suite ouvrir les images fraichement chargée avec fancybox.
J'espère avoir été assez claire... Je sèche vraiment sur le sujet et ça fait depuis 2 autre forum qu'on m’envoie bouler.... J'ai besoin de vous!
