JS conflict with Royal Slider Wordpress

Question

I'm using quicksand to filter categories and Superbox ( http://toddmotto.com/labs/superbox/ ) to show a gallery based off of the premium plugin Royal Slider in a dropdown.

http://bvh.delineamultimedia.com/?page_id=2

There seems to be an issue with the Royal Slider around the _animateTo:function in this file... http://bvh.delineamultimedia.com/wp-content/plugins/new-royalslider/lib/royalslider/jquery.royalslider.js?ver=3.0.93 around line 1825. That is causing the slider to not work properly when inside of the Superbox dropdown feature. When I click the next button on the Royal Slider it doesn't seem to want to go to the next image until I close the Superbox and open it again. Then is when the next image appears.

On this page... http://bvh.delineamultimedia.com/?page_id=13 I don't seem to have an issue with the Royal Slider which is why I believe there is a conflict with the Superbox and Royal Sliders javascript. Also, on this page... http://bvh.delineamultimedia.com/?page_id=12 Superbox works fine with static images perfectly.

I'd like to somehow state "if there is a gallery show it - else show the static image" in the same place.

I also feel like my code that I've altered here. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js Isn't the best since I'm guessing a bit here and there to get this to work.

I've been trying to learn how to debug JS but to be honest am a bit lost. The reason I think the issue is happening around _animateTo:funtion is because console isn't firing around _stopAnimation. Could anyone lend a hand on why this is happening and a good way to debug this problem. I feel a bit overwhelmed at the moment.

To see the issue: to go http://bvh.delineamultimedia.com/?page_id=2 and click on the first image, there will be a dropdown where you will see the gallery. If you click the next arrow it does NOT go to the next image. IF you close the Superbox dropdown and reclick on the first image to see the Superbox dropdown, you will see the image move to the next image, but only after you close and re-open superbox after you click the next arrow.

I hope that makes sense. Thanks so much!

Answer 1

I checked out the code in your Superbox.js . The problem is that you were cloning the element instead of appending it. In this case, the Royal Slider. This line is the culprit, it creates two different "sliders". Which only one was working, though it was hidden.

if (sliderData.length > 0) { // show the slider if there is one
    superbox.append(sliderData.clone(true)); 

}

Just remove the .clone() method and it should be fine.

To fix the element from disappearing during the closing callback. Replace this line here:

superbox.find('.royalSlider').remove(); // remove the slider from previous events

to this one:

superbox.find('.royalSlider').appendTo($(this));

So in summary, all this does is move the slider from your list-item element into the Superbox when its triggered, and puts it back when its closed.