scroll through "stack" of DOM objects - javascript

I have this fiddle:
https://jsfiddle.net/72p0rkqd/
html:
<section id="contact"></section>
<section id="works"></section>
<section id="about"></section>
<section id="home"></section>
css:
section {
display: flex;
position: fixed;
width: 100vw;
min-height: 100vh;
}
#home {
background-color: black;
}
#about {
background-color: red;
}
#works {
background-color: purple;
}
#contact {
background-color: blue;
}
which reflects my site
right now, the four sections lay on top of each other.
what I want is when we begin to scroll at the site, it will scroll through the stack of sections. When we scroll, it will first scroll through #home, so #home scrolls up, making #about visible, and when #home is not on the screen anymore, it will begin scrolling #about upwards, making #works visible and so on. When you then scroll up on the page, the sections should begin stacking themself again, reverting the downscroll process.
How can this be done?

Here a solution I found. Maybe it's not the best answer and it certainly have to be improved.
I got it using animate() to move up/down the sections and "DOMMouseScroll" & "mousewheel" to get wheel moves from jQuery.
I had to use some flags to prevent from long scrolls.
Here is the jQuery :
var homeAnimating = false;
var aboutAnimating = false;
var worksAnimating = false;
var contactAnimating = false;
$('#home').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(homeAnimating) {
return;
}
$('#home').animate({
'marginTop' : "-=100vh" //moves up
});
homeAnimating = true;
aboutAnimating = false;
}
//prevent page from scrolling
return false;
});
$('#about').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(aboutAnimating) {
return;
}
$('#about').animate({
'marginTop' : "-=100vh" //moves up
});
aboutAnimating = true;
worksAnimating = false;
} else {
//scroll up
if(aboutAnimating) {
return;
}
$('#home').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = true;
homeAnimating = false;
}
//prevent page fom scrolling
return false;
});
$('#works').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(worksAnimating) {
return;
}
$('#works').animate({
'marginTop' : "-=100vh" //moves up
});
worksAnimating = true;
contactAnimating = false;
} else {
//scroll up
if(worksAnimating) {
return;
}
$('#about').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = false;
worksAnimating = true;
}
//prevent page fom scrolling
return false;
});
$('#contact').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
} else {
//scroll up
if(contactAnimating) {
return;
}
$('#works').animate({
'marginTop' : "+=100vh" //moves down
});
contactAnimating = true;
worksAnimating = false;
}
//prevent page fom scrolling
return false;
});
And here is the fiddle : https://jsfiddle.net/fkahogqd/
Hope it helps.
EDIT
Ok, that was a little tricky but I assume that's what you're looking for :
Here is the new jQuery :
var winHeight = $(window).height();
$('section').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
//scroll down
$('#home').animate({
'marginTop' : "-=5vh" //moves up
},2);
if (homePos <= - winHeight) {
$('#home').stop();
$('#about').animate({
'marginTop' : "-=5vh"
},2);
}
if (aboutPos <= - winHeight) {
$('#about').stop();
$('#works').animate({
'marginTop' : "-=5vh"
},2);
}
if (worksPos <= - winHeight) {
$('#works').stop();
}
} else {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
$('#works').animate({
'marginTop' : "+=5vh" //moves up
},2);
if (worksPos >= 0) {
$('#works').stop();
$('#about').animate({
'marginTop' : "+=5vh"
},2);
}
if (aboutPos >= 0) {
$('#about').stop();
$('#home').animate({
'marginTop' : "+=5vh"
},2);
}
if (homePos >= 0) {
$('#home').stop();
}
}
});
And here is the fiddle : https://jsfiddle.net/fkahogqd/5/
Hope it helps.

Related

Disable background scrolling when a modal is enabled

