multiple sliders second slider doesn't activate

pkloss's Avatar

pkloss

21 Aug, 2012 12:43 PM

I'm trying to have two sliders on a page, the first one works but the second one will not activate, I'm not sure why. The nebula_slide_TOTAL is contained in the portfolio_slide_TOTAL. The page is at this url: http://www.klossal.com/portfolio/index_organize3.html#portfolio-2 and the script set up is:

<script>            
jQuery(document).ready(function($) {               
    var portfolio_slide_TOTAL = $('#portfolio_slide_TOTAL').royalSlider({
        captionShowEffects: ["moveleft", "fade"],
        directionNavAutoHide: false,
        autoScaleSlider: false,
        imageScaleMode: "fit", // Scale mode of all images. Can be "fill", "fit" or "none"
        imageAlignCenter: true,
        navigateByClick: false,
        keyboardNavEnabled: true,
        controlNavThumbs: true,
        directionNavEnabled: true,
        startSlideId: 1,
        deeplinking: {
            // fullscreen options go gere
            enabled: true,
            prefix: 'portfolio-'
        },
        afterSlideChange: function () {
            xx = this.currSlideId;
            $('#thumb_scroll li').removeClass('library_thumb_active');
            $('#thumb_scroll li').eq(xx).addClass('library_thumb_active');
        },
    }).data('royalSlider');             


    var nebula_slide_TOTAL = $('#nebula_slide_TOTAL').royalSlider({
        keyboardNavEnabled: false,
        arrowsNav: false,
        sliderTouch: false,
        sliderDrag: false,
        imageAlignCenter: true,
        controlNavigation: 'bullets'
    }).data('royalSlider');

    $("#space1_IMAGE").click(function() {
        nebula_slide_TOTAL.goTo(0);
        $('#space2_BORDER').fadeToggle("slow", "linear");
        $('#space1_BORDER').fadeToggle("slow", "linear");
    });

    $("#space2_IMAGE").click(function() {
        nebula_slide_TOTAL.goTo(1);
        $('#space2_BORDER').fadeToggle("slow", "linear");
        $('#space1_BORDER').fadeToggle("slow", "linear");
    });


    });
</script>
  1. Support Staff 1 Posted by Dmitry Semenov on 21 Aug, 2012 01:08 PM

    Dmitry Semenov's Avatar

    Hi,

    1. Nested sliders are not supported yet and may behave incorrectly sometimes, because of touch navigation conflicts.
    2. You should initialize slider that is inside first. As slides are created asynchronously with delay and element that is inside may not be available instantly.
    3. You have too much sliders, use simpler approach. It's extremely hard to do that you're trying to do without any framework.
    4. Don't use images in slider that weight 3MB http://www.klossal.com/portfolio/space_2_header.png

    Hope that helps...

    Dmitry

  2. 2 Posted by pkloss on 21 Aug, 2012 01:19 PM

    pkloss's Avatar

    that worked with the nesting, and I'll make the image size smaller.

    What do you mean by a framework? Right now the way I have it set up is www.klossal.com/portfolio and I have it so the content loads in to slides as they appear to make it the page less memory. It seems to work fine on a computer but it was a little sluggish on mobile devices.

  3. Support Staff 3 Posted by Dmitry Semenov on 21 Aug, 2012 01:34 PM

    Dmitry Semenov's Avatar

    If you want everything to be dynamically loaded - jQuery Mobile, Sencha, Kendo UI....

    Or just use simple HTML pages for each project, SEO guy will like it and you'll get rid of all these issues.

    Dmitry

  4. Dmitry Semenov closed this discussion on 21 Aug, 2012 01:34 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac