2

私はここにこのページを持っています/products-page/ rings / product-1-2 /

ご覧のとおり、1つの大きな画像と3つのサムネイルがあります

小さい画像のいずれかをクリックすると、大きい画像が置き換えられます。

ビッグイメージコード：

<a class="preview_link cboxElement" style="text-decoration:none;" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring">
<img id="product_image_736" class="product_image colorbox-736" width="400" src="/wp-content/uploads/2012/07/DSC_0118.jpg" title="Teardrop Druzy Amethyst Ring" alt="Teardrop Druzy Amethyst Ring">
<br>
<div style="text-align:center; color:#F39B91;">Click To Enlarge</div>
</a>

大きな画像をクリックするとjqueryカラーボックスが開きますが、カラーボックスには3つしかないのに4つの画像があると表示されますが、私の質問は、カラーボックスに大きな画像を無視させる方法ですが、仕事....それは私が探しているものですか？

サムネイルコード：

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg">
</a>
<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg">
</a>
<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg">
</a>
</div>

すべてが包まれています<div class="imagecol"> </div>

どんな助けでも素晴らしいでしょう！

4

3 に答える 3

1

Colorboxを使用したことを覚えている限り、-classが付加された画像のみを認識しますcboxElement。すでに大きな画像のソースを変更する機能があるようですのでcboxElement、クリックしたサムネイルからクラスを削除して、他の2つの画像に添付してみてはいかがでしょうか。試してみる価値があるかもしれません。

于 2012-09-05T19:58:11.680 に答える
1

Jqueryを使用してください...これは機能します...

jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
jQuery(".wpcart_gallery img").click(function($){
jQuery(".wpcart_gallery a").addClass('cboxElement');
jQuery(this).closest('a').removeClass('cboxElement');
});
});
于 2012-09-20T05:46:47.567 に答える
0

カラーボックスグループに4つの要素（3つの親指+1つのメイン画像）を取得しています。これは、すべての要素にcboxElementクラスを与えることで、カラーボックスにそうするように指示しているためです。このクラスは、デフォルトの設定が必要な場合に最適です（たとえば、外部ナビゲーションのない標準の画像ギャラリー）。

ただし、状況に応じて「デフォルト」ではないものを設定する必要があります。メイン画像をカラーボックスのトリガーとして使用し、JSでカラーボックス画像を設定することをお勧めします（なしcboxElement）。戦略は次のようになります。

  1. すべてのサムimgをカラーボックスグループに初期化します。
  2. 親指をクリックすると、対応する親指imgのIDがメイン画像リンクに保存されます
  3. メイン画像をクリックするときは、保存されているIDから始めてカラーボックスグループを開きます

そのためのJSは次のとおりです。

//STEP 1: initialize colorbox group
$(".attachment-gold-thumbnails").colorbox({
    rel: "myGroup"
    //other options...
});

ここでは、カラーボックスグループを設定します。親指の周りにあるリンクではなく、親指のimgを取得するクラスを使用していることに注意してください。厳密に言えば、クラスを使用してそれらをプルする必要はありません。都合のよいものは何でもかまいません。

//Each thumb updates main image 
$(".wpcart_gallery a").click(function() {
    var thumb_img_link = $(this),
        thumb_img = thumb_img_link.children().first(),
        product_image = $("#product_image_736"),
        product_image_link = product_image.parent();

    //STEP 2: update "data-thumb" attribute
    product_image_link.attr("data-thumb", "#" + thumb_img.attr("id"));

    product_image.attr({
        src: thumb_img.attr("href"),
        alt: thumb_img.attr("src"),
        title: thumb_img.attr("src")
    });

    return false;
});

これは、おそらくカスタマイズしたい部分です。少なくとも、thumbimgidはメインの画像リンクに保存する必要があります。

//Main image opens colorbox
$(".preview_link").click(function() {
    var thumb_img_id = $(this).attr("data-thumb");

    //STEP 3
    $(thumb_img_id).colorbox({open:true});

    return false;
});

保存したIDを使用して、data-thumbその画像のカラーボックスグループを開きます。

また、HTMLに小さな変更を加える必要があります。

<!-- Change 1: add data-thumb -->
<a class="preview_link" data-thumb="#thumb1" ...>
    ...
</a>

<div class="wpcart_gallery">
    <a class="thickbox" ... >
        <!-- 
        Change 2: Give the img an id so we can reference it
        Change 3: Instead of the "rev" attribute, colorbox will 
        read the "href" attribute in the img tag -->
        <img id="thumb1" href="http://images.picturesdepot.com/photo/s/scenery_wallpaper,_wallpaper-209423.jpg" ... >
    </a>
</div>

ここでjsfiddleをチェックしてください

于 2012-09-06T19:43:37.440 に答える