I am using a template with the following code to handle scrolling:
Here is the template.
This is the javascript code for scrolling, I can post the html and css if needed but it is large.
// #codekit-prepend "/vendor/hammer-2.0.8.js";
$( document ).ready(function() {
// DOMMouseScroll included for firefox support
var canScroll = true,
scrollController = null;
$(this).on('mousewheel DOMMouseScroll', function(e){
if (!($('.outer-nav').hasClass('is-vis'))) {
e.preventDefault();
var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
if (delta > 50 && canScroll) {
canScroll = false;
clearTimeout(scrollController);
scrollController = setTimeout(function(){
canScroll = true;
}, 800);
updateHelper(1);
}
else if (delta < -50 && canScroll) {
canScroll = false;
clearTimeout(scrollController);
scrollController = setTimeout(function(){
canScroll = true;
}, 800);
updateHelper(-1);
}
}
});
$('.side-nav li, .outer-nav li').click(function(){
if (!($(this).hasClass('is-active'))) {
var $this = $(this),
curActive = $this.parent().find('.is-active'),
curPos = $this.parent().children().index(curActive),
nextPos = $this.parent().children().index($this),
lastItem = $(this).parent().children().length - 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
});
$('.cta').click(function(){
var curActive = $('.side-nav').find('.is-active'),
curPos = $('.side-nav').children().index(curActive),
lastItem = $('.side-nav').children().length - 1,
nextPos = lastItem;
updateNavs(lastItem);
updateContent(curPos, nextPos, lastItem);
});
// swipe support for touch devices
var targetElement = document.getElementById('viewport'),
mc = new Hammer(targetElement);
mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
mc.on('swipeup swipedown', function(e) {
updateHelper(e);
});
$(document).keyup(function(e){
if (!($('.outer-nav').hasClass('is-vis'))) {
e.preventDefault();
updateHelper(e);
}
});
// determine scroll, swipe, and arrow key direction
function updateHelper(param) {
var curActive = $('.side-nav').find('.is-active'),
curPos = $('.side-nav').children().index(curActive),
lastItem = $('.side-nav').children().length - 1,
nextPos = 0;
if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
if (curPos !== lastItem) {
nextPos = curPos + 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
else {
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
}
else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
if (curPos !== 0){
nextPos = curPos - 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
else {
nextPos = lastItem;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
}
}
// sync side and outer navigations
function updateNavs(nextPos) {
$('.side-nav, .outer-nav').children().removeClass('is-active');
$('.side-nav').children().eq(nextPos).addClass('is-active');
$('.outer-nav').children().eq(nextPos).addClass('is-active');
}
// update main content area
function updateContent(curPos, nextPos, lastItem) {
$('.main-content').children().removeClass('section--is-active');
$('.main-content').children().eq(nextPos).addClass('section--is-active');
$('.main-content .section').children().removeClass('section--next section--prev');
if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
$('.main-content .section').children().removeClass('section--next section--prev');
}
else if (curPos < nextPos) {
$('.main-content').children().eq(curPos).children().addClass('section--next');
}
else {
$('.main-content').children().eq(curPos).children().addClass('section--prev');
}
if (nextPos !== 0 && nextPos !== lastItem) {
$('.header--cta').addClass('is-active');
}
else {
$('.header--cta').removeClass('is-active');
}
}
function workSlider() {
$('.slider--prev, .slider--next').click(function() {
var $this = $(this),
curLeft = $('.slider').find('.slider--item-left'),
curLeftPos = $('.slider').children().index(curLeft),
curCenter = $('.slider').find('.slider--item-center'),
curCenterPos = $('.slider').children().index(curCenter),
curRight = $('.slider').find('.slider--item-right'),
curRightPos = $('.slider').children().index(curRight),
totalWorks = $('.slider').children().length,
$left = $('.slider--item-left'),
$center = $('.slider--item-center'),
$right = $('.slider--item-right'),
$item = $('.slider--item');
$('.slider').animate({ opacity : 0 }, 400);
setTimeout(function(){
if ($this.hasClass('slider--next')) {
if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else {
if (curLeftPos === totalWorks - 1) {
$item.removeClass('slider--item-left').first().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else if (curCenterPos === totalWorks - 1) {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$item.removeClass('slider--item-center').first().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$item.removeClass('slider--item-right').first().addClass('slider--item-right');
}
}
}
else {
if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else {
if (curLeftPos === 0) {
$item.removeClass('slider--item-left').last().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else if (curCenterPos === 0) {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$item.removeClass('slider--item-center').last().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$item.removeClass('slider--item-right').last().addClass('slider--item-right');
}
}
}
}, 400);
$('.slider').animate({ opacity : 1 }, 400);
});
}
function transitionLabels() {
$('.work-request--information input').focusout(function(){
var textVal = $(this).val();
if (textVal === "") {
$(this).removeClass('has-value');
}
else {
$(this).addClass('has-value');
}
// correct mobile device window position
window.scrollTo(0, 0);
});
}
outerNav();
workSlider();
transitionLabels();
});
How can I disable this code so the background doesn't scroll when an elements display is set to "block" meaning a modal is present?
Sorry for being vague if you need more specifics let me know!
EDIT 1:
I have tried disabled the div using:
$(".l-viewport").attr('disabled','disabled');
I have set the z-index of the model above all else
you can create a class HideScroll in your css:
.HideScroll {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
The in the code that displays your modal, add this css to your main div:
$('.yourMainDivClass').addClass('HideScroll')
upon modal close, remove the class:
$('.yourMainDivClass').removeClass('HideScroll')
you can also use jquery toggleClass function.
OR
you can wrap your main div inside <fieldset> and set it's disabled attribute to true:
<fieldset id="fs-1">
<div id="yourMainDiv"></div>
</fieldset>
upon showing modal:
$('#fs-1').attr('disabled', true);
upon closing modal:
$('#fs-1').removeAttr('disabled');

Detect touch scroll up or down

I need code same this for touch devices . help me please
$(window).on('DOMMouseScroll mousewheel', function (e) {
if (ScrollEnable) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
console.log('Down');
} else {
console.log('Up');
}
}
return false;
});
and here is my touch code, But consul just take up i need find down for my website ! what can i do :|
$('body').on({
'touchmove': function(e) {
if (e.originalEvent.touches > 0 || e.originalEvent.touches > 0) {
console.log('Down');
} else {
console.log('Up');
}
}
});
var updated=0,st;
$('body').on({
'touchmove': function(e) {
st = $(this).scrollTop();
if(st > updated) {
console.log('down');
}
else {
console.log('up');
}
updated = st;
}
});
You can use scroll event
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
I know my solution is a bit more generic - it is not dependend on any element, but it might help someone that has encountered the same problem as me.
var touchPos;
// store the touching position at the start of each touch
document.body.ontouchstart = function(e){
touchPos = e.changedTouches[0].clientY;
}
// detect wether the "old" touchPos is
// greater or smaller than the newTouchPos
document.body.ontouchmove = function(e){
let newTouchPos = e.changedTouches[0].clientY;
if(newTouchPos > touchPos) {
console.log("finger moving down");
}
if(newTouchPos < touchPos) {
console.log("finger moving up");
}
}
The only way that I could (and tested) detect scroll down/up on mobile devices (android & ios, touch devices):
(other events such as scroll, mousewheel, DOMMouseScroll, nmousewheel and wheel do not work on mobile devices)
jQuery:
let touchStartPosX = 0;
// Detect Scroll Down and Up in mobile(android|ios)
$(window).on('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.originalEvent.touches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});
Vanilla:
let touchStartPosX = 0;
window.addEventListener('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.changedTouches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});
This w3schools.com documentation would help you out http://www.w3schools.com/jquerymobile/jquerymobile_events_scroll.asp
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

Navigating long un-ordered list

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');
}
});

stop image from moving when reaching the border of a container

i have this fiddle : http://jsfiddle.net/ps4t9/4/
$(window).keydown(function (e) {
if (e.which == 38) { player.animate({ top: '-=20px' }); shuriken.animate({ top: '-=20px' }); } // up
if (e.which == 40) { player.animate({ top: '+=20px' }); shuriken.animate({ top: '+=20px' }); } // down
if (e.which == 32) { shuriken.animate({ left: '+=280px' });} // space bar hit
});
how can i prevent the player from moving outside the border of the container ?
You can use an if statement
if (e.which == 32){
if(shuriken.css('left') != '249px'){
shuriken.animate({ 'left' : '+=280px' });
}
}
Fiddle: http://jsfiddle.net/Hive7/ps4t9/5/
Try this: http://jsfiddle.net/ps4t9/11/
$(document).ready(function () {
var player = $("#Player"),
shuriken = $("#Shuriken"),
container = $("#Container"),
w = container.width() - shuriken.width();
$(window).keydown(function (e) {
if (e.which == 38) {
if (parseInt(player.css('top')) > 10) {
player.animate({ top: '-=20px' });
shuriken.animate({ top: '-=20px' });
}
} // up
if (e.which == 40) {
if (parseInt(player.css('top')) < 270) {
player.animate({ top: '+=20px' });
shuriken.animate({ top: '+=20px' });
}
} // down
if (e.which == 32) {
if (shuriken.css('left') != '249px') {
shuriken.animate({ 'left' : '+=280px' });
}
}
});
});
It breaks when holding down the key and moving too fast though. You may also have to adjust the values a bit.
Demo http://jsfiddle.net/u6vXK/1/
the condition what you want is
var wallT = 0,//top
wallB =269,//bottpm
wallL = 0,//left
wallR =269;//right
function checkBoundUpDw(pos) {
if(pos > wallT && pos < wallB){
return true;
}
return false;
}
function checkBoundleftRight(pos) {
if(pos > wallL && pos <wallR){
return true;
}
return false;
}
If you press hold it wont work , pres key one by one , means press and wait for animation finish and press again , you have to add isanimating condition and other predominance tips.
here is the link for your answer
http://jsfiddle.net/bDMnX/7/
var pane = $('#pane'),
box = $('#box'),
w = pane.width() - box.width(),
d = {},
x = 3;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
thank you all for your help but after a deep Meditation and searching hehe i managed to make it work here is the final jsfiddle : http://jsfiddle.net/ps4t9/15/ thank you
function newv(v, a, b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function (e) {
d[e.which] = true;
if (e.which == 32) {
if (!shurikenHitBorder) {
shuriken.animate({ left: '+=280px' }, 'fast');
shuriken.fadeIn(100);
}
shurikenHitBorder = true;
}
});
$(window).keyup(function (e) { d[e.which] = false; });
setInterval(function () {
box.css({top: function (i, v) { return newv(v, 38, 40); }});
}, 20);
I have edited your JSFiddle
with the necessary modifications. Does this help you? Ask me if you need more explanations...
I haved added these to help you calculate optimum bounds...
posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);

Jquery Image Slider

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.

Categories