現在、画像クリックで拡大する下記の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
お礼
お返事が遅くなってしまい申し訳御座いません！！ ご回答頂き大変ありがとうございます！ お教え頂いた方法で理想どおりのサイトが実現しそうです。 本当にありがとうございました！