I'm working on a web project that has a changing background image every few seconds. Problem is I don't know how to get the first image to return after all images are finished rotating. After the third image the screen goes white.
html :
<section class="slideshow">
<img src="img/img1.png" class="bgM show"/>
<img src="img/img2.png" class="bgM"/>
<img src="img/img3.jpg" class="bgM"/>
</section>
javascript
function switch() {
var $active = $('.slideshow IMG.show');
var $next = $active.next();
var $images = new Array();
var $length = $images.length;
$next.addClass('show');
$active.removeClass('show');
if ($images[$length].hasClass('show')) {
$images[0].addClass('show');
}
}
$(function() {
setInterval( "switch()", 8000 );
});
jsFiddle Demo
No need for the extra code. Just use an iterator with mod for the set of image elements.
$(function() {
var slide = $(".slideshow"), cur = 0;
setInterval(function(){
$('.show',slide).removeClass('show');
$('img',slide).eq((++cur)%3).addClass('show');
}, 1000 );//using 1000 just for demo purposes
});
.slideshow img.show{
border:2px solid red;
display:block;
}
.slideshow img{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideshow">
<img src="http://placehold.it/350x150" class="bgM show"/>
<img src="http://placehold.it/250x150" class="bgM"/>
<img src="http://placehold.it/150x150" class="bgM"/>
</section>
The first major issue is that your function switch is a reserved word (ie choose another name [I chose switch_images]).
Next you can check to see if the "next" image exists (.length). If it doesn't then set it to the first image in the slideshow:
<section class="slideshow">
<img src="img/img1.png" class="bgM show"/>
<img src="img/img2.png" class="bgM"/>
<img src="img/img3.jpg" class="bgM"/>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function switch_images() {
var $active = $('.slideshow IMG.show');
var $next = $active.next();
if(!$next.length){
$next = $('.slideshow IMG:first');
}
$active.removeClass('show');
$next.addClass('show');
}
$(function() {
setInterval( "switch_images()", 8000 );
});
</script>
Related
i have how many images in gallery that when click on the any image,image displayed on the other bigger img tag.i would like to implement a previous and next button that i could movement between images.i think could use next() method in javascript and i found below Example but i'm beginner in js and i could not dose this work.
<script>
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
$('.slideshow a').onclick(function () {
var src=$('a img').attr("src");
$('#bigImage img').attr("src",src);
});
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
</script>
<div class="slideshow">
<img src="first-image.jpg" width="150" height="150" alt="first image">
<img src="second-image.jpg" width="150" height="150" alt="second image">
<img src="third-image.jpg" width="150" height="150" alt="third image">
<img src="fourth-image.jpg" width="150" height="150" alt="fourth image">
...
</div>
<button type="button" Id="prev">Previous</button>
<button type="button" Id="next">Next</button>
<div id="bigImage">
<img src="#" width="800" height="600" alt="Big Image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
Please Guide Me!
thanks!
I want to change many elements (figcaption) dimensions to img dimensions with jquery
plz help me
var width = $("div[caption='true'] img").attr("width");
var height = $("div[caption='true'] img").attr("height");
$("div[caption='true'] figcaption").css("width",width);
$("div[caption='true'] figcaption").css("height",height);
jsfiddle link
Try this:
$(function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var image = $this.find('img')
var width = image.width();
var height = image.height();
$this.find('figcaption').width(width).height(height);
});
});
jsFiddle: http://jsfiddle.net/8ge1wvpt/11/
Your current code is setting each figcaption's height and width to that of the first image. Try this:
$(document).ready( function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var width = $("img", $this).attr("width");
var height = $("img", $this).attr("height");
$("figcaption", $this).css({"height":height, "width":width});
});
});
DEMO
Snippet below:
$(document).ready( function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var width = $("img", $this).attr("width");
var height = $("img", $this).attr("height");
$("figcaption", $this).css({"height":height, "width":width});
});
});
*{margin:0;padding:0;}
.imgs{position:relative;}
figcaption{position:absolute;top:0;
background-color:rgba(0,0,0,0.4);}
figcaption h3{text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="200" height="250" alt=""/>
<figcaption>
<h3>IMGs Caption 1</h3>
</figcaption>
</div>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="100" height="100" alt=""/>
<figcaption>
<h3>IMGs Caption 2</h3>
</figcaption>
</div>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="300" height="200" alt=""/>
<figcaption>
<h3>IMGs Caption 3</h3>
</figcaption>
</div>
You can do it by using a function to fill in the css value:
$(document).ready( function() {
$("img + figcaption")
.css("width",function() { return $(this).prev().attr("width");})
.css("height",function() { return $(this).prev().attr("height"); });
});
This will match any <img> followed by <figcaption> - there is no need for the caption="true" attribute, unless you are using it for something else.
I am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});
Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler 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
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});
I made a simple slideshow on my website and would now like to animate it. I just want the images to fade into one another. I would prefer not to use jQuery, as this is probably the only js I will need on my website. jQuery would be okay though, if it is necessary.
Preloading the images (in website head)
<!--
var image1=new Image;image1.src="images/referenzen/besten-weine.jpg";var image2=new Image;image2.src="images/referenzen/pixelization.jpg";var image3=new Image;image3.src="images/referenzen/immo-buerk.jpg"
//-->
Code in slideshow position (image src is then changed by the script)
<img src="images/referenzen/besten-weine.jpg" name="slide" width="445px" height="300px">
<script type="text/javascript">
<!--
var step=1
//a variable that will keep track of the image currently being displayed.
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="#weine"
else if (whichimage==2)
window.location="#mc"
else if (whichimage==3)
window.location="#immo"
}
//-->
</script>
I can do some CSS animations but am new to javascript.
Assuming this HTML:
<div class="slideshow">
<div class="image-front"><img src="photo1.png" /></div>
<div class="image-back"><img src="photo2.png" /></div>
</div>
You can do:
.slideshow .image-front {
transition: .5s;
transition-property: opacity;
}
.slideshow.transition .image-front {
opacity: 0;
}
Then after .5 seconds swap the image in image-back to image-front.
Html:
<div>
<img src="back.png" title="back" id="back">
<img src="next.png" title="next" id="next">
</div>
<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />
Jquery and javascript:
Global Variable:
var actual = 1;
To go to next image:
$('#next').click(function(){
$('img').stop(true, true);
$('#image' + _actual).fadeOut(function(){
actual++;
if(actual > 3){
actual = 1;
}
$('#image' + actual).fadeIn();
});
});
To go to previos image:
$('#back').click(function(){
$('img').stop(true, true);
$('#image' + _actual).fadeOut(function(){
actual--;
if(actual == 0){
actual = 3;
}
$('#image' + actual).fadeIn();
});
});
I just wrote this, haven´t test it, but i think that works.
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");