I made a slider with two images and i got it to change after a certain amount of seconds but i want it to return to the original image afterwards and not just stop.
jsfiddle - http://jsfiddle.net/bsu31hso/4/
<article>
<div class="slider">
<img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner">
<img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner ">
</div>
</article>
<script type="text/javascript">
$(document).ready(function(){
$("#pic1").show(function(){
$("#pic1").fadeOut(5000);
$("#pic2").fadeIn();
});
});
</script>
Few Points :
1) what you did is not a slider.. doesn't go with the definition
if you want to make a slider user jQuery animate() with horizontal sliding
2) to slide images use setInterval() with desired time interval
3) one basic way is to use circular array to continue traversing in the same values over and over again
4) use is(":visible") check on each array element containing the id of each image which will help in detecting if it is visible and it has been selected time since then then increase the index of array for the next image to show by sliding it using animate()
hope you understood!
Here I have done code for you
DEMO
Related
I am running three photos in a js slideshow function, and I'm wondering if it's possible to have the first image in the slideshow display only when the side is FIRST loaded, but not when an user navigates to other pages in the site. If possible, I would like subsequent page loads to begin at the second or third image in the slideshow.
$(document).ready(function(){
$(function () {
setTimeout(playSlideShow, 6400);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 6400);
}
if (!$(currImgContainer).hasClass('secImg')) {
setTimeout(playSlideShow, 4500);
}
}
});
});
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
Storing data in the browser from previous page loads is pretty complicated and time consuming for a task like this.
Another option would be to set the carousel to display a different image based on which page it's being loaded on.
First, you can add a data attribute to a consistent element in each of your pages like this:
<body data-slideNum="2">
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="img1.gif" />
</div>
<div class="secImg">
<img src="img2.gif" />
</div>
<div class="lastImg">
<img src="img3.gif"/>
</div>
</div>
</body>
The, you can write some javascript to check that attribute on page load and set the carousel image number accordingly. Something like this:
var startingSlide = $('body').attr('data-slideNum');
Which, in this case would set 'startingSlide' equal to '2'.
Maybe you could use jQuery Cookie.
https://github.com/carhartl/jquery-cookie
On page load, check if the cookie is set, if not display the image and set it, if it is set don't do anything (assuming image is hidden by default).
Something like this:
if($.cookie('image') == undefined)
$('#image').show();
$.cookie('image', 'shown');
}
I have two images layered over each other so I can modify different parts of the same picture independently:
<div id="box">
<div class="woof"><img data-caman="saturation(0) brightness(0) hue(50)" src="charm1.png" /></div>
<div class="woof"><img data-caman="saturation(0) brightness(0) hue(50)" src="charm2.png" /></div>
</div>
<div id="button2">data caman tho?</div>
This successfully outputs both images with changed hues, as elements like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAABv0lEQVR4Xu3WsVHDQBgF4XOm0CGhSnAZhIQqhRIIKUMlUAYlKCR0eJmYky1hGCeevWNG/6xjnrE/70k6JF9I4IDWjpOAMAIBBYQCcG6BAkIBOLdAAaEAnFuggFAAzi1QQCgA5xYoIBSAcwsUEArAuQUKCAXg3AIFhAJwboECQgE4t0ABoQCcW6CAUADOLVBAKADnFiggFIBzCxQQCsC5Be4NsDvlOX92YX64f/0i0fBKvO0BX85zN3XLQcmvXykNffv/CY/lI/N2X+YGLipeuwLHae7eni7V9TmVAiPW1w7wWl9BK5BR8doA3tZXrnnrK9i1b/1ada+B9/DGY0rDebt5RLsTNwNcbxzbEQ5aYj3Am/r+PgYs18DyCniMmwFud98+/zrCjzxj7eFvqwKm8bg8stw9vgHrq38Xvh7jfHq/xPM8hD26be7C5V3HaU4f4w9g0PLaAe7hwlXxM9a7Blb8UHt6KwHhryWggFAAzi1QQCgA5xYoIBSAcwsUEArAuQUKCAXg3AIFhAJwboECQgE4t0ABoQCcW6CAUADOLVBAKADnFiggFIBzCxQQCsC5BQoIBeDcAgWEAnBugRDwGy8ZZlHkQI3kAAAAAElFTkSuQmCC" width="80" height="80">
...but when "button2" is clicked, this:
<script>
$(document).ready(function() {
$( '#button2' ).click(function() {
$(".woof").first().html('<img data-caman="saturation(0) brightness(0) hue(70)" src="charm1.png" />');
});
});
</script>
only literally changes the attribute to data-caman="saturation(0) brightness(0) hue(70)". It's not parsed by CamanJS, and it just displays the original image.
I would like to click button2, have the function generate a number in the appropriate range and reset the image's hue, and be able to repeat this without having to refresh the page for the process -- otherwise, I could just generate the hue value with PHP each time the page loads.
How can I actually change the values, using the function? If it's not possible, what would be a good alternative to accomplish what I am trying to do?
I have three images 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img> the width , Height & position of this image is set as required & working fine. I have applied JQUERY fade property to toggle between the above images & its also working fine.
But I want precisely that the images change in sliding fashion, i.e. 1.jpg slides left and vanishes and drags in 2.jpg in its position & so on continues in specific interval.
Hope I am clear...
Regards.
Yhank You everyone for your efforts, But , I configured it myself... Here is how it worked:
index.html:
<html>
<head>
<script src="jquery.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div >
<img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
</div>
</body>
</html>
slide.js
$("document").ready(function(){
var img_l=$("#pic1");
var img_r=$("#pic2");
setInterval(function(){
img_l.animate({width:'160px'},1000);; //animating the image t colapse
img_r.animate({width:'0px'},1000);; //animating the image t expand
var temp_var=img_l; //swaping values to revert previous action
img_l=img_r;
img_r=temp_var;
},3000); //repeating the effect every 3 seconds
});
This is doing well with my requirements and has exactly same behaviour within all leading browsers...
Thanks.
Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/