I have a slider in jQuery and i would like it to auto rotate every three seconds. I can get it to work for when it is clicked or point on the slides are clicke it rotates but i can't get it to auto rotate.
I tried adding
setInterval(function(){
$('.nextSlide').click()
},3000)
Here is my jQqery code that controls the change of slide:
nextSlide : function(){
if (dcs.currentSlideIndex>=dcs.slideCount-1 || inAnimation){
return false
}
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
dcs.currentSlideIndex++;
if (dcs.currentSlideIndex+1==dcs.slideCount)
dcs.nextButton.fadeOut();
dcs.prevButton.fadeIn();
self.changeSlide(dcs.currentSlideIndex);
},
prevSlide : function(){
if (dcs.currentSlideIndex<=0 || inAnimation){
return false
}
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
dcs.currentSlideIndex--;
if (dcs.currentSlideIndex==0){
//hide the nexr arrow
dcs.prevButton.fadeOut();
}
dcs.nextButton.fadeIn();
self.changeSlide(dcs.currentSlideIndex);
},
gotoSlide:function(sIndex){
var self=this,
cHeight=dcs.carouselHeight;
inAnimation=true;
self.changeSlide(sIndex);
},
changeSlide:function(sIndex){
var self=this,
cHeight=dcs.carouselHeight;
self.$elem.trigger('start-change');
self.updateCounter(dcs.currentSlideIndex);
(new TimelineLite({onComplete:function(){
inAnimation=false;
self.$elem.trigger('end-change');
}
}))
.to(dcs.rightWrapper,dcs.rightSideDuration,{y:-dcs.rightDirectionSign*sIndex*cHeight,ease:Power4.easeOut})
.to(dcs.leftWrapper,dcs.leftSideDuration,{y:-dcs.leftDirectionSign*sIndex*cHeight,ease:Power4.easeOut},'-='+dcs.rightSideDuration);
},
updateCounter : function(currentSlideIndex){
dcs.counterCurrent.html(currentSlideIndex+1);
},
bindUIActions: function(){
var self = this;
dcs.nextButton.on('click',function(){
self.nextSlide();
})
dcs.prevButton.on('click',function(){
self.prevSlide();
})
$(window).on('resize',function(){
self.update();
});
if (dcs.mouse){
self.scrollControll();
}
if (dcs.keyboard){
self.keyboardControll();
}
if (dcs.touchSwipe){
self.touchControll();
}
if (dcs.bulletControll){
self.bulletControll();
}
},
scrollControll:function(){
var self=this;
self.$elem.on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
self.nextSlide();
} else {
self.prevSlide();
}
});
},
keyboardControll:function(){
var self=this;
$(document).keydown(function(e) {
switch(e.which) {
case 38: // up
self.prevSlide();
break;
case 40: // down
self.nextSlide();
break;
default: return;
}
e.preventDefault();
});
},
touchControll:function(){
var self=this;
self.$elem.swipe({
swipe:function(event, direction, distance) {
if (direction=='down'){
self.nextSlide();
}else if (direction=='up'){
self.prevSlide();
}
}
});
},
Related
I am working on this demo. Why is click on event causing to jump to odd numbers instead of incrementing one by one?
$(function() {
var action;
$(".number-spinner button").mousedown(function () {
btn = $(this);
input = btn.closest('.number-spinner').find('input');
btn.closest('.number-spinner').find('button').prop("disabled", false);
if (btn.attr('data-dir') == 'up') {
action = setInterval(function(){
if ( input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max')) ) {
input.val(parseInt(input.val())+1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
} else {
action = setInterval(function(){
if ( input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min')) ) {
input.val(parseInt(input.val())-1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
}
}).mouseup(function(){
clearInterval(action);
});
});
I have a pop-up for a website that asks the user to sign up if they aren't already signed in. I'm using a script called "subscribe-better.js" (https://github.com/peachananr/subscribe-better) and this works great for loading the popup when the user first enters the site.
However, I want this pop-up to show when a user clicks a button. This is my button:
<div id="popClick" class="button btn">Sign Up to Proceed</div>
and here is how I am calling the pop-up:
<script>
$(document).ready(function() {
$(".subscribe-me2").subscribeBetter({
trigger: "onclick",
animation: "fade",
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
});
});
</script>
<div class="subscribe-me2">
Sample Pop Up Content Here
</div>
And the code to make it pop-up. You'll see I've added the case for onclick but nothing is happening when I click my button. I also tried instead of document.ready() to call the pop-up within a $('#popClick').click() but that didn't make the pop-up appear either. How can I fix the switch statement to make the pop-up appear when the #popClick button is clicked?
!function($){
var defaults = {
trigger: "atendpage", // atendpage | onload | onidle
animation: "fade", // fade | flyInRight | flyInLeft | flyInUp | flyInDown
delay: 0,
showOnce: true,
autoClose: false,
scrollableModal: false
};
$.fn.subscribeBetter = function(options){
var settings = $.extend({}, defaults, options),
el = $(this),
shown = false,
animating = false;
el.addClass("sb");
$.fn.openWindow = function() {
var el = $(this);
if(el.is(":hidden") && shown == false && animating == false) {
animating = true;
setTimeout(function() {
if (settings.scrollableModal == true) {
if($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div><div class='sb sb-withoverlay'>" + $(".sb").html() + "</div></div>");
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb.sb-withoverlay").closeWindow();
return false;
});
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
setTimeout(function(){
$(".sb.sb-withoverlay").show();
$("body").addClass("sb-open sb-open-with-overlay");
}, 300);
}
} else {
if ($(".sb-overlay").length < 1) {
$("body").append("<div class='sb-overlay'><div class='sb-close-backdrop'></div></div>");
$(".sb").removeClass("sb-animation-" + settings.animation.replace('In', 'Out')).addClass("sb-animation-" + settings.animation);
$(".sb-close-backdrop, .sb-close-btn").one("click", function() {
$(".sb").closeWindow();
return false;
});
setTimeout(function(){
$(".sb").show();
$("body").addClass("sb-open");
}, 300);
}
}
if (settings.showOnce == true) shown = true;
animating = false;
}, settings.delay);
}
}
$.fn.closeWindow = function() {
var el = $(this);
if(el.is(":visible") && animating == false) {
animating = true;
if (settings.scrollableModal == true) {
$(".sb.sb-withoverlay").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb.sb-withoverlay").hide();
$("body").removeClass("sb-open sb-open-with-overlay");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
} else {
$(".sb").removeClass("sb-animation-" + settings.animation).addClass("sb-animation-" + settings.animation.replace('In', 'Out'));
setTimeout(function(){
$(".sb").hide();
$("body").removeClass("sb-open");
setTimeout(function() {
$(".sb-overlay").remove();
}, 300);
}, 300);
}
animating = false;
}
}
$.fn.scrollDetection = function (trigger, onDone) {
var t, l = (new Date()).getTime();
$(window).scroll(function(){
var now = (new Date()).getTime();
if(now - l > 400){
$(this).trigger('scrollStart');
l = now;
}
clearTimeout(t);
t = setTimeout(function(){
$(window).trigger('scrollEnd');
}, 300);
});
if (trigger == "scrollStart") {
$(window).bind('scrollStart', function(){
$(window).unbind('scrollEnd');
onDone();
});
}
if (trigger == "scrollEnd") {
$(window).bind('scrollEnd', function(){
$(window).unbind('scrollStart');
onDone();
});
}
}
switch(settings.trigger) {
case "atendpage":
$(window).scroll(function(){
var yPos = $(window).scrollTop();
if (yPos >= ($(document).height() - $(window).height()) ) {
el.openWindow();
} else {
if (yPos + 300 < ($(document).height() - $(window).height()) ) {
if(settings.autoClose == true) {
el.closeWindow();
}
}
}
});
break;
case "onload":
$(window).load(function(){
el.openWindow();
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onidle":
$(window).load(function(){
el.scrollDetection("scrollEnd", function() {
el.openWindow();
});
if(settings.autoClose == true) {
el.scrollDetection("scrollStart", function() {
el.closeWindow();
});
}
});
break;
case "onclick":
$('#popClick').click(function(){
el.openWindow();
});
break;
}
}
}(window.jQuery);
I believe the problem is that you're using 'showOnce' which globally limits the popup from showing more than once. So, your onclick probably is firing (I'd suggest adding a console.log in to be sure) but then if(el.is(":hidden") && shown == false && animating == false) { in the openWindow function is no longer true.
I'm currently modifying the FlexNav Plugin. Instead of hovering to open the sub-menus, I changed it to open by click.
The problem now is that it takes two clicks to open a submenu.
I understand the problem is the fact that the code adds the class "flexnav-show" to the submenu ul when the menu is opened intitially. A click on the submenu trigger then removes this class, which causes nothing, and a second click add it again opening the submenu.
If anyone can point me to the right place in the code where i can avoid adding the class on all ul's. Or, if someone has a better idea...
$.fn.flexNav = function(options) {
var $nav, $top_nav_items, breakpoint, count, nav_percent, nav_width, resetMenu, resizer, settings, showMenu, toggle_selector, touch_selector;
settings = $.extend({
'animationSpeed': 250,
'transitionOpacity': true,
'buttonSelector': '.menu-button',
'hoverIntent': false,
'hoverIntentTimeout': 150,
'calcItemWidths': false,
'hover': false
}, options);
$nav = $(this);
$nav.addClass('with-js');
if (settings.transitionOpacity === true) {
$nav.addClass('opacity');
}
$nav.find("li").each(function() {
if ($(this).has("ul").length) {
return $(this).addClass("item-with-ul").find("ul").hide();
}
});
if (settings.calcItemWidths === true) {
$top_nav_items = $nav.find('>li');
count = $top_nav_items.length;
nav_width = 100 / count;
nav_percent = nav_width + "%";
}
if ($nav.data('breakpoint')) {
breakpoint = $nav.data('breakpoint');
}
showMenu = function() {
if ($nav.hasClass('lg-screen') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').addClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resetMenu = function() {
if ($nav.hasClass('lg-screen') === true && $(this).find('>ul').hasClass('flexnav-show') === true && settings.hover === true) {
if (settings.transitionOpacity === true) {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"],
opacity: "toggle"
}, settings.animationSpeed);
} else {
return $(this).find('>ul').removeClass('flexnav-show').stop(true, true).animate({
height: ["toggle", "swing"]
}, settings.animationSpeed);
}
}
};
resizer = function() {
var selector;
if ($(window).width() <= breakpoint) {
$nav.removeClass("lg-screen").addClass("sm-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', '100%');
}
selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(selector).removeClass('active');
return $('.one-page li a').on('click', function() {
return $nav.removeClass('flexnav-show');
});
} else if ($(window).width() > breakpoint) {
$nav.removeClass("sm-screen").addClass("lg-screen");
if (settings.calcItemWidths === true) {
$top_nav_items.css('width', nav_percent);
}
$nav.removeClass('flexnav-show').find('.item-with-ul').on();
$('.item-with-ul').find('ul').removeClass('flexnav-show');
resetMenu();
if (settings.hoverIntent === true) {
return $('.item-with-ul').hoverIntent({
over: showMenu,
out: resetMenu,
timeout: settings.hoverIntentTimeout
});
} else if (settings.hoverIntent === false) {
return $('.item-with-ul').on('mouseenter', showMenu).on('mouseleave', resetMenu);
}
}
};
$(settings['buttonSelector']).data('navEl', $nav);
touch_selector = '.item-with-ul, ' + settings['buttonSelector'];
$(touch_selector).append('<span class="touch-button"><i class="navicon">▼</i></span>');
toggle_selector = settings['buttonSelector'] + ', ' + settings['buttonSelector'] + ' .touch-button';
$(toggle_selector).on('click', function(e) {
var $btnParent, $thisNav, bs;
$(toggle_selector).toggleClass('active');
e.preventDefault();
e.stopPropagation();
bs = settings['buttonSelector'];
$btnParent = $(this).is(bs) ? $(this) : $(this).parent(bs);
$thisNav = $btnParent.data('navEl');
return $thisNav.toggleClass('flexnav-show');
});
$('.touch-button').on('click', function(e) {
var $sub, $touchButton;
$sub = $(this).parent('.item-with-ul').find('>ul');
$touchButton = $(this).parent('.item-with-ul').find('>span.touch-button');
if ($nav.hasClass('lg-screen') === true) {
$(this).parent('.item-with-ul').siblings().find('ul.flexnav-show').removeClass('flexnav-show').hide();
}
if ($sub.hasClass('flexnav-show') === true) {
$sub.removeClass('flexnav-show').slideUp(settings.animationSpeed);
return $touchButton.removeClass('active');
} else if ($sub.hasClass('flexnav-show') === false) {
$sub.addClass('flexnav-show').slideDown(settings.animationSpeed);
return $touchButton.addClass('active');
}
});
$nav.find('.item-with-ul *').focus(function() {
$(this).parent('.item-with-ul').parent().find(".open").not(this).removeClass("open").hide();
return $(this).parent('.item-with-ul').find('>ul').addClass("open").show();
});
resizer();
return $(window).on('resize', resizer);
};
The code adds the class 'flexnav-show' in line 34 to all child 'ul' nodes.
The code is in action when the function showMenu is called.
I have this long list with overflow: auto to scroll through it, i set it up for keyboard navigation, the problem is that when using the keyboard it doesn't scroll correctly!
check this jsFiddle
$('ul').keydown(function (e) {
if (e.keyCode == 38) { // up
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
} else {
selected.prev().addClass("selected");
}
}
if (e.keyCode == 40) { // down
var selected = $(".selected");
$listItems.removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
} else {
selected.next().addClass("selected");
}
}
})
});
$listItems.click(function () {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
the behavior i'm looking for is the same behavior of the element when scrolling through a long list of elements using the keyboard this plugin SelectBoxIt show's what i'm looking for.
you can use this code instead, i used animate function to navigate inside the div if the list exceed the width of the ul tag :
http://jsfiddle.net/goldendousa/p6243/13/
$('ul').focus(function() {
if ($('ul li').is('.selected')) {
$('ul li').first().removeClass('selected');
} else {
$('ul li').first().addClass('selected');
}
});
$('ul').keydown(function(e) {
if (e.keyCode == 38) { // up
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.prev().length == 0) {
selected.siblings().last().addClass("selected");
var selectedTopOffset = selected.siblings().last().offset().top;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
} else {
selected.prev().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
if (e.keyCode == 40) { // down
e.preventDefault();
var selected = $(".selected");
$("ul li").removeClass("selected");
if (selected.next().length == 0) {
selected.siblings().first().addClass("selected");
if (selected.siblings().first().offset().top < 0) {
$('div').animate({
scrollTop: selected.siblings().first().offset().top
}, 200);
}
} else {
selected.next().addClass("selected");
var selectedTopOffset = $("div").scrollTop() + selected.position().top - $("div").height()/2 + selected.height()/2;
$('div').animate({
scrollTop: selectedTopOffset
}, 200);
}
}
});
$('li').click(function() {
if ($(this).is('.selected')) {
return true;
} else {
$('li').removeClass('selected');
$(this).addClass('selected');
}
});
I have a jquery image slider, but it only shows 2 slides, so i cant really add more images than whats in those 2 slides is there any way i can create more slides here is the code
/* Slideshow
*/
$(document).ready(function() {
slideshow_loading = true;
slideshow_busy = true;
current_slide = 1;
slideshow_loop_interval = 0;
total_slideshow_images = $('#slideshow-thumbs li').length;
add_action('slideshow_after_preload', slideshow_ready );
slideshow_init();
slideshow_clicks();
slideshow_preload();
});
function slideshow_init() {
clicked_by_loop = false;
// Resize Slideshow Wrapper
$('#slideshow .wrap').height(610);
// Add current slide reflection
$('#current-slide').reflect({
height: 150,
opacity: 0.4
});
$('#slideshow').css('marginBottom', '-150px');
// Separate chunks of thumbnails
$('#slideshow-thumbs li').each(function(i) {
var c = i+1;
if ( c % 6 == 0 ) {
$(this).css('marginRight', '50px');
}
});
// Slideshow thumbs reflection
$('#slideshow-thumbs li img').reflect({
height: 24,
opacity: 0.3
});
// Slideshow video frame reflection
$('#slideshow .wrap #slideshow-video-reflection img').reflect({
height: 60,
opacity: 0.3
});
// Add rel=index to slideshow thumbs
$('#slideshow-thumbs li a').each(function(i) {
$(this).attr('rel', i);
});
// Configure Slideshow Mode
slideshow_transition_init();
// Configure hover & clickevent for #slideshow-video (only image, excluding the map)
if ( slideshow_add_permalink ) {
$('#slideshow-video, #current-slide')
.hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
.click(function() {
var href = $('#slideshow-meta .meta-name').attr('href');
window.location = href;
});
}
// Slideshow Keyboard Shortcuts
$(document).keyup(function(e) {
//alert(e.keyCode);
switch ( e.keyCode ) {
case 39: // Right Key
if ( slideshow_busy ) { return false; }
if ( NOT_IE ) {
$('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
} else {
$('#slideshow-right a').css('visibility', 'visible');
setTimeout(function() { $('#slideshow-right a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
}
$('#slideshow-right a').click();
break;
case 37: // Left Arrow
if ( slideshow_busy ) { return false; }
if ( NOT_IE ) {
$('#slideshow-left a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
} else {
$('#slideshow-left a').css('visibility', 'visible');
setTimeout(function() { $('#slideshow-left a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
}
$('#slideshow-left a').click();
break;
}
});
// If Slideshow has no posts, remove loading indicator
if ( slideshow_images.length > 0 ) {
$('#slideshow-thumbs-container span.loading').css('visibility', 'visible');
}
}
function slideshow_clicks() {
// Thumbnail controls Click Event
slideshow_thumbs_easing = 'easeOutSine';
slideshow_thumbs_scroll_time = 700;
$('#slideshow-thumb-left, #slideshow-thumb-right').click(function() {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}
slideshow_busy = true; /* Lock slideshow interface */
var where = $(this).attr('rel');
var left_coord = $('#slideshow-thumbs').css('left');
left_coord = Math.abs(parseInt(left_coord.replace('px', '')));
var x = 811; // Total offset distance between spans
switch ( where ) {
case 'left':
if ( left_coord == 49 ) {
// Left limit reached
var t1 = 100;
var t2 = 80;
$('#slideshow-thumbs').stop().animate({left: '63px'}, t1).animate({left: '49px'}, t2);
setTimeout(function() {
slideshow_busy = false;
}, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks
return false;
} else {
// Scroll left
var next_coord = x - left_coord;
var t = slideshow_thumbs_scroll_time;
$('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, t);
return false;
}
break;
case 'right':
var next_coord = left_coord - x;
var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );
if ( left_coord < right_limit ) {
// Scroll right
var t = slideshow_thumbs_scroll_time;
$('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, t);
return false;
} else {
// Right limit reached
var t1 = 100;
var t2 = 80;
if ( total_slideshow_images > 6 ) {
$('#slideshow-thumbs').stop().animate({left: '-' + left_coord - 14 + 'px'}, t1).animate({left: '-' + left_coord + 'px'}, t2);
} else {
$('#slideshow-thumbs').stop().animate({left: '35px'}, t1).animate({left: '49px'}, t2);
}
setTimeout(function() {
slideshow_busy = false;
}, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks
return false;
}
break;
}
});
// Thumbnails Click Event
$('#slideshow-thumbs li a').click(function(evt) {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}
slideshow_busy = true;
if ( evt.which == 1 ) {
/* evt.which is 1 when clicked, undefined when triggered by click();
* http://api.jquery.com/category/events/event-object/ */
clearInterval(slideshow_loop_interval);
}
var rel = parseInt( $(this).attr('rel') );
var next = rel;
if ( current_slide == ( rel + 1 ) ) { slideshow_busy = false; return false;} // Exit event if it's the same slide
current_slide = rel + 1;
slideshow_fade_transition(next, evt);
return false;
});
}
function slideshow_preload() {
var counter = 0;
var total_images = slideshow_images.length;
do_action('slideshow_before_preload');
$.cacheImage(slideshow_images, {
load : function(e) {counter += 1;},
error : function(e) {total_images -= 1;},
complete : function(e) {
if ( counter == total_images ) {
//setTimeout(function() {
slideshow_loading = false;
do_action('slideshow_after_preload');
//},2000);
}
}
});
}
function slideshow_ready() {
var t = 500;
$('#slideshow-thumbs-container span.loading').fadeOut(t);
setTimeout(function() {
$('#slideshow-thumbs').stop().animate({left: '49px'}, t+100, 'easeOutExpo');
// Enable slideshow video frame
if ( total_slideshow_images > 0 ) {
var video = slideshow_meta[0]['video'];
if ( video != '' ) {
$('#slideshow-video-trigger, #slideshow map area').attr('href', video);
if ( NOT_IE ) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(t+100);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
}
}
}
setTimeout(function() {
slideshow_busy = false; // Unlock the Slideshow UI
slideshow_loop();
}, t+120);
}, t+20 );
}
function slideshow_thumbs_autoscroll(next, rel) {
/* Do nothing if nothign to scroll */
if ( total_slideshow_images <= 6 ) { return false; }
switch( rel ) {
case 1:
// Slide Right
if ( current_slide % 6 == 0 || current_slide == total_slideshow_images ) {
if ( next != 0 ) {
// Scroll right
slideshow_busy = false;
$('#slideshow-thumb-right').click();
return false;
} else {
// Go to the beginning
slideshow_busy = true;
$('#slideshow-thumbs').stop().animate({left: '49px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, slideshow_thumbs_scroll_time + 50);
return false;
}
}
break;
case -1:
// Slide Left
if ( (current_slide - 1 ) % 6 == 0 ) {
if ( current_slide == 1 ) {
// Go to the end
slideshow_busy = true;
var x = 811;
var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );
$('#slideshow-thumbs').stop().animate({left: '-' + right_limit + 'px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, slideshow_thumbs_scroll_time + 50);
return false;
} else {
// Scroll left
slideshow_busy = false;
$('#slideshow-thumb-left').click();
return false;
}
}
break;
}
}
function slideshow_transition_init() {
$('#slideshow-left a, #slideshow-right a').click(function(evt) {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}
slideshow_busy = true;
if ( evt.which == 1 ) {
/* evt.which is 1 when clicked, undefined when triggered by click();
* http://api.jquery.com/category/events/event-object/ */
clearInterval(slideshow_loop_interval);
}
var rel = parseInt( $(this).attr('rel') );
var next = cycle(rel, current_slide, total_slideshow_images) - 1;
slideshow_thumbs_autoscroll(next, rel);
current_slide = next + 1;
slideshow_fade_transition(next, evt);
return false;
});
}
function slideshow_fade_transition(next, evt) {
// Add slideshow video (if any)
var video = slideshow_meta[next]['video'];
if ( video == '' ) {
if ( NOT_IE ) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeOut(slideshow_transition_delay);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').hide();
}
} else {
$('#slideshow-video-trigger, #slideshow map area').attr('href', video);
if ( NOT_IE ) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(slideshow_transition_delay);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
}
}
// Configure Transition
var title = $( slideshow_meta[next]['title'] );
var category = slideshow_meta[next]['category'];
$('#slideshow .wrap').append('<img alt="" width="960" height="460" class="below" src="' + slideshow_images[next] + '" />');
$('#slideshow .wrap .below').reflect({height: 150, opacity: 0.4});
var t = slideshow_transition_delay;
$('#slideshow .wrap .above').stop().fadeOut(t);
$('#slideshow .wrap .below').stop().fadeIn(t);
$('#slideshow-thumbs li.active').removeClass('active');
$('#slideshow-thumbs li a[rel=' + next + ']').parents('li').addClass('active');
$('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 0}, t*0.5);
setTimeout(function() {
$('#slideshow-meta .meta-name').html( title.html() ).attr('href', title.attr('href') );
$('#slideshow-meta .meta-category').html( category );
$('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 1}, t*0.5);
}, t*0.3);
setTimeout(function() {
$('#slideshow .wrap .above').remove();
$('#slideshow .wrap .below').removeClass('below').addClass('above');
slideshow_busy = false;
if ( slideshow_add_permalink ) {
$('#slideshow .wrap .above')
.hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
.click(function() { var href = $('#slideshow-meta .meta-name').attr('href'); window.location = href; });
}
if ( evt.which == 1 ) {
// Reinitiate loop if control buttons clicked
slideshow_loop();
}
}, t+10);
}
function slideshow_loop() {
if ( slideshow_loop_enabled == false ) { return false; }
slideshow_loop_interval = setInterval(function() {
$('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
$('#slideshow-right a').click();
}, slideshow_loop_time * 1000 );
}
total_slideshow_images = $('#slideshow-thumbs li').length;
var next = cycle(rel, current_slide, total_slideshow_images) - 1;
These lines imply that the code adjusts to however many images you have with that particular class. It seems like you just need to copy-paste one of your existing images and change the source link.
The problem is here (in shiny-slider.js):
left_coord = Math.abs(parseInt(left_coord.replace('px', '')));
The script is using the absolute value of the left coordinate of the slider frame to calculate the next position. So the first right slide takes it to 49 - 811 = -762, but then the next slide uses 762 instead of -762, leading to 762 - 811 = -49, which is the wrong direction.
If you remove the Math.abs(), the slider will continue to slide to the right. There are some other issues with the script however, as it will continue to slide past the last image, as well as some margin issues etc. Hopefully, this will get you started.