I have a page that displays several hidden divs when clicking on image-buttons (next and previous). sometimes takes a few seconds for its content to show up correctly, so I had the idea of delaying the functions a bit to "give time" for the content to "prepare". While that time the image exchanges for a gif.
I already started and saw that it works, I got a simple way with tris.src to change the img and setInterval for the delay, direct on my onclick="", but I need the original image to automatically return to the original after 2 or 3 seconds because it can showed again (when clicked on previous button) and should not to be a gif anymore! and don't know how to do this. can you help me?
CSS:
div1, #div2 {width: 100px; height: 100px; background: yellow;position: relative;
next {position: absolute bottom: 20px; left: 20px}
}
HTML & JS:
<div id="div1">
content1
<img src="next.png" id="next" onclick="setTimeout(replace, 1000); this.src='prev.png'">
<input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>
<div id="div2" style="display: none">content2
<img src="next.png" id="next" onclick="setTimeout(replace2, 1000); this.src='prev.png'">
<input type="hidden" value="prev.png" id="hdnPreviousPng" />
</div>
<script>
function replace() {
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="block";
setInterval(function(){
let originalSrc = $('#hdnPreviousPng').val();
$('#next').attr('src', originalSrc);
}, 3000);
}
function replace2() {
document.getElementById("div2").style.display="none";
document.getElementById("div1").style.display="block";
setInterval(function(){
let originalSrc = $('#hdnPreviousPng').val();
$('#next').attr('src', originalSrc);
}, 3000);
}
</script>
You could just use a simple data attribute to store some state and swap in and out image source tags.
Here is an example of how this would work using JavaScript:
function clicked() {
replace();
setTimeout(replace, 1000);
}
function replace() {
var next = document.getElementById("next").getAttribute("data-img-src");
var current = document.getElementById("next").src;
document.getElementById("next").setAttribute("data-img-src", current);
document.getElementById("next").src = next;
}
<div id="div1">
<img id="next" src="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>
If you need to account for multiple clicks and still return to the original image you will need some more state and can try this:
function clicked() {
replace();
setTimeout(replaceOriginal, 1000);
}
function replace() {
var next = document.getElementById("next").getAttribute("data-img-src");
document.getElementById("next").src = next;
}
function replaceOriginal(){
var original = document.getElementById("next").getAttribute("data-img-original");
document.getElementById("next").src = original;
}
<div id="div1">
<img id="next" src="http://via.placeholder.com/100?text=first" data-img-original="http://via.placeholder.com/100?text=first" data-img-src="http://via.placeholder.com/100?text=second" onclick="clicked();">
</div>
I have a small problem with a small jQuery script that my slide images. The script itself works very well, but I would like to add link for each image, already try to place <a href> and the </a> tags on each side of the <img> but it doesn't work.
Here is the html:
<div id="content">
<img src="/images/main_banner01.jpg" border="0">
<img src="/images/main_banner02.jpg" border="0">
<img src="/images/main_banner03.jpg" border="0">
<img src="/images/main_banner04.jpg" border="0">
</div>
Here is the script:
<script language="javascript">
$(function(){
var p=$('#content').responsiveSlides({
height:484, // slides conteiner height
background:'#fff', // background color and color of overlayer to fadeout on init
autoStart:true, // boolean autostart
startDelay:0, // start whit delay
effectInterval:5000, // time to swap photo
effectTransition:1000, // time effect
pagination:[
{
active:true, // activate pagination
inner:true, // pagination inside or aouside slides conteiner
position:'B_L', /*
pagination align:
T_L = top left
T_C = top center
T_R = top right
B_L = bottom left
B_C = bottom center
B_R = bottom right
*/
margin:10, // pagination margin
dotStyle:'', // dot pagination class style
dotStyleHover:'', // dot pagination class hover style
dotStyleDisable:'' // dot pagination class disable style
}
]
});
});
</script>
Here is the jquery:
(function($){
$.fn.responsiveSlides = function(options){
var _this=this;
var _int=null;
var im=' !important';
var settings = $.extend({
img:null,
height:$(_this).height(),
background:'#fff',
loadingClassStyle:'',
autoStart:true,
startDelay:0,
effectInterval:5000,
effectTransition:1000,
pagination:[{active:true, inner:true, position:'B_C', margin:10, dotStyle:'', dotStyleHover:'', dotStyleDisable:''}]
},options);
_this.RS_Start=function(){
_this.RS_Stop();
_int=setInterval(function(){
var n=$('.current',$('.tgtimg',_this)).next('img');
if(n.length==0){
n=$('img:first',$('.tgtimg',_this));
}
_this.RS_ShowPhoto(n);
},settings.effectInterval);
};
_this.RS_Stop=function(){clearInterval(_int); _int=null;}
_this.RS_ShowPhoto=function(next){
$('.current',$('.tgtimg',_this)).fadeOut(settings.effectTransition);
next.fadeIn(settings.effectTransition,function(){
$('.current',$('.tgtimg',_this)).removeClass('current');
$(this).addClass('current');
var std=settings.pagination[0].dotStyleDisable;
if(std!=''){
$('.'+std,$('.pagination',_this)).removeClass(std);
$('div:eq('+$(this).index()+')',$('.pagination',_this)).addClass(std);
}else{
$('div',$('.pagination',_this)).css('opacity',1);
$('div:eq('+$(this).index()+')',$('.pagination',_this)).css('opacity',0.5);
}
if(_int==null&&settings.autoStart){_this.RS_Start();}
});
};
//var overstyle='position:absolute'+im+'; height:100%'+im+'; width:100%'+im+'; text-align:center'+im+'; line-height:'+settings.height+'px'+im+'; z-index:2'+im+'; background:'+settings.background+im+';';
var overstyle='position:absolute; height:100%; width:100%; text-align:center; line-height:'+settings.height+'px; z-index:2; background-color:'+settings.background+';';
if(settings.loadingClassStyle==''){
overstyle+='font-family:Arial'+im+'; ';
if(settings.background.toLowerCase()=='#fff'||settings.background.toLowerCase()=='#ffffff'){
overstyle+='color:#000'+im+';';
}else{
overstyle+='color:#fff'+im+';';
}
}
var tgtstyle='position:absolute'+im+'; height:'+settings.height+'px'+im+'; width:100%'+im+'; background:'+settings.background+im+'; z-index:1'+im+'; overflow:hidden'+im;
$(_this).height(settings.height).prepend('<div class="overslide '+settings.loadingClassStyle+'" style="'+overstyle+'">loading..</div><div class="tgtimg" style="'+tgtstyle+'"></div>');
if(settings.img==null || settings.img==undefined || settings.img=='undefined'){
$('img',_this).appendTo($('.tgtimg',_this));
$('img',$('.tgtimg',_this)).each(function(i,e){
$(this).attr('style','position:absolute; z-index:1; top:0px; left:0px; height:'+settings.height+'px; display:'+((i==0)?'block':'none'))
if(i==0){
$(this).addClass('current');
}
});
}else{
$.each(settings.img,function(i,e){
$('.tgtimg',_this).append('<img src="'+e+'" style="position:absolute; z-index:1; top:0px; left:0px; height:'+settings.height+'px; display:'+((i==0)?'block':'none')+'" class="'+((i==0)?'current':'')+'">');
});
}
$('img',$('.tgtimg',_this)).onImagesLoad(function(){
// every images are loaded. can i init
$(window).resize(function(){
$('img',$('.tgtimg',_this)).each(function(i,e){
var l=-(($(e).width()-$(_this).width())/2);
if($(_this).width()>$(e).width()){
l=($(_this).width()-$(e).width())/2;
}
$(e).css('left',l+'px');
});
}).trigger('resize');
var p=settings.pagination[0];
if(p.active){
var pos=(p.position.substring(0,1)=='T')?'top:'+p.margin+'px; ':'bottom:'+p.margin+'px; ';
pos+=(p.position.substring(2,3)=='L')?'left:'+p.margin+'px; ':(p.position.substring(2,3)=='R')?'right:'+p.margin+'px; ':'left:50%; ';
var elm='';
$('img',$('.tgtimg',_this)).each(function(i,e){elm+='<div'+((p.dotStyle=='')?' style="float:left; height:15px; width:15px; background:#fff; margin-left:2px; cursor:pointer"':' class="'+p.dotStyle+'"')+'></div>';});
$(_this).append('<div class="pagination" style="position:absolute; z-index:10; '+pos+'">'+elm+'</div>');
if(p.position.substring(2,3)=='C'){
$('.pagination',_this).css('margin-left','-'+parseInt($('.pagination',_this).width()/2)+'px');
}else if(p.position.substring(2,3)=='R'){
$('.pagination',_this).css('margin-left','-'+($('.pagination',_this).width()+p.margin)+'px');
}
if(!p.inner){
$('.pagination',_this).css('margin-top',-$('.pagination',_this).height()-(p.margin*2)+'px');
$('.pagination',_this).css('margin-bottom',-$('.pagination',_this).height()-(p.margin*2)+'px');
}
$('div',$('.pagination',_this)).mouseover(function(){
if(p.dotStyleHover!=''){$(this).addClass(p.dotStyleHover);}else{$(this).css('background','#CCC');}
}).mouseout(function(){
if(p.dotStyleHover!=''){$(this).removeClass(p.dotStyleHover);}else{$(this).css('background','#fff');}
}).click(function(){
_this.RS_Stop();
_this.RS_ShowPhoto($('img:eq('+$(this).index()+')',$('.tgtimg',_this)));
});
}
// init transition after delay and remove overlayer whit custom bg color
$('.overslide',_this).delay(settings.startDelay).fadeOut(settings.effectTransition,function(){
if(settings.autoStart){_this.RS_Start();}
$('div:eq(0)',$('.pagination',_this)).css('opacity',0.5);
});
});
return _this;
};
}(jQuery));
Any idea ? Thank you all :)
Try something like this
Create a attribute to store your url for that image, using windows.location navigate to tat page
html:
<div id="content">
<img data-href="/url1" src="/images/main_banner01.jpg" border="0">
<img data-href="/url2" src="/images/main_banner02.jpg" border="0">
<img data-href="/url3" src="/images/main_banner03.jpg" border="0">
<img data-href="/url4" src="/images/main_banner04.jpg" border="0">
</div>
js:
$('#content img').click(function(){
window.location =$(this).attr('data-href');
});
Yes, you can use data-href attribute to each of your image element where you want to target.
<img src="/images/main_banner01.jpg" data-href='#' border="0">
And in js file you need to add following code to target on click event on image
$('#content img').click(function(){
window.location.href = $(this).data('href');
});
So now on click you can target to your data-href attribute of selected image.
Fixed ! (answer below)
I have this animated banner which i include on all the pages. Unfortunately it jumps out of his space when the browser window gets resized.
You can check it out here: http://www.paparashie.nl/woonkans/
Here's the code:
<style>
#banner{
position: relative;
margin-left:-1000px;
height:195px;
width:1000px;
z-index:1;
}
#banner img{position:absolute;z-index:1}
#banner img.active{z-index:4}
<script>
function cycleImages() {
var $active = $('#banner .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#banner 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 2s
setInterval('cycleImages()', 2000);
})
</script>
<div id="banner">
<img src="img/logo.png" style="float:left" />
<img class="active" src="img/banner.png" alt="Banner image" />
<img src="img/banner2.png" alt="Banner image" />
<img src="img/banner3.png" alt="Banner image" />
<img src="img/banner4.png" alt="Banner image" />
</div>
So, i changed the margin to margin:0 auto . Next mistake was that i had the include code-line wrapped in a , this messed up everything so i simply removed it.
Noob problems ...
It looks like you trying to build a responsive website...
Try this as slider:
http://www.woothemes.com/flexslider/
Its easy to use and its responsive.
I am working on a website that the background image will fade from one to another, I have it setup and working about 98%. There is just one little problem. When it first loads and does it's first fade it fades to white and then to the image, instead of fading straight into the next image. After that it work beautifully. This is using jQuery 1.9 and I have jQuery noConflict on since the previous developer coded the sites menu using MooTools.
<html>
<head>
<script src="js/jquery.js">
</script>
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$snext.fadeIn(1500).addClass('active');
$sactive.fadeOut(2000, function(){
});
$sactive.removeClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
</head>
<style>
#myGallery{
position:relative;
width:100%; /* Set your image width */
height:auto; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
width: 100%;
left:0;
}
#myGallery img.active{
display:block;
}
.home-page-rotator{
position:absolute;
width:100%;
z-index:-10;
}
</style>
<body>
<div class="home-page-rotator" id="myGallery">
<img src="images/1.jpg" class="active" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
</body>
</html>
I took out all the content so you can test if you wanted but the is everything that runs the background rotation and fade. Also I have the CSS in a seperate file but for posting to here I just put it inline so you can see the CSS behind the code. Let me know what I should do to fix this?
Moving the remove class method to the function call of the fadeout seems to work better for me (at least in Chrome):
<script>
var $s = jQuery.noConflict();
function swapImages(){
var $sactive = $s('#myGallery .active');
var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');
$sactive.fadeOut(2000, function(){
$sactive.removeClass('active');
});
$snext.fadeIn(1500).addClass('active');
};
$s(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
I ran into this problem a while back and I found the easiest solution was to switch from img elements to using two divs and the background-image css url to display your images. I made a simple slider for that a while back. You're welcome to copy whatever you need from it.
Background slider source
In essence, if you have two divs that are absolutely positioned as the background elements, you can cycle their z-indexes and fade them in and out. Furthermore, you can load the next image in a constructed img element and once it has loaded, change the background-image of the hidden div and fade to it. This means that there is no loading shown and you can fade directly into the slideshow.
Here's some pseudo code below, but it would probably be easier to just look at the real functions in the source.
base.next_slide = function () {
"current slide" = "next slide";
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css({'background-image':'url("' + "Next image url" + '")',
"z-index":"-2"});
base.containers[the_next_container].css("z-index","-1");
$(this).show();
the_shown_container = the_next_container;
});
};
Plugin.prototype.init = function (base) {
$('<img/>').attr('src', "Next image url").load(function() {
base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
if ("there's only one image in the slider"){
base.containers[the_shown_container].fadeOut(duration,function () {
$(this).css("z-index","-2");
base.containers[the_next_container].css("z-index","-1");
});
return;
}
base.next_slide();
setInterval(base.next_slide ,base.o.interval);
});
};
Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.
Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>