I'm currently facing an issue and could not solve it..
I have 3 slideshows located on one page, where only one slideshow is visible and the other 2 are hidden, based on which slideshow the user selects.
The visible slideshow auto-plays the slides and can be navigated with arrows, but at the moment when I try to change from slideshow 1 to slideshow 2 and then back again to slideshow 1, the function on slideshow 1 gets executed 2 times and sometimes even 3 or 4 times (depending on how often I change slideshows back and forth) making me unable to navigate it.. How do I "cancel" the function that keeps running on the previous slideshow, at the moment when I change from slideshow 1 to 2 and prevent it from executing multiple times?
Thank you in advance and I hope there's someone that can help me out on this one!
function Slider() {
this.slider = document.getElementsByClassName("image_slideshow");
if (typeof(this.slider) !== 'undefined' && this.slider !== null){
this.radio = document.getElementsByName("room");
this.room_labels = document.getElementsByClassName("selected_room")[0];
this.label = this.room_labels.getElementsByTagName("label");
this.slideIndex = 1;
this.timer = null;
this.initEvents();
}
}
Slider.prototype = {
initEvents : function(){
var room_labels = this.room_labels, label = this.label, slider;
for (var k = 0; k < label.length; k++) {
var radio = document.getElementById(label[k].className);
if(radio.checked){
slider = document.getElementById(radio.id + "_room").getElementsByClassName("image_slideshow")[0];
this.playSlider(this.slideIndex, slider);
}
}
room_labels.addEventListener("click", function(event){ event = event || window.event;
var target = event.target;
if (target && target !== undefined && target !== null){
if (target.nodeName === "LABEL") {
slider = document.getElementById(target.className + "_room").getElementsByClassName("image_slideshow")[0];
this.playSlider(this.slideIndex,slider);
}
return;
}
}.bind(this));
},
playSlider : function(n, slider){
var prev = slider.getElementsByClassName('prev')[0],
next = slider.getElementsByClassName('next')[0];
prev.addEventListener("click", function() {
this.showSlides(this.slideIndex -= 1,slider);
}.bind(this));
next.addEventListener("click", function() {
this.showSlides(this.slideIndex += 1,slider);
}.bind(this));
this.showSlides(this.slideIndex,slider);
},
showSlides : function(n, slider){
var self = this, slides = slider.getElementsByTagName("figure"),
bullets = slider.getElementsByClassName("indicator")[0].children;
if (n > slides.length) {this.slideIndex = 1;}
if (n < 1) {this.slideIndex = slides.length;}
for (var i=0; i < slides.length; i++) {
slides[i].className = "";
bullets[i].className = " bullet";
}
slides[this.slideIndex - 1].className += "active";
bullets[this.slideIndex - 1].className += " active";
clearTimeout(this.timer);
this.timer = setTimeout(function() {
self.showSlides(self.slideIndex += 1,slider);}, 7000);}
};
window.Slider = new Slider();
Related
I have a slider on my website page, and I wanted to create a link that redirects to a specific slide of the slider, that contains 3 slides. Because I'm a beginner in javascript, I tried the easiest way that I could think, which is to click a certain number of times according to the current slide, so for example, if my current slide position is equal to 2[0,1,2], and I want to go to position 1, I can press the next button 2 times using a Javascript click() event. It's working like a charm, but when I click for the second time, it doesn't work. I would like to know why this is happening.
const mySlide = document.querySelectorAll('.mySlides');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8100);
function autoSlide() {
counter += 1;
slidefun(counter);
}
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8100);
}
function slidefun(n) {
let i;
for(i = 0;i<mySlide.length;i++){
mySlide[i].style.display = "none";
}
if(n > mySlide.length){
counter = 1;
}
if(n < 1){
counter = mySlide.length;
}
mySlide[counter - 1].style.display = "block";
}
const slide2 = document.getElementById('slide2');
var slideButton = document.getElementById('myButton');
slideButton.addEventListener('click', openSlide);
nextButton = document.getElementsByClassName('next');
nextButton.addEventListener('click', slideSelected);
function slideSelected(){
if(currentSlide == currentSlide(0)){
nextButton.click()
}else if(currentSlide == currentSlide(2)){
nextButton.click();
nextButton.click();
}
}
I am having trouble creating a slider that pauses on hover, because I execute the animation function again on mouse off, if I flick the mouse over it rapidly (thereby calling the function multiple times) it starts to play up, I would like it so that the function is only called if the other function is complete, otherwise it does not call at all (to avoid queue build up and messy animations)
What's the easiest/best way to do this?
$(document).ready(function() {
//get variables
var slide_width = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;
//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);
var n = 1;
$('.slider_container').hover(function() {
//Mouse on
n = 0;
$('.slider').stop(true, false);
}, function() {
//Mouse off
n = 1;
if (fnct == 0) sliderLoop();
});
//Called in Slide Loop
function animateSlider() {
$('.slider').delay(3000).animate({ marginLeft: -(slide_width * i) }, function() {
i++;
sliderLoop();
});
}
var i = 0;
var fnct = 0
//Called in Doc Load
function sliderLoop() {
fnct = 1
if(n == 1) {
if (i < number_of_slides) {
animateSlider();
}
else
{
i = 0;
sliderLoop();
}
}
fnct = 0
}
sliderLoop();
});
The slider works fine normally, but if I quickly move my mouse on and off it, then the slider starts jolting back and forth rapidly...been trying to come up with a solution for this for hours now..
Here's what fixed it, works a charm!
$(document).ready(function() {
//get variables
var slide_width = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;
//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);
var n = 1;
var t = 0;
$('.slider_container').hover(function() {
clearInterval(t);
}, function() {
t = setInterval(sliderLoop,3000);
});
var marginSize = i = 1;
var fnctcmp = 0;
//Called in Doc Load
function sliderLoop() {
if (i < number_of_slides) {
marginSize = -(slide_width * i++);
}
else
{
marginSize = i = 1;
}
$('.slider').animate({ marginLeft: marginSize });
}
t = setInterval(sliderLoop,3000);
});
all. I am building a full screen jQuery gallery for a project I am working on, and am running in to a small hiccup.
to see a demo of what is happening, please visit http://www.idealbrandon.com/gallery.html.
Basically, I am loading the bg-image for each slide using a custom attribute, data-background. This works fine the first time through, however whenever a slide is loaded for a second time, it does not load. The HTML for a slide is:
<div class="slide" data-background="/img/gallery/2.jpg">
<div class="location">Magical Aqua Ducks</div>
<div class="verse"></div>
</div>
the Javascript in question is
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<li class="page" data-target="'+i+'"></li>');
if ($slides.eq(i).attr("data-background") != null){
$slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
};
};
and the entire javascript file is
(function($){
function prefix(el){
var prefixes = ["Webkit", "Moz", "O", "ms"];
for (var i = 0; i < prefixes.length; i++){
if (prefixes[i] + "Transition" in el.style){
return '-'+prefixes[i].toLowerCase()+'-';
};
};
return "transition" in el.style ? "" : false;
};
var methods = {
init: function(settings){
return this.each(function(){
var config = {
slideDur: 7000,
fadeDur: 800
};
if(settings){
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = '.slide',
fading = false,
slideTimer,
activeSlide,
newSlide,
$slides = $container.find(slideSelector),
totalSlides = $slides.length,
$pagerList = $container.find('.pager_list');
prefix = prefix($container[0]);
function animateSlides(activeNdx, newNdx){
function cleanUp(){
$slides.eq(activeNdx).removeAttr('style');
activeSlide = newNdx;
fading = false;
waitForNext();
};
if(fading || activeNdx == newNdx){
return false;
};
fading = true;
$pagers.removeClass('active').eq(newSlide).addClass('active');
$slides.eq(activeNdx).css('z-index', 3);
$slides.eq(newNdx).css({
'z-index': 2,
'opacity': 1
});
if(!prefix){
$slides.eq(activeNdx).animate({'opacity': 0}, config.fadeDur,
function(){
cleanUp();
});
} else {
var styles = {};
styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
styles['opacity'] = 0;
$slides.eq(activeNdx).css(styles);
//$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).attr("data-background")+")");
var fadeTimer = setTimeout(function(){
cleanUp();
},config.fadeDur);
};
};
function changeSlides(target){
if(target == 'next'){
newSlide = (activeSlide * 1) + 1;
if(newSlide > totalSlides - 1){
newSlide = 0;
}
} else if(target == 'prev'){
newSlide = activeSlide - 1;
if(newSlide < 0){
newSlide = totalSlides - 1;
};
} else {
newSlide = target;
};
animateSlides(activeSlide, newSlide);
};
function waitForNext(){
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
};
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<li class="page" data-target="'+i+'"></li>');
if ($slides.eq(i).attr("data-background") != null){
$slides.eq(i).css("background-image", "url("+$slides.eq(i).attr("data-background")+")");
//alert($slides.eq(i).attr("data-background"));
};
};
$container.find('.page').bind('click',function(){
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('.page');
$slides.eq(0).css('opacity', 1);
$pagers.eq(0).addClass('active');
activeSlide = 0;
waitForNext();
});
}
};
$.fn.easyFader = function(settings){
return methods.init.apply(this, arguments);
};
})(jQuery);
Thanks in advance
Having had a look at your gallery.js file you have the following function that is called on your fade transition: cleanUp()
In this function you remove the style attribute from your $slides:
$slides.eq(activeNdx).removeAttr('style');
Which is removing the background-image style too. This is then never set again.
After the above line where you remove the styles you may want to then include:
$slides.eq(activeNdx).css("background-image", "url("+$slides.eq(activeNdx).data("background")+")");
Here is the jsfiddle demo.
I am trying to animate the tabs in my carousel synchronously, i.e. they all should slide left/right together. However, as you will notice from the demo, sometimes they do, othertimes they don't.
Could someone please point out where I am going wrong? Im not just looking for the correct code but logic & explanation please.
Ive tried to comments the code as much as I can so that its easier to follow & pinpoint the problem. The line that has the 'animate' code has the comment: // ***** NOTE -- THIS IS THE LINE THATS ANIMATING THE TABS TO SCROLL RIGHT *****
Code:
var eLeftScrollButton = document.getElementById("t_l_nav");
var eRightScrollButton = document.getElementById("t_r_nav");
var eArrowForTabs = document.getElementById("arrow");
var iActiveNo = 0; //var. for storing the active tab. no.
var iTabSlideNo = 0;
var iTabWidth = 147; // a tab's width
var eTabsDiv = document.getElementById("tabs");
var iTabsCount = eTabsDiv.childNodes.length; //tabs count
var bClickable = true; // bool whether left & right buttons are clickable or not
var iButtonsPage = 1; // button page no.
var iStonesPage = 1; // stones page no.
var iRibbonsPage = 1; // ribbons page no.
var iLacesPage = 1; // laces page no.
var iPipingPage = 1; // laces page no.
displayTabNo_onstart();
/* ---------- displaying the current tab, hiding the other non-current tabs ---------- */
function displayTabNo_onstart()
{
for ( var i = 0; i < iTabsCount; i++)
{
if (i === iActiveNo)
{
eTabsDiv.children[i].style.color = "black";
eTabsDiv.children[i].style.fontWeight = "bold";
} else
{
eTabsDiv.children[i].style.opacity = "0.2";
eTabsDiv.children[i].style.fontWeight = "normal";
}
}
}
/* ---------- activate the button, ribbons etc based on what tab is active right now, & hide others ---------- */
function activateFeaturesContainer (direction)
{
var eFeaturesContainerDiv = document.getElementById("features");
eFeaturesContainerDiv.children[iActiveNo].style.display = "block";
(direction === "right") ? ((eFeaturesContainerDiv.children[iActiveNo - 1].style.display = "none") & (bClickable = true)) : ((eFeaturesContainerDiv.children[iActiveNo + 1].style.display = "none") & (bClickable = true));
}
/* ---------- called when the right button for tabs is pressed, calls the below two 'right' functions ---------- */
function pressRightButton ()
{
if (bClickable === true)
{
bClickable = false;
pressRightButtonEffect();
activateRightTab();
} else {
return;
}
}
/* ---------- called when the left button for tabs is pressed, calls the below two 'left' functions ---------- */
function pressLeftButton ()
{
if (bClickable === true)
{
bClickable = false;
pressLeftButtonEffect();
activateLeftTab();
} else {
return;
}
}
/* ---------- effect on right button when pressed ---------- */
function pressRightButtonEffect()
{
eRightScrollButton.style.top = "29px";
window.setTimeout(function()
{
var eStyle = window.getComputedStyle(eRightScrollButton);
var pBackgroundColorProperty = eStyle.backgroundColor; // getting the CSS backgroundColor
eRightScrollButton.style.top = "28px";
}, 150);
}
/* ---------- effect on left button when pressed ---------- */
function pressLeftButtonEffect()
{
eLeftScrollButton.style.top = "29px";
window.setTimeout(function()
{
var eStyle = window.getComputedStyle(eLeftScrollButton);
var pBackgroundColorProperty = eStyle.backgroundColor; // getting the CSS backgroundColor
eLeftScrollButton.style.top = "28px";
}, 150);
}
/* ---------- tabs indicator, tabs & other animations on right button when pressed ---------- */
function activateRightTab()
{
var direction = "right";
if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
{
iActiveNo = iActiveNo + 1;
(iActiveNo > 0) ? eLeftScrollButton.childNodes[0].setAttribute("src", "Img/WA03_Container_LeftScrollButton_Active.png") : false; //reinstate leftScrollbutton to active
(iTabSlideNo < iTabsCount - 1) ? iTabSlideNo++ : iTabSlideNo;
// ***** NOTE -- THIS IS THE LINE THATS ANIMATING THE TABS TO SCROLL RIGHT *****
$(".c_tabs").animate ({"right": ("+=147px")}, 500, "swing", function()
{
$(eTabsDiv.childNodes[iActiveNo]).animate ({"opacity" : "1"}, 191,"linear");
$(eTabsDiv.childNodes[iActiveNo - 1]).animate ({"opacity" : "0.2"}, 191,"linear");
});
window.setTimeout (function ()
{
eTabsDiv.childNodes[iActiveNo].style.fontWeight = "bold";
eTabsDiv.childNodes[iActiveNo-1].style.fontWeight = "normal";
},500);
$(eArrowForTabs).animate ({"top" : "69px"}, 191, "linear", function()
{
window.setTimeout (function()
{ $(eArrowForTabs).animate ({"top" : "55px"}, 191, "linear"); }, 75);
});
(iTabSlideNo + 1 === iTabsCount) ? eRightScrollButton.childNodes[0].setAttribute ("src", "Img/WA02_Container_RightScrollButton_Passive.png"):false;
window.setTimeout (function() {activateFeaturesContainer(direction);}, 600);
} else {
bClickable = true;
} // close -> first if statement of this function
if (iActiveNo === iTabsCount - 1 && eRightScrollButton.childNodes[0].getAttribute("src") === "Img/WA02_Container_RightScrollButton_Passive.png") //springy effect on last tab
{
$(eTabsDiv.childNodes[iActiveNo]).animate({"right" : (((iTabSlideNo * iTabWidth) + 10) + "px")}, 100).animate({"right" : (((iTabSlideNo * iTabWidth) - 5) + "px")}, 45).animate({"right" : (((iTabSlideNo * iTabWidth) + 0) + "px")}, 10);
} // close -> springy effect if statement
} // close -> activateRightTab function
/* ---------- tabs indicator, tabs & other animations on left button when pressed ---------- */
function activateLeftTab()
{
var direction = "left";
if (iActiveNo <= iTabsCount -1 && iActiveNo > 0) //because length doesn't count 0 & we are substracting 1 below
{
iActiveNo = iActiveNo - 1;
(iActiveNo < iTabsCount - 1) ? eRightScrollButton.childNodes[0].setAttribute("src", "Img/WA01_Container_RightScrollButton_Active.png") : false; (iTabSlideNo > 0) ? iTabSlideNo-- : false;
$(".c_tabs").animate ({"right": ("-=147px")}, 500, "linear", function()
{
$(eTabsDiv.childNodes[iActiveNo]).animate ({"opacity" : "1"}, 250,"linear");
$(eTabsDiv.childNodes[iActiveNo + 1]).animate ({"opacity" : "0.2"}, 250,"linear");
});
window.setTimeout ( function ()
{
eTabsDiv.childNodes[iActiveNo].style.fontWeight = "bold";
eTabsDiv.childNodes[iActiveNo-1].style.fontWeight = "normal";
},500);
$(eArrowForTabs).animate ({"top" : "69px"}, 191, "linear", function()
{
window.setTimeout( function()
{ $(eArrowForTabs).animate ({"top" : "55px"}, 191, "linear"); }, 75);
});
(iTabSlideNo === 0) ? eLeftScrollButton.childNodes[0].setAttribute ("src", "Img/WA04_Container_LeftScrollButton_Passive.png") : false;
window.setTimeout( function() {activateFeaturesContainer(direction)}, 600);
} else { // close -> first if statement of this function
bClickable = true;
}
if (iActiveNo === 0 && eLeftScrollButton.childNodes[0].getAttribute("src") === "Img/WA04_Container_LeftScrollButton_Passive.png") //springy effect on last tab
{
$(eTabsDiv.childNodes[iActiveNo]).animate({"right" : (((iTabSlideNo * iTabWidth) - 10) + "px")}, 100).animate({"right" : (((iTabSlideNo * iTabWidth) + 5) + "px")}, 45).animate({"right" : (((iTabSlideNo * iTabWidth) + 0) + "px")}, 10);
} // close -> springy effect if statement
} // close -> activateRightTab function
i would like to make image slideshow.
First, i would have just thumbnails and when clicked on the one, it would pop up overlay(some sort of div, or something) and there would be option to move through the images. I don't want to use anykind of libraries
i have this, so far:
NewImg = new Array (
"img/1gif",
"img/2gif",
"img/3gif"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
html part
Previous
Auto/Stop
Next
this is the regular image gallery. With regular sized images.
I don't know how to implement those thumbnails
thank for helping me around here
i forgot, i have
used following code for overlays(but don't know how to implement it here)
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById )
{
elem = document.getElementById( whichLayer );
}
vis = elem.style;
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
http://jsfiddle.net/sevdah/z7Ggx/1/ on jsfiddle, but it is not working, don't know why