0

ウェブサイトを作成しています。このサイトでは、私が何年も使用してきたものと同じ Lightbox スクリプトを使用しています。シンプルで読み込みが速く、不満を感じたことはありません。さて、このクライアントは、画像をクリックすると大きな画像がライトボックスにポップアップ表示され、左右に循環できるようにする必要があります。

http://holidaylettingsbulgaria.co.uk/rentone.html

このサイクルを次の大きな画像まで行うために、ライトボックス スクリプトに追加できるものはありますか?

ここでライトボックス スクリプトを確認できます:- http://codepen.io/studiowebmedia/pen/kFchr

4

1 に答える 1

1

たとえば、「次へ」と「前へ」のリンクを追加して、次/前の画像のクリックをシミュレートできます。

<ul>
  <li><a href="#" class="lightbox">Photo 1</a></li>
  <li><a href="#" class="lightbox">Photo 2</a></li>
  <li><a href="#" class="lightbox">Photo 3</a></li>
  <li><a href="#" class="lightbox">Photo 4</a></li>
</ul>

<div id="menu" style="display:none;">
  <a href="#" id="prev">&laquo; Prev</a>
  <a href="#" id="next">Next &raquo;</a>
</div>


$('.lightbox').click(function(){
   $('.lightbox').removeClass("active");
   $(this).addClass("active");

   $('#menu').show();
});
$('#next').click(function(){
    var img_index = $('.lightbox.active').index('.lightbox')+1;

    if($('.lightbox:eq('+img_index+')').size()==0) $('.lightbox:first').click();
    else $('.lightbox:eq('+img_index+')').click();
});

$('#prev').click(function(){
    var img_index = $('.lightbox.active').index('.lightbox')-1;

    if(img_index<0) $('.lightbox:last').click();
    else $('.lightbox:eq('+img_index+')').click();
});
于 2013-06-19T19:50:21.393 に答える