0

http://opiefoto.com/articles/photosliderの非常に優れた PhotoSlider スクリプトを使用して、クライアントの 1 人のために画像のスライド ショーを作成しています。

このスクリプトは、大きな画像をクリックしてクリックした画像のフルサイズ バージョンを表示するライトボックス モーダル ポップアップを可能にする、以前の手作業でコード化された Javascript ソリューションを置き換えます。

もちろん、クライアントはこの機能がそのまま維持されることを主張しますが、大きな画像の HTML コードは PhotoSlider スクリプト自体によってオンザフライで生成されます。

これは、スクリプトを少し変更して、クラス (「ライトボックス」) と href (または単にクリック イベントのいずれか適切な方) をアタッチする必要があることを意味しますが、これを達成する最善の方法がよくわかりません。サムネイルがクリックされるたびにイベントとクラスを添付する必要があると思いますが、これが最善の方法ではない場合は、アドバイスをいただければ幸いです。

スクリプトは、クリックやクラスなしで、ここで見られるように私のページに実装されています。stackoverflowites が提供できる支援を本当に感謝します。

前もって感謝します！

4

4 に答える 4

2

jquery live()メソッドを見てみましょう。これにより、現在または将来存在するセレクターにイベントをアタッチできます。事実上、次のようなことができます (photoslider サイトの例に基づく):

$(document).ready(function() { 
  $('.photoslider_main img').live('click', function() {
    $(this).showLightbox();
  });
});
于 2010-04-06T14:23:44.353 に答える
1

clickサムネイルをクリックして新しい画像が表示されたら、jQuery の を使用して新しい画像にイベントを添付できますbind。後で削除する必要がある場合は、 を使用できますunbind。

于 2010-04-06T14:04:00.020 に答える
1

スクリプトが HTML コードの生成を完了するのを待ってから、好みに合わせて変更します。PhotoSlider は HTML を 1 回生成するため、クリックするたびに変更する必要はありません。

于 2010-04-06T14:05:56.943 に答える
0

変数「src」が未定義になる完全なコードを次に示します-理由はわかりません。

<div class="photoslider" id="default"></div>

<script type="text/javascript">
$(document).ready(function(){
    //change the 'baseURL' to reflect the host and or path to your images
    FOTO.Slider.baseURL = '';

    //set images by filling our bucket directly
    FOTO.Slider.bucket = {
        'default': {
            <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>,
            1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>,
            2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>,
            3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>,
            4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %>
        }
    };
    FOTO.Slider.reload('default');  
    FOTO.Slider.preloadImages('default');  
    FOTO.Slider.enableSlideshow('default');  

    //or set our images by the bucket importer
    //var ids = new Array(0,1,2,3);
    //FOTO.Slider.importBucketFromIds('default',ids);


    console.log($('.photoslider_main img'));
    var src = $(".photoslider_main img").attr("src");
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox'));

    $('a.lightbox').lightBox();

 // $('.photoslider_main img').live('click', function() {
 //   $(this).showLightbox();
 // });
});



</script>
于 2010-04-06T22:06:11.270 に答える