如何将colorbox打开到另一图像中的特定图像？

Question

我在这里有这个页面/products- page /ring/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 colorbox打开时，但是在色彩框中显示我有4张图片，而我只有3张图片，我想我的问题是如何让colorbox忽略大图片，但仍然有到我正在寻找的work....is的链接？

缩略图代码：

<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>中

任何帮助都是很棒的！

Answer 1

使用Jquery...this将起作用...

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');
});
}); 

Answer 2

就我所记得的使用Colorbox时，它只能识别附加了cboxElement-class的图像。既然您似乎已经有了一个函数来更改大图像的源，那么从单击的缩略图中删除cboxElement类并将其附加到其他两个图像上如何？也许值得一试。

Answer 3

你在colorbox组中得到了4个元素-3个拇指+1个主图像-因为你通过给它们所有的cboxElement类来告诉colorbox这样做。当你需要默认设置(例如，一个没有外部导航的标准图片库)时，这个类非常棒。

然而，你需要为你的情况设置一些不那么“默认”的东西。我建议您使用主图像作为colorbox的触发器，并在JS中设置colorbox图像(不使用cboxElement)。策略是这样的：

1. 将所有的thumb img初始化成一个colorbox组。
2. 当点击一个thumb时，对应的thumb img的id会存储在主图像链接
3. 中当点击main image时，打开colorbox组，从保存的id开始<

>G211

这就是JS：

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

在这里我们设置了colorbox组。请注意，我们使用的类获取拇指的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;
});

这是您最可能想要定制的部分。至少，thumb img id需要存储在主图像链接中。

//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;
});

使用我们存储在data-thumb中的id，我们打开该图像的colorbox组。

您还需要对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 here。