在中心图像上带有叠加触发器的 Jquery 水车轮播

Question

我正在使用 jquery waterwheel 插件，并试图让中心图像(仅)在点击时弹出叠加层。我可以在单击任何元素时显示叠加层，而不仅仅是中心图像。

这是我的代码:

 <script type="text/javascript">
    $(document).ready(function() {
       $("#carousel").waterwheelCarousel({

            clickedCenter: function($clickedItem) {

            $('img[rel]').overlay({

            mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.9
            }    
            });
            }
        });
     });

</script>

谁能在这里发现任何明显的错误？

提前致谢。

Answer 1

您为此使用了相当通用的 jQuery 选择器:

$('img[rel]')

可能您的所有图像都具有“rel”属性，这就是为什么点击任何图像都会打开模态框的原因。要选择一个特定的图像来触发你的模式，你需要一个特定的选择器，比如 - 例如 - id:

<div rel="carousel">
<div rel="carousel" id="center">
<div rel="carousel">

然后将您当前的选择器更改为:

$('img#center')