画像が拡大の前へ、次へのリンク

現在、画像クリックで拡大する下記のjQueryを設置してりるのですが、
http://chocolat.insipi.de/demo.html

demoサイトでは、画像をaタグで順番に設置していますが
これを下記のようにliタグに変更すると画像が拡大表示された時に
前の画像と次の画像へのリンク画像が消えてしまいます。

<ul id="exemple1" title="Gouttes">
<li> <a href="series/gouttes/1.jpg" title="Rose">
<img src="series/gouttes/mini/1.jpg">
</a></li>
<li> <a href="series/gouttes/2.jpg" title="Noir">
<img src="series/gouttes/mini/2.jpg">
</a></li>
<li> <a href="series/gouttes/3.jpg" title="Orange">
<img src="series/gouttes/mini/3.jpg">
</a></li>
</ul>

HTMLのBODY内には、以下のようにスクリプトを設置しています。
liタグでも前へ次へのリンクが表示されるようにするには、スクリプトのどの箇所を修正すればうまく動くかおわかりの方がおられましたらご教授頂けないでしょうか。

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(function() {
$('#exemple1li').Chocolat({

});
});
});

</script>


■chocolat.js

(function($) {
images = new Array();
$.fn.Chocolat = function(settings) {
settings = $.extend({
modeText:false,
linksContainer:'portfolio',// must be an <ul> ID , #
overlayOpacity:0.8,
overlayCouleur:'#fff',
vitesseApparitionOverlay:500,
vitesseApparitionImage:500,
vitesseDisparitionImage:500,
vache:true,//active(true) ou non(false) la fermeture lorsque l'on clique sur le fond.
separateur1:' | ',//separe le titre la serie de la position de l'image au sein de la s駻ie ...
separateur2:'/',//s駱are l'image actuelle sur le nombre d'image total dans la s駻ie...
gaucheImg:'img/gauche.gif',//chemin vers l'image pour aller vers la gauche
droiteImg:'img/droite.gif',//chemin vers l'image pour aller vers la droite
fermerImg:'img/close.png',//chemin vers l'image pour fermer chocolat
imageActuelle:0,//ici devient l'image de d駱art...
serie:0,
nomSerie:0,
derniereImage:0
},settings);
this.each(function(index){
settings.serie = images.length;
settings.nomSerie = $(this).attr('title');
images[settings.serie] = new Array();
if($(this).get(0).tagName == 'A'){e = $(this);}// si l'appel est fait sur les liens
else{e = $(this).children();}// sinon (sur une div)
e.each(function(index) {
images[settings.serie][index] = new Array();
images[settings.serie][index]['adresse'] = $(this).attr('href');
images[settings.serie][index]['legende'] = $(this).attr('title');
if(!settings.modeText){
$(this).unbind('click').bind('click', {id: settings.serie, nom : settings.nomSerie, i : index}, _initialise);
}
})
if(settings.modeText){
if($('#'+settings.linksContainer).size() == 0){
$(this).before('<ul id="'+settings.linksContainer+'"></ul>');
}
$('#'+settings.linksContainer).append('<li><a href="#" id="Choco_numserie_'+settings.serie+'" class="Choco_link">'+settings.nomSerie+'</a></li>');
$(this).remove();
return $('#Choco_numserie_'+settings.serie).unbind('click').bind('click', {id: settings.serie, nom : settings.nomSerie, i : settings.imageActuelle}, _initialise);
}
});

function _initialise(event) {
settings.imageActuelle = event.data.i;
settings.serie = event.data.id;
settings.nomSerie = event.data.nom;
afficherChocolat(settings.serie); //recupere numserie dans id .
return false;
}
function _interface(){
//html
$('body').append('<div id="Choco_overlay"></div><div id="Choco_content"><div id="Choco_close"></div><div id="Choco_container_photo"></div><div id="Choco_container_description"><span id="Choco_container_titre"></span><span id="Choco_container_via"></span></div><div id="Choco_aller_gauche" class="Choco_fleches"></div><div id="Choco_aller_droite" class="Choco_fleches"></div></div>');
$('#Choco_aller_gauche').css('background-image', 'url('+settings.gaucheImg+')');
$('#Choco_aller_droite').css('background-image', 'url('+settings.droiteImg+')');
$('#Choco_close').css('background-image', 'url('+settings.fermerImg+')');
//events
$(doc

No.1 ベストアンサー 回答者： my-- 回答日時： 2012/01/10 16:21

<p id="exemple1">

　<a href="series/gouttes/1.jpg" title="Rose">
　　<img width="100" src="series/gouttes/mini/1.jpg" />
　</a>
　<a href="series/gouttes/2.jpg" title="Noir">
　　<img width="100" src="series/gouttes/mini/2.jpg" />
　</a>
　...
</p>

$('p#exemple1').Chocolat();
-------------------------------------------------------

chocolat.js 30行目付近：
else{e = $(this).children();}// sinon (sur une div)

上記の例では、ここで子のa要素がグループ化されますが

$('ul#exemple1').Chocolat();

ul要素の場合、子はli要素ですからa要素がグループ化されません。なので

chocolat.js 30行目付近：
else{e = $(this).find('a');}// sinon (sur une div)

こんな感じに書き換えて、子孫からa要素を選択させて下さい。

※ セレクタは $('#exemple1 li') ではなく $('#exemple1')

この回答へのお礼

お返事が遅くなってしまい申し訳御座いません！！
ご回答頂き大変ありがとうございます！
お教え頂いた方法で理想どおりのサイトが実現しそうです。

本当にありがとうございました！

お礼日時：2012/02/26 16:44