jquery - 如何从另一张图像打开特定图像的颜色框？

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

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