画像が拡大の前へ、次へのリンク
現在、画像クリックで拡大する下記の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
お礼
ありがとうございますっ!! 早速の回答をいただけて本当にうれしいです。 それぞれ、思っていたイメージにぴったりな言葉でとても参考になりました。 一人でもんもんと悩んでいたのが嘘のようです。聞いてよかったです! 本当にありがとうございました。 お気づきかもしれませんか、かなり焦っていたのか ニックネームの綴りを間違えていてすごく恥ずかしいです…。