0

そのコードにクリック時のアクションを追加する方法がわかりません。問題は、600 枚以上の写真を含むページを作成する必要があり、ページの読み込み時に非常に重いことです。だから私は写真のグループごとに、クリックするだけでロードしたいタブを用意しました。コードには、私の問題を表示するタブが 1 つだけあります。関数：

$(document).ready(function(){
        jQuery('#mycarousel-1, #mycarousel-2, #mycarousel-3, #mycarousel-4, #mycarousel-5, #mycarousel-6, #mycarousel-7').jcarousel({
            horisontal: true,
            wrap:'circular',
            scroll:1,
            easing:'easeInOutBack',
            animation:1200
        });

メニュー：

<section id="content">
    <div class="page3-row1 pad-2 tabs">
        <div class="col-8">
            <h2 class="h2 p2">Categorie:</h2>
            <div class="demo-container clear">
            <ul class="list-1 nav">
                <li><a href="#tab-1-modern">Modern Design</a></li>
            </ul>
        </div>
   </div>

コード：

<div class="col-9">
     <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo">
        <div class="inner">
            <ul id="mycarousel-1" class="jcarousel-skin-tango">
                <li><a class="plus"     href="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"     href="images/modern-002-big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"     href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"     href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"     href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"     href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"     href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"     href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"     href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"     href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
                        <li><a class="plus"     href="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"     href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"     href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"     href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

上記のコードには写真も含まれています。

4

1 に答える 1

0

あなたがこれまでに与えてくれたものを考えると、これが私にできる最善のことです...

$('#mycarousel-1 li').click(function() {
  // code here to load the images...
});

[編集]

    <div class="col-9">
     <h3 class="h3-2">Design's:</h3> 
    <div id="tab-1-modern" class="tab-content gallery-photo">
        <div class="inner">
            <ul id="mycarousel-1" class="jcarousel-skin-tango">
                <li><a class="plus" thishref="images/modern-001-big_b.jpg"><img src="images/modern-001_b.jpg" alt=""></a><a class="plus"     href="images/modern-002-    big_b.jpg"><img src="images/modern-002_b.jpg" alt=""></a><a class="plus"     href="images/modern-003-big_b.jpg"><img src="images/modern-003_b.jpg" alt=""></a><a class="plus"     href="images/modern-004-big_b.jpg"><img src="images/modern-004_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-005-big_b.jpg"><img src="images/modern-005_b.jpg" alt=""></a><a class="plus"     href="images/modern-006-big_b.jpg"><img src="images/modern-006_b.jpg" alt=""></a><a class="plus"     href="images/modern-007-big_b.jpg"><img src="images/modern-007_b.jpg" alt=""></a><a class="plus"     href="images/modern-008-big_b.jpg"><img src="images/modern-008_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-009-big_b.jpg"><img src="images/modern-009_b.jpg" alt=""></a><a class="plus"     href="images/modern-010-big_b.jpg"><img src="images/modern-010_b.jpg" alt=""></a><a class="plus"     href="images/modern-011-big_b.jpg"><img src="images/modern-011_b.jpg" alt=""></a><a class="plus"     href="images/modern-012-big_b.jpg"><img src="images/modern-012_b.jpg" alt=""></a></li>
                <li><a class="plus" thishref="images/modern-013-big_b.jpg"><img src="images/modern-013_b.jpg" alt=""></a><a class="plus"     href="images/modern-014-big_b.jpg"><img src="images/modern-014_b.jpg" alt=""></a><a class="plus"     href="images/modern-015-big_b.jpg"><img src="images/modern-015_b.jpg" alt=""></a><a class="plus"     href="images/modern-016-big_b.jpg"><img src="images/modern-016_b.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

次のようにスクリプトを作成します。

$('#mycarousel-1 a').click(function() {
  // this loads each image the same, but you can use the same technique to
  // load the correct images for each image
  var imgurl = $(this).attr('thishref');
  $(this).find('img').each(function() {
      $(this).attr('src',imgurl);
  });
});

[/編集]

于 2012-10-23T15:37:51.883 に答える