Multiple sliders per page, video "stop on next slide" functionality only working in first slider

[kknights]

Hi,

I have a rather long single page site that has multiple slider instances (6, to be told). Using YouTube's iframe embed I have videos in two of the instances, however the video controls (ie video stops playing when the next slide is selected) only works on the first slider.

I've tested to ensure that the controls function when the videos are in the same slider, no problems at all.

Because of the multiple instances, I've changed #anythingSlider to .anythingSlider; I've gone through both jquery.anythingslider.video.js and jquery.anythingslider.js but don't see any where I could have missed switching this.

Does anyone have any ideas on how to get this functioning? Is there an option I am overlooking, or a setting I need to add? So far I have simply added the .video.js file and not added anything to overwrite the defaults.

Thanks in advance,
Kk

[Mottie]

Hi @kknights!

Can you please share the code you are using to initialize the multiple sliders. Also, are you using the latest version?

[kknights]

Hi

Thanks for replying so quickly! Im somewhat new to jquery, and have been customising this slider to within an inch of its life to meet client requests. Im hoping this is enough; my scripts.js is rather long.

$(function(){

    $('.slider').anythingSlider({
        infiniteSlides: false,
        stopAtEnd: true     
    });

    $('.slider').anythingSlider();
        $('.slider').data('AnythingSlider').makeActive();
            enableKeyboard: true;
   });

[Mottie]

Hmm, what are you trying to do with the makeActive and enableKeyboard part? The enableKeyboard is not attached to anything and is probably causing a javascript error.

[kknights]

To allow the user to use keyboard controls to navigate the slider. It's not a client showstopper, so will try removing and see if it helps.

Thanks =)

[Mottie]

It's already enabled by default :)

[kknights]

Removed it and still no dice, but at least now my js is a wee bit leaner!

I checked out the code in the console, and am receiving this error:

---

Unsafe JavaScript attempt to access frame with URL file:///Users/xxxxx/xxxxxx/_Clients/TLH/_dev/index.html from frame with URL http://www.youtube.com/embed/xxxxxxxxxxx?&wmode=opaque&iv_load_policy=3&enablejsapi=1&playerapiid=asvideo0. The frame requesting access has a protocol of 'http', the frame being accessed has a protocol of 'file'. Protocols must match

---

Any thoughts? I appreciate your help, as Im very stumped!

[Mottie]

In the latest version, you'll need to initialize the video extension, try something like this:

$(function(){
  $('#slider')
    .anythingSlider({
      infiniteSlides: false,
      stopAtEnd : true
    })
    // initialize the video extension, as desired (new v1.9)
    .anythingSliderVideo();
});

That iframe access error always seems to pop up, don't worry about it.

[kknights]

Thanks so very much! I had tried using the latest version but was having errors with it, so reverted to using 1.8.16/video 1.3.1. Will give it another go in the morning and see if a fresh pair of eyes will see what's keeping this from working.

Thanks again for your help!

[kknights]

Ive updated the anythingSlider.js to 1.9.1, however when I update anythingSlider.video.js to 1.5 (and added in the initialization) but it completely breaks the functionality of the sliders. Clicking the arrows now reloads the page, no sliding happens.

I think that because the sliders have been heavily modified to accomodate client requests, there is something in that code that is conflicting with the updated video.js.

I hate to ask, but if you (or anyone else with stronger codefu chops than i) can take a look at this, maybe you can see a potential pitfall? I know it's a longshot, and again, am beyond appreciative of the time spent trying to help me out, but Im running out of ideas:

---

$(function(){

$('.slider')
    .anythingSlider({
        infiniteSlides: false,
        stopAtEnd : true,
    buildNavigation: false    
    })
    // initialize the video extension, as desired (new v1.9)
    .anythingSliderVideo();


 $('.slider')
    .anythingSlider({
        // If true, builds a list of anchor links to link to each panel
        onInitialized: function(e, slider) {
            updateNav(slider.currentPage-1);
        },      
        // Callback before slide animates
        onSlideBegin: function(e, slider) {
            updateNav(slider.targetPage-1);
        }
    });

    //  Allows for external links (ie the slider h3 graphic)     
    var nav = $('h3 a, .sliderNav a'),
    updateNav = function(page){
        nav
            .removeClass('cur')
            .eq(page).addClass('cur');
    }
    nav.click(function(){
                    var parent_div = $(this).closest(".wrapper");
                    var slide = $(this).attr('href').substring(1);
                    parent_div.find(".slider").anythingSlider(slide);
                    return false;
    });


    // set current state for text links
    $('.sliderNav a').click(function(){
        addRemoveClass();
            $(this).addClass("cur"); 
       });

        function addRemoveClass(){
            $('.sliderNav a.cur').removeClass();
        }
 });

[Mottie]

Try this... I didn't have all of the HTML, so I'm not sure if that part works (demo)

[kknights]

Hi!

Thanks for tightening up that js, however it's still jumping to the top of the page when I use the updated video.js file. I've created a few jsfiddles of my own, and it works great when there is a single slider on the page. It's when there are multiples that the problem happens: clicking the arrow reloads the page. (ps: Ignore the arrow styles).

Single
Multiple

Thanks again!

[Mottie]

Alright! That was a bug that I just fixed. Thanks for the demos, it helped a lot! :)

Here is an updated multiple demo using the new video extension.

[kknights]

Amazing and hallelujah! Will update the file and implement. Will let you know how it goes =) Thanks!!

[kknights]

Works like a charm! Not only is the page not reloading onClick, but the multiple instances of videos now work as they should. Thank you so very much for all your help with this, I cant tell you how much I appreciate it.