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 colorbox 打开时，但是在颜色框中它说我只有 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

使用 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 回答
1

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

于 2012-09-05T19:58:11.680 回答
0

您在 colorbox 组中获得了 4 个元素 - 3 个拇指 + 1 个主图像 - 因为您通过给所有这些类来告诉 colorbox 这样做cboxElement。当您需要默认设置（例如，没有外部导航的标准图像库）时，该类非常有用。

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

  1. 将所有 thumb 初始化img为一个颜色框组。
  2. 单击 thumb 时，对应 thumbimg的 id 存储在主图像链接中
  3. 单击主图像时，打开颜色框组，从存储的 id 开始

这是 JS：

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

在这里，我们设置了颜色框组。请注意，我们使用的是获取拇指图像的类，而不是您周围的链接。而且严格来说，你不需要使用类来拉它们，只要你方便就行。

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

使用我们存储在 中的 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 回答