multiple sliders second slider doesn't activate
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>
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
Support Staff 1 Posted by Dmitry Semenov on 21 Aug, 2012 01:08 PM
Hi,
Hope that helps...
Dmitry
2 Posted by pkloss on 21 Aug, 2012 01:19 PM
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.
Support Staff 3 Posted by Dmitry Semenov on 21 Aug, 2012 01:34 PM
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
Dmitry Semenov closed this discussion on 21 Aug, 2012 01:34 PM.