こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

現在、画像クリックで拡大する下記の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

投稿日時 - 2012-01-10 14:14:59

QNo.7236283

すぐに回答ほしいです

質問者が選んだベストアンサー

<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-01-10 16:21:23

お礼

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

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

投稿日時 - 2012-02-26 16:44:44

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問