Question

我这里有这个页面/ 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 colorbox打开了，但是在colorbox中它说我有4张图片，当我只有3张时，我想我的问题是如何让colorbox忽略大图像，但仍然有工作的链接......是我在找什么？

缩略图代码：

<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

据我记得使用Colorbox时，它只能识别附加了cboxElement - 类的图像。由于您似乎已经有一个更改大图像源的函数，如何从单击的缩略图中删除类cboxElement，并将其附加到其他两个图像？可能值得一试。

Answer 2

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

Answer 3

你在彩盒组中得到了4个元素--3个大拇指+ 1个主要图像 - 因为你们通过给所有人cboxElement类来告诉彩盒。当您需要默认设置时（例如，没有外部导航的标准图像库），该类很棒。

但是，您需要为您的情况设置一些不那么“默认”的东西。我建议您使用主图像作为colorbox的触发器，并在JS中设置颜色框图像（不含cboxElement）。策略是这样的：

将所有拇指img初始化为彩色组。
点击拇指时，相应的拇指img的ID存储在主图像链接中
点击主图片时，打开彩盒组，从存储的ID开始

以下是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;
});

这是您最有可能想要自定义的部分。至少，拇指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，我们打开该图像的颜色框组。

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

如何从另一个图像打开彩色到特定图像？

3 个答案: