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.
Related
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');
the below-following code is written by freelancer programmer for the silde banner for our Magento website. This is only for slide banner when the customer clicks the pager navigation menu; it slides to next banner. I want to set Interval for this so that It can automatically slide with clicking pager button. Thank you!!!
function initialize_banner_slider(banner_id) {
if ($(banner_id).size() <= 0) return;
var make_center = function(center) {
center.removeClass("on_right").removeClass("on_left").addClass("on_center");
$("body").removeClass("theme-light").removeClass("theme-dark").addClass("theme-"+center.data("theme"));
center.find(".fadeup").each(function() {
$(this).hide().css("top", (parseInt($(this).data("pos-y"))/750*100+100) + "%");
});
$(banner_id + " ul.banner_pager li").removeClass("active");
$($(banner_id + " ul.banner_pager li")[center.index()]).addClass("active");
setTimeout(function() {
center.find(".fadeup").each(function() {
$(this).show().animate({"top": "-=100%"});
/* $(this).css("top", parseInt($(this).data("pos-y"))); */
});
}, 600);
}
var move_full_card_left = function(banner_id) {
if ($(banner_id).find(".on_right").size() > 0) {
$(banner_id).find(".on_center").removeClass("on_center").addClass("on_left");
make_center( $(banner_id).find(".on_right").first() );
if ($(banner_id).find(".on_right").size() == 0) {
// hide arrow
$(banner_id).find(".move_right").hide();
} else {
// show arrow
$(banner_id).find(".move_right").show();
}
$(banner_id).find(".move_left").show();
}
return false;
}
var move_full_card_right = function(banner_id) {
if ($(banner_id).find(".on_left").size() > 0) {
$(banner_id).find(".on_center").removeClass("on_center").addClass("on_right");
make_center( $(banner_id).find(".on_left").last() );
if ($(banner_id).find(".on_left").size() == 0) {
// hide arrow
$(banner_id).find(".move_left").hide();
} else {
// show arrow
$(banner_id).find(".move_left").show();
}
$(banner_id).find(".move_right").show();
}
return false;
}
$(banner_id).find(".move_left").click(function() {
return move_full_card_right(banner_id);
});
$(banner_id).find(".move_right").click(function() {
return move_full_card_left(banner_id);
});
for (var i=0, l=$(banner_id+" > ul.slider > li").size(); i<l; i++) {
var pager = $("<li></li>");
pager.on("click", function() {
var index = $(this).index();
$(banner_id+" > ul.slider > li").each(function(ndx, val) {
if (ndx < index) {
$(this).removeClass("on_center").removeClass("on_right").addClass("on_left");
} else if (ndx > index) {
$(this).removeClass("on_center").removeClass("on_left").addClass("on_right");
} else if (ndx == index) {
make_center($(this));
}
});
});
pager.appendTo($(banner_id + " ul.banner_pager"));
}
var first = true;
$(banner_id+" > ul.slider > li").each(function(elem) {
if (first) {
make_center( $(this) );
first = false;
} else {
$(this).addClass("on_right");
}
$(this).on("swipeleft", function() {
return move_full_card_left(banner_id);
}).on("swiperight", function() {
return move_full_card_right(banner_id);
});
$(this).css("background-image", "url("+$(this).data("background-image")+")");
});
if ($(banner_id+" > ul.slider > li").size() < 2) {
$(banner_id).find(".move_right").hide();
}
$(banner_id).find(".move_left").hide();
}
function initialize_parallax() {
$(".responsive_wrapper").each(function() {
var base_width = $(this).data("width");
var base_height = $(this).data("height");
$(this).css({
"max-width": base_width+"px",
"max-height": base_height+"px"
});
$(this).find(".responsive").each(function() {
$(this).css({
"width": $(this).data("width")/base_width*100 + "%",
"height": $(this).data("height")/base_height*100 + "%",
"left": $(this).data("pos-x")/base_width*100 + "%",
"top": (parseInt($(this).data("pos-y"))/base_height*100) + "%",
});
});
});
}
$(document).ready(function() {
/* parallax positioning */
// $(".verus-cms .parallax").insertAfter( $(".page-header") );
$("#product-list-toolbar2").prependTo(".col-main");
initialize_parallax();
initialize_banner_slider("#top_banner");
initialize_banner_slider("#lific_banner");
You would add something like this:
setInterval(function(){move_full_card_right(banner_id);},5000);
You should be able to throw that in you document ready as long as you can get the banner_id. I don't know how you are setting the banner id, so I can't help you with that.
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 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();
}
}
});
},
I have a thumb scroller on my site and the problem is, when thumbs reach end scroller leaves blank spaces before it goes back to beginning... Can anyone help how to achive this... Thank you in advance!
This is the url: http://marinmartinovic.com/MK_test/
It could take a little bit to load. Still need to optimize images...
This is js:
$(document).ready(function(event) {
/*
*
* SORTING INDEX NUMBERS
*
*/
function sortIndexNumbers(){
loadPhotoIndex = 0;
indexNumbers = [];
for(var i = 0; i<photosLength;i++){
indexNumbers.push(i);
}
if(photoIndex === 0){
indexNumbersToAdd = indexNumbers.splice(photosLength-1, 1);
indexNumbers = indexNumbersToAdd.concat(indexNumbers);
}
if(photoIndex > 1){
indexNumbersToAdd = indexNumbers.splice(0, photoIndex -1);
indexNumbers = indexNumbers.concat(indexNumbersToAdd);
}
loadPhoto();
}
/*
*
* LOAD THUMBS
*
*/
var aThumbsWidth = [];
var speedThumb = 750;
var thumbIndex = 0;
var thumbSwiped = 0;
var thumbsWidth = 0;
function loadThumb(){
$('<img src="'+ aThumbs[thumbIndex] +'">').one('load', function() {
$(".thumb-content ul").append('<li><div class="thumb" id="thumb" data-index=' + thumbIndex + '><img src="'+ aThumbs[thumbIndex] +'"></div></li>');
//setTimeout(function() {
aThumbsWidth.push($('.thumb-content .thumb img').get(thumbIndex).width);
thumbsWidth+= $('.thumb-content .thumb img').get(thumbIndex).width + thumbSpacing;
thumbIndex++;
if(thumbIndex < aThumbs.length){
loadThumb();
}
// all 3 loaded
if(thumbIndex === aThumbs.length){
highlightThumb();
// find thumb and get its position
console.log(photoIndex);
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
//}, 50);
}).each(function() {
//if(this.complete) $(this).load();
});
}
/*
*
* SWIPE THUMB SLIDER
*
*/
var currentThumb = 0;
var currentThumbShift = 0;
$(".thumb-content").swipe( {
tap:function(event, target) {
if(!loadingInProgress){
photoIndex = parseFloat(target.getAttribute('data-index'));
selectPhoto();
highlightThumb();
}
},
triggerOnTouchEnd: false,
swipeStatus: swipeThumbStatus,
allowPageScroll: "vertical",
threshold: 200
});
function swipeThumbStatus(event, phase, direction, distance, fingers)
{
thumbSwiped = distance;
/*if( phase === "move" && (direction === "left" || direction === "right") )
{
var duration = 0;
if (direction === "left"){
scrollThumbs(currentThumbShift + distance, duration);
}
else if (direction === "right"){
scrollThumbs(currentThumbShift - distance, duration);
}
}
else if ( phase === "cancel")
{
scrollThumbs(currentThumbShift, duration);
}*/
if ( phase === "end" ){
if (direction === "right"){
if(!loadingInProgress){
prevPhoto();
setThreePhotos(prevPhoto, 1500, 1);
}
}
else if (direction === "left"){
if(!loadingInProgress){
nextPhoto();
setThreePhotos(nextPhoto, 1500, 1);
}
}
}
}
function selectThumb(distance){
currentThumb = currentThumb + photoIndex;
TweenLite.to($(".thumb-content"), 0.75, {left: -distance, ease:Power4.easeOut, force3D:true});
}
$('body').on('click', '.thumb', function(e) {
if(!loadingInProgress){
photoIndex = parseFloat($(this).attr('data-index'));
selectPhoto();
highlightThumb();
selectThumb($(this).position().left);
}
});
function highlightThumb(){
$('.thumb').css('opacity', '1');
$('.thumb-content').find("[data-index='" + photoIndex + "']").css('opacity', '0.5');
}
/*
*
* NEXT PREVIOUS THUMB
*
*/
var arrow = false;
var nextThree ;
var intervalBuffer;
$('#next-thumb').click(function(event) {
if(!loadingInProgress){
photoIndex += 2;
if((photoIndex+1) >= aPhotos.length){
photoIndex = 0;
}
selectPhoto();
highlightThumb();
// find thumb and get its position
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
});
$('#prev-thumb').click(function(event) {
if(!loadingInProgress){
photoIndex -= 2;
if((photoIndex+1) < 0){
photoIndex = aPhotos.length-1;
}
selectPhoto();
highlightThumb();
// find thumb and get its position
var thumbPosition = $('.thumb-content').find("[data-index='" + photoIndex + "']").position().left;
selectThumb(thumbPosition);
}
});
function setThreePhotos(callback, delay, repetitions) {
clearInterval(threePhotos);
var x = 0;
var threePhotos = setInterval(function () {
callback();
if (++x === repetitions) {
clearInterval(threePhotos);
}
}, delay);
}