Question

I’ve hit a wall and need some guidance getting this to work. I preface this with I’m a noob with jQuery and any way that I can write what I have already written better, or more streamlined is certainly welcome.

Currently I have 2 sliders on the page. Each image has a unique class. When the user clicks on the image slider the image slides in and the class “activeSlide” is added to it. What I would like to have happen is when the user clicks a slider and an image loads that matches another image, an alert pops up. There will be different image combinations that will trigger the popup, and if no matches, nothing happens.

Currently with the below code it works, though fires the alert after the images match and the user clicks the slider again. The ideal would be that the user click an image slider, the new image loads, and if it’s a match will call the event handler to have the alert pop up.

Here is my HTML:

<div id="top" class="Slider">
    <img class="rsImg" src="images/tShirtRed.png" alt="tShirtRed" />
    <img class="rsImg" src="images/tShirtGreen.png" alt="tShirtGreen" />
    <img class="rsImg" src="images/tShirtRed.png" alt="tShirtRed" />
</div>


<div id="bottom" class="Slider">
    <img class="classBottom1" src="images/image5.png" alt="" />
    <img class="classBottom2" src="images/image6.png" alt="" />
    <img class="classBottom3" src="images/image6.png" alt="" />
</div>

Here is my jQuery:

var sliderInstance = $("#chest").data('royalSlider');

    sliderInstance.ev.on('rsAfterSlideChange', function() {
            if (($('#chest .rsActiveSlide img').attr('alt') == 'tShirtGreen') && ($('#legs .rsActiveSlide img').attr('alt') == 'jeansGreen')) {
            alert('Your message');
            } else {
            //Do nothing
            }
    });

My Dev environment is here: http://beingproperties.com/match-game/

Thank you in advance and appreciate any input. Cheers
-Chris

Answer 1

Figured it out with some help from the developer at RoyalSlider :Royal Slider

The jQuery needed to be after the slider initialization and within the document.ready() function.

I also needed to rearrange the function I was trying to call as well. See above for the fixed code.

Thanks again to Dmitry at RoyalSlider!
-Chris