0

私は初心者で、jquery を使用してライトボックス Web ギャラリーを作成しようとしています。これは基本的なギャラリーです。リスト内の画像 (サムネイル) をクリックすると、jquery は非表示のライトボックス div を表示します。これにより、背景が暗くなり、現在の画像 (フルサイズ) が白い境界線で表示され、次/前の画像が表示されます。ボーダーのボタンを閉じます。次へ/前へのボタンが 1 回しか機能せず、修正方法がわかりません。(私は前のボタンで何もしていないので、明らかにまったく機能しません。) 何かアイデアはありますか? コードは次のとおりです。

html

<ul class="gallery">
        <li> <a href="img/gallery/fullsize/full_foto001.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto001.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto002.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto002.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto003.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto003.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto004.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto004.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto005.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto005.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto006.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto006.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto007.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto007.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto008.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto008.jpg"> </a> </li>
        <li> <a href="img/gallery/fullsize/full_foto009.jpg" class="lightbox_trigger"> <img src="img/gallery/thumbnail/thumbnail_foto009.jpg"> </a> </li>
    </ul>

<div id="lightbox">

<div id="gallery_content">

</div>

jquery

 $('.lightbox_trigger').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();

    $('#lightbox').show('slow');

    var image_href = $(this).attr("href");

    var image_href2 = $(this).parent().next('li').children('a').attr("href");


   $('#gallery_content').html('<img src="' + image_href + '" />' + 
   '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
   '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
   '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

   //next
   $(document).on('click', '#gallery_next', function(){
        $('#gallery_content').html('<img src="' + image_href2 + '" />' +
        '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
        '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
        '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

   });


   //previous
   $('#gallery_prev').click(function(){

   });
});
4

3 に答える 3

1

私はそれを考え出した。それがどれほど「エレガント」かはわかりませんが、機能します。ここにあります：

$(document).ready(function() {
 $('.lightbox_trigger').click(function(e) {
        //prevent default action (hyperlink)
        e.preventDefault();

        $('#lightbox').show('slow');

        $(this).attr('class','this');

        var image_href = $(this).attr("href");

        var image_href2 = $('.this').parent().next('li').children('a').attr("href");


       $('#gallery_content').html('<img src="' + image_href + '" />' + 
       '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
       '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
       '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');



 });



  //next
  $(document).on('click', '#gallery_next', function(){
            var image_href2 = $('.this').parent().next('li').children('a').attr("href");
            $('#gallery_content').html('<img src="' + image_href2 + '" />' +
            '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
            '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
            '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');

            $('.this').attr('class', 'remove');
            $('.this').removeAttr('class', 'this');
            $('.remove').parent().next('li').children('a').attr('class', 'this');
            $('.remove').removeAttr('class', 'remove');

  });


  //previous


 //hide 
 $(document).on("click", "#gallery_close", function(event){
        $('.lightbox_trigger').removeAttr('class', 'this');
        $('.lightbox_trigger').removeAttr('class', 'remove');

        $('#lightbox').hide();

 });



});
于 2013-03-20T00:32:11.927 に答える
0

私は次のようなことを言うだろう

$('.lightbox_trigger').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();

    $('#lightbox').show('slow');

    var image_href = $(this).attr("href");

    var image_href2 = $(this).parent().next('li').children('a').attr("href");


   $('#gallery_content').html('<img src="' + image_href + '" />' + 
   '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
   '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
   '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');
});
//next
    $('#gallery_next').live('click', function(){
         $('#gallery_content').html('<img src="' + image_href2 + '" />' +
         '<div id="gallery_close"> <img src="img/gallery/lightbox/close.png"/> </div>' + 
         '<div id="gallery_next"> <img src="img/gallery/lightbox/next.png"/> </div>'+
         '<div id="gallery_prev"> <img src="img/gallery/lightbox/previous.png"/> </div>');
    });
// prev
    $('#gallery_prev').live('click', function() { ... });
于 2013-03-18T15:55:33.043 に答える
0

JavaScriptエラーコンソールを確認しましたか? エラーがトリガーされた場合、スクリプトは実行を停止します。これが、何かが 1 回だけ起動する一般的な理由です。その上、そのdiv内にhtml全体を入れずに、画像のsrcのみを置き換えます。

于 2013-03-18T16:06:16.927 に答える