Jquery waterwheel carousel with overlay trigger on center image

Question

I'm using a jquery waterwheel plugin and am trying to get the center image (only) to pop an overlay on click. I can get the overlay to appear when any element is click, but not just the center image.

Here's my code:

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

            clickedCenter: function($clickedItem) {

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

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

</script>

Can anyone spot any obvious errors here?

Thanks in advance.

Answer 1

You are using rather general jQuery selector for this:

$('img[rel]')

Probably all of your images have "rel" attribute and that's why the modal opens on any image click. To choose a specific image to trigger your modal you need a specific selector, like - for example - id:

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

and then change your current selector to:

$('img#center')