I wonder if anyone can help or point me in the right direction.
I have a grid of images. What I'm hoping to do is grab all the images on the page and put them in an array(done). Then every 3 seconds I want to to randomly choose an image, fade it out and fade in another image from the same page.
can someone help me with this?
I've got a nice script I made once, it does use jquery though:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var curIndex = 0;
var src = ['imgs/derp.jpg', 'imgs/derp2.png'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;
$(document).ready(function(){
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2){
if(fadeOut2){
setTimeout(fadeOut, waitTimeInMilliseconds);
}else{
var index = Math.floor((Math.random()*src.length))
if(curIndex == index){
index++;
if(index >= src.length){
index-=2;
}
}
curIndex = index;
$("#swekker").attr("src", src[index]);
fadeIn();
}
}
function fadeOut(){
$("#swekker").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}
function fadeIn(){
$("#swekker").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}
</script>
It's a jquery script script that continuously fades in, waits and fades out again.
To use this script simply add it to an image:
<img width="602" height="400" src="imgs/derp.jpg" id="swekker"/>
Related
I have 2 images. My intention is when the image finished display, and finished fade in, I will load some function.
My question
How do I make sure my image is fully loaded and displayed on screen?
I ask because sometimes, when the image is still loading (like only half the image is showing), it will fade in somehow, I need make sure it shows the full image before fading in.
FIDDLE
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img");
//hide the image , in order to use fadein
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function() {
console.log("finish load all image");
if (i == lis.length - 1) {
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});
You can substitute css display:none for .hide(), .ready() , .promise()
css
.area1 img {
display:none;
}
javascript
$(document).ready(function() {
var temp = "";
var displaythumbnailbox = $(".area1");
var lis = $(".area1 img") //.hide()
.each(function(i) {
$(this).fadeIn("fast", function() {
console.log("finish load all image");
});
});
lis.promise().then(function() {
alert("finish display the last image");
})
})
jsfiddle https://jsfiddle.net/88ft369z/3/
If you want to display images in sequence you can substitute i multiplied by a duration, e.g., i * 250 at .each() for "fast" jsfiddle https://jsfiddle.net/88ft369z/4/
You can check if the element is loaded using .load().
var lis = $(".area1 img");
lis.load(function(){
lis.hide();
lis.each(function(i) {
$(this).fadeIn('fast', function(){
console.log("finish load all image");
if(i == lis.length -1)
{
//getting last image display.
alert("finish display the last image");
//going to put some function here.
}
});
});
I am building a image carousel with fade in/out animation with javascript and jquery.
Before the next images fades in, the current image shows up briefly although it's faded out. This happens even though I use onload to make sure the next image is loaded and sized properly.
(The live code is: www.jbkphotographs.com/nepal.html)
function moveToNextImg(){
if(current === imgArray.length-1){
current = 0;
}
else{
current++;
}
updateIndex();
//#imgWrapper is <div> that contains <img>
$("#imgWrapper").fadeOut("slow",loadImg);
}
function loadImg(){
imgName = imgArray[current].getAttribute("src");
nextImg.src = imgName.replace("_Thumb","");
nextImg.id = "currentImg";
nextImg.onload = function(){
if((nextImg.height) > (nextImg.width)){
nextImg.style.width = "42.5%"
}
else{
nextImg.style.width = '750px';
}
imgWrapper.appendChild(nextImg);
}
$("#imgWrapper").fadeIn("slow");
}
I saw it. You have that effects befause you are fading in the image before it has been loaded.
a) You should preload the images , before sliding to have the fadein
fadeout effect
b) Otherwise put the fade in effect in the onload
callback of the images:
function moveToNextImg(){
if(current === imgArray.length-1){
current = 0;
} else {
current++;
}
updateIndex();
//#imgWrapper is <div> that contains <img>
$("#imgWrapper").fadeOut("slow",loadImg);
}
function loadImg(){
imgName = imgArray[current].getAttribute("src");
nextImg.src = imgName.replace("_Thumb","");
nextImg.id = "currentImg";
//This code will run only when images will be loaded
nextImg.onload = function(){
if((nextImg.height) > (nextImg.width)){
nextImg.style.width = "42.5%"
}
else{
nextImg.style.width = '750px';
}
imgWrapper.appendChild(nextImg);
$("#imgWrapper").fadeIn("slow");
}
//any code here will run immediately before the onload runs
}
I have some code set up to fade between images, and it's not working properly:
The images:
<div id="banner_area">
<img class="active" src= "http://f14.co/automaker-search/assets/images/laptop-Dodge.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Ford.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Honda.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Subaru.png">
</div>
The javascript:
<script>
function cycleImages(){
var $active = $('#banner_area .active');
var $next = ($('#banner_area .active').next().length > 0) ? $('#banner_area .active').next() : $('#banner_area img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){
//fade out the top image
$active.css('z-index',1).show().removeClass('active');
//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(window).load(function(){
$('#banner_area').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})</script>
The CSS:
#banner_area img { width:714px; height:414px; position:absolute; top:28px; left:55px;top:0;z-index:1}
#banner_area img.active{z-index:3}
Yet all I get is a pile of images, like so: http://f14.co/automaker-search/reno/
I'm guessing I'm way off? I'm really trying to keep it simple. No hover, just an auto rotate.
I would do it like this:
function cycleImages(){
var images = $('#banner_area img'),
now = images.filter(':visible'),
next = now.next().length ? now.next() : images.first(),
speed = 1500;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function() {
setInterval(cycleImages, 7000);
});
FIDDLE
You appear to have a syntax error in the code that is on the page, if you replace the cycleImages function with the one you have above it should start to work.
As an aside, I would write the interval as simply setInterval( cycleImages, 7000 ), and hide any images that are not currently being shown (they seem to "poke out" in the background).
We had some fun accomplishing this with a NodeList:
var nodes = document.querySelectorAll('#banner_area img');
var count = nodes.length;
setInterval(function() {
count -= 1;
if (count > 0) {
$(nodes[count]).fadeOut(1500);
}
else {
count = nodes.length;
$(nodes[count - 1]).fadeIn(1500, function() {
$(nodes).fadeIn(100); // arbitrary speed to outpace next transition
});
}
}, 7000);
:)
I need, that some images (for example random 5 - 8 of them) on background will automatically change for another one image (for example after 10 sec, something like that example-link but automatically, not on hover).
$('.fader').hover(function() {
$(this).find("img").fadeToggle();
});
I made a JSFiddle DEMO.. Maybe it helps you.
It's pretty simple, that's the function that I execute in setInterval
var $imgs = $(".fader").find("img"),
i = 0;
function changeImage(){
var next = (++i % $imgs.length);
$($imgs.get(next - 1)).fadeOut(500);
$($imgs.get(next)).fadeIn(500);
}
var interval = setInterval(changeImage, 2000);
Hope it help..
You can use setInterval to run a function every so often, then inside it have your image changing function
//global variable
var bgImg = 1;
//runs every second
window.setInterval(function(){
yourFunction();
}, 10000);
//changes background image
function yourFunction () {
++bgImg;
if(bgImg === 4){
bgImg = 1;
}
if(bgImg === 1){
$('#element').css("background-image","URL('imgs/image1.jpg')");
}
if(bgImg === 2){
$('#element').css("background-image","URL('imgs/image3.jpg')");
}
if(bgImg === 3){
$('#element').css("background-image","URL('imgs/image3.jpg')");
}
}
You can always add some more jquery to fade the image in out or something smoother than a plain switch
is this what you want?
Use BX slider.
http://jsfiddle.net/writetobhuwan/Xm2Be/393/
JS is as simple as this..
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I am using javascript for a rotating background image. The problem is, every time the image changes, the page jumps to the top. Hopefully this is an easy fix!
Here is my code:
<script type='text/javascript'>
$(window).load(function(){
var initialBg = $('#slider').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(/wp-content/uploads/2013/03/slider2-explore.png)", "url(/wp- content/uploads/2013/03/slider3-experience.png)"];
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#slider").fadeOut("slow", function(){
$('#slider').css('background-image', bgImage);
});
$("#slider").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 4500);
})(0);
});
</script>
Your page jumps because for an instant #slider is absent and the other page content collapses into its space. Try this:
#slider_wrapper {
height: 550px;
}
<div id="slider_wrapper">
<div id="slider"></div>
</div>
You may also want to preload your background images to prevent odd fadeIn delays.