I need help in improving the script for my background image slideshow.
I managed to create a fade in effect with .fadeIn(600) JS function. But, I want the images to switch between each other, not between white background.
In other words, I need to smooth up the transition between images.
Note that each image has a caption, but I'm OK with it as it is. I don't need any transitions for text.
JSFiddle http://jsfiddle.net/newsha/B4TXj/
var timer;
$(document).ready(function () {
// background image on load
var numberImages = 4
var images = [];
for (var i = 1; i <= numberImages; i++) {
images.push(i);
}
var imgValue = 1
$('.backgroundImage').addClass('bg' + imgValue + '');
// Switch background image - forwards
$('.imgSwitchRight').click(function () {
$('.backgroundImage').each(function (e) {
$(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
});
clearTimeout(timer);
timer = setTimeout(function () {
$('.imgSwitchRight').click();
}, 8000);
if (imgValue < numberImages) {
imgValue++
} else {
imgValue = 1
}
$('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);
});
clearTimeout(timer);
timer = setTimeout(function () {
$('.imgSwitchRight').click();
}, 8000);
// Switch background - backwards
$('.imgSwitchLeft').click(function () {
$('.backgroundImage').each(function (e) {
$(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
});
clearTimeout(timer);
timer = setTimeout(function () {
$('.imgSwitchRight').click();
}, 8000);
if (imgValue > 1) {
imgValue--
} else {
imgValue = numberImages
}
$('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);
});
clearTimeout(timer);
timer = setTimeout(function () {
$('.imgSwitchRight').click();
}, 8000);
});
I just used a secound div aas a swapping plane. the visible div is now fading out while the invisible one is fading in. after that the roles are switched and it goes on and on.. one problem still remains. if switching the images too fast the classes "stack" because the animation of the fading div is interrupted and the class will not be removed.. Problem solved..
var timer;
$(document).ready(function () {
// background image on load
var numberImages = 5,
easetime = 2000,
changetimeout = 5000;
var images = [];
for (var i = 1; i <= numberImages; i++) {
images.push(i);
}
var imgValue = 1;
var visibleBackground = $('.backgroundImage.a');
var invisibleBackground = $('.backgroundImage.b');
$('.backgroundImage').hide();
visibleBackground.addClass('bg' + imgValue + '').show();
var dir = 1;
function changeBG(){
oldValue = imgValue;
imgValue = (imgValue+dir)%numberImages;
$('.rotating-text'+imgValue).fadeIn(easetime);
$('.rotating-text'+oldValue).fadeOut(easetime);
clearTimeout(timer);
timer = setTimeout(function () {
changeBG();
}, changetimeout);
visibleBackground.fadeOut(easetime);
setTimeout(function(){
var tmpBackground = visibleBackground, tmpVal = oldValue;
return function(){
tmpBackground.removeClass('bg' + tmpVal)
}
}(), easetime);
invisibleBackground.addClass('bg' + imgValue + '').fadeIn(easetime);
var swap = visibleBackground;
visibleBackground = invisibleBackground;
invisibleBackground = swap;
}
// Switch background image - forwards
$('.imgSwitchRight').click(function () {
dir = 1;
changeBG()
});
// Switch background - backwards
$('.imgSwitchLeft').click(function () {
dir = -1;
changeBG()
});
timer = setTimeout(function () {
changeBG();
}, changetimeout);
});
http://jsfiddle.net/B4TXj/11/
Related
I have style id like this
#Myimage {
width: 797px;
height: 317px;
background:url(images/templatemo_header_pizza.jpg) no-repeat;
And I want to change the picture every 5 sec.
I am new to JavaScript and jQuery but the main idea something like this
function ()
{
ImageArray = LoadImage("Baseimage/*.jpg")
while(true)
{
For(i in ImageArray)
{
Myimage.background:url = i;
waitfor(5);
}
}
}
var imgArray = ["image1.jpg","image2.jpg"];
var counter = 0;
function changeImages() {
counter++;
$("#MyImage").css("background-image",'url(' +imgArray[counter] + ')')
if(counter == 1) {
counter = -1;
}
}
setInterval(changeImages,5000)
Attach a Jquery lib. and past that JQuery script in you head section:
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#Myimage');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
You can use Image to check if the image exists:
$(function () {
var base = "myImage_*.jpg", img, c = 0, ar = [], o = 0;
function recurse () {
img = new Image();
img.src = base.replace('*', ++c);
img.onload = function () {
ar.push(img.src);
recurse();
}
img.onerror = function () {
c = -1;
function r() {
$("yourElement").css("background-image", "url("+ar[c++ >= ar.length ? (c=0) : c]+")");
setTimeout(r, 2000); // 2000 is two seconds
}
}
}
});
I am using the following jquery code to create a slow scrolling animation.
http://jsfiddle.net/fhj45f21/
Unfortunately I am having difficulties pausing the animation on mouse over. Could someone please have a look and give me a hint?
function Scroller(y){
this.times = 0;
this.moveInter = 0;
this.backInter = 0;
this.moveBack = function () {
var self = this;
clearInterval(this.moveInter);
this.backInter = setInterval(function () {
self.times -= 5;
y.scrollTop(self.times);
if (self.times == 0) {
return self.startMove();
}
}, 1);
}
this.move = function() {
var self = this;
this.moveInter = setInterval(function () {
self.times++;
y.scrollTop(self.times);
if (self.times == 1200) {
return self.moveBack();
}
}, 50);
}
this.startMove = function() {
this.times = 0;
var self = this;
if (this.backInter != null) {
clearInterval(this.backInter);
}
window.setTimeout(function () {
self.move();
}, 1000);
}
}
jQuery('.textBox').each(function () {
y = jQuery(this);
var scroller = new Scroller(y);
scroller.startMove();
});
Thanks a bunch!
Here you go: http://jsfiddle.net/nxk4vseq/
add an y.hover handler with functions for mousein and mouseout
var scrl=this;
y.hover(function(){
clearInterval(scrl.moveInter);
},function(){
scrl.move();
});
Trying to get this image to scroll through images on hover but its not work. Live demo at: http://codepen.io/bskousen/pen/Ksphr
Using jquery
script:
$(document).ready(function() {
$('.imageBox').hover(startScroll, stopScroll);
});
var scrollInterval;
var i = 2;
function startScroll() {
scrollInterval = setInterval(scrollImages(this), 100);
}
function stopScroll() {
i = 2;
$(this).children('img').fadeOut();
$(this).children('img:nth-child(1)').fadeIn();
clearInterval(scrollInterval);
}
function scrollImages(x) {
$('#count').append('running' + i + ' ');
var imageCount = $(x).children('img').length;
$(x).children('img').fadeOut();
$(x).children('img:nth-child(' + i + ')').fadeIn();
if (i == imageCount) {
i = 2;
}
else {
i++;
}
}
The setInterval is not formatted correctly. Try this:
function startScroll() {
me = this;
scrollInterval = setInterval(function(){
scrollImages(me);
}, 100);
}
I have an image preloading script which is slightly modified version of this one form nettuts : http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
The problem I am having is that the preload background gif isnt working on images that are floated?
// JavaScript Document
$.fn.preloader = function(options){
var defaults = {
delay:20000,
preload_parent:"span",
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:500
};
// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
init = function(){
timer = setInterval(function(){
if(counter>=checkFlag.length)
{
clearInterval(timer);
options.ondone();
return;
}
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
if(checkFlag[i]==false)
{
checkFlag[i] = true;
options.oneachload(images[i]);
counter++;
delaySum = delaySum + options.delay;
}
$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
function(){ $(this).parent().removeClass("preloader"); });
}
}
},options.check_timer)
} ;
images.each(function(){
if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<span class='preloader' />");
else
$(this).parent().addClass("preloader");
checkFlag[i++] = false;
});
images = $.makeArray(images);
var icon = jQuery("<img />",{
id : 'loadingicon' ,
src : 'css/i/89.gif'
}).hide().appendTo("body");
timer = setInterval(function(){
if(icon[0].complete==true)
{
clearInterval(timer);
init();
icon.remove();
return;
}
},100);
}
$(function () {
$("#righthalf").preloader();
$("#portright").preloader();
$("#timeline").preloader();
$("#type").preloader();
})
Any ideas guys?
Hi I have wrote this code and it suppose to move the object every 3000 ms after clicking on the object, but some how the time its not working, can anyone tell me what I am doing wrong, I am just learning javascript; thank you very much
function move1() {
var im1 = document.images[0];
im1.onclick = function() {
im1.style.left = parseInt(im1.style.left) + 1 + "px";
}
}
function move2() {
var im2 = document.images[1];
im2.onclick = function() {
im2.style.left = parseInt(im2.style.left) + 10 + "px";
}
}
window.onload = function() {
setInterval(move1, 100);
setInterval(move2, 3000);
}
You're doing it the other way round. Every 3000ms you make it possible to move the image by 1px when clicking on it.
function move(el, ms, px) {
/* moves the el every ms by px
returns the interval id to clear the movement */
return setInterval(function() {
el.style.left = parseInt(el.style.left) + px + "px";
}, ms);
}
window.onload = function() {
var im0 = document.images[0];
var im1 = document.images[1];
im0.onclick = function() {
move(im0, 100, 1);
};
im1.onclick = function() {
move(im1, 3000, 10);
};
}
Your move function registers the image on click, but doesn't actually do any moving until the user clicks. What you want is more like this:
function move1() {
var im1 = document.images[0];
im1.style.left = parseInt(im1.style.left) + 1 + "px";
}
function move2() {
var im2 = document.images[1];
im2.style.left = parseInt(im2.style.left) + 10 + "px";
}
window.onload = function() {
var im2 = document.images[1];
im2.onclick = function() {
setInterval(move2, 3000);
}
im1.onclick = function() {
setInterval(move1, 100);
}
}