Fading in script doesn't fade out the current image - javascript

I have a script which fades in a main image when the visitor clicks on the thumbnail. However, the main image is fading in from a white background and I would like the current image to fade out and then the new image to fade in.
Is this possible with my script below?
Thanks in advance,
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>
<style>
#imageWrap {
width: 640px;
height: 420px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn(1000);
});
return false;
});
});
</script>
</head>
<body>
<a href="dimming/1.jpg" class="thumbnail"><img src="dimming/1.jpg"
alt="Image 1" width="20" height="20"/></a>
<a href="dimming/2.jpg" class="thumbnail"><img src="dimming/1.jpg"
alt="Thumbnail 2" width="20" height="20"/></a>
<div id="imageWrap">
<img src="dimming/C.jpg" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>

Try this -
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').fadeOut(1000,function(){ // fade out your main image first
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn(1000); // fade in after your previous image is fadaOut
});
});

Related

How to change body background with image from img element

I have some images which are hidden, the markup is
<div class="images hide">
<img id="barber" class="barber-image" src="../../Content/images/chosing_business_role/barberShopBackground.jpg" />
<img id="beauty" src="../../Content/images/background_image.png" />
</div>
And i need to change body background with the first one of them when images loaded, but without new request to server for that image. How can i do that? Thanks.
$('#barber').on('load', changeBodyBackground);
// when image loads, call function
....
function changeBodyBackground(e){
$('body').css('background-image', $(this).attr('src'));
// set background-image property for body
}
Try this
<!DOCTYPE html>
<html>
<head>
<script src = "jquery-1.10.2.min.js"></script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<div class="images hide">
<img id="barber" class="barber-image" src="1.jpg" />
<img id="beauty" src="2.jpg" />
</div>
<script type="text/javascript">
$('body').css('background','url('+$('#barber').attr('src')+')');
</script>
</body>
</html>
you can also use background-image
$('body').css('background-image','url('+$('#barber').attr('src')+')');

How Block UI until page load with wait image using javascript/CSS only

I want to block html page until it loads completely with wait image by javascript or CSS but WITHOUT JQUERY
I want to achieve like these demos http://malsup.com/jquery/block/#demos
Please don't suggest with jquery solutions.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var ld = (document.all);
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if (ns4)
ld = document.loading;
else if (ns6)
ld = document.getElementById("loading").style;
else if (ie4)
ld = document.all.loading.style;
function init() {
if (ns4) { ld.visibility = "hidden"; }
else if (ns6 || ie4) ld.display = "none";
}
</script>
</head>
<body onload="init()">
//image which has size of 40 mb.
<img src="show.jpg" />
<div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
//loading image to see while loading background image
<img src="loading.gif" />
</div>
</body>
</html>
Here a solution that will show the wait image when js is active, and keep the wait image hidden if js is not active:
Create a default rule that hides the #loading and a .is-loading #loading that shows the wait image
Use JS to add the class wait image to the html element
When the content (or image) is loaded remove the is-loading class.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
(function() {
var html = document.getElementsByTagName('html')[0];
html.className += ' is-loading';
window.onload = function() {
html.className = String(html.className).replace('is-loading','');
}
}());
</script>
<style>
#loading {
display : none;
position : absolute;
width : 100%;
text-align : center;
top : 300px;
}
.is-loading #loading {
display: block;
}
</style>
</head>
<body>
<!--image which has size of 40 mb. -->
<img src="show.jpg" >
<div id="loading">
<!-- loading image to see while loading background image -->
<img src="loading.gif" >
</div>
</body>
</html>

Adding links to my slide show

I want to modify my slide show to include links via the images in the slide. My original code is and it works:
VAR slides=new Array("s1.jpg","s2.jpg")
var slideCntr=slides.length-1
function slideShow() {
slideCntr+=1
if (slideCntr==slides.length) slideCntr=0
document.getElementById("slideHolder").src = slides[slideCntr]
setTimeout("slideShow()",3000)
}
In my code i have 5 image links with a display of none. I am using an array populated with the id's of the image tags and changing the display to block. I think i need something to change the display back to none. Not sure but what i have now does not work please help. My new code which needs help is:
var slides=new Array("slide1","slide2","slide3","slide4","slide5")
var slideCntr=slides.length-1
function slideShow(){
slideCntr+=1
if (slideCntrl==slides.length)
slideCntr=0
document.getElementById(slideCntr).style="display: block;"
setTimeout("slideShow()",3000)}
<body onLoad="slideShow()">
<div>
<img id="slide1" src="s1.jpg">
<img id="slide2" src="s2.jpg">
<img id="slide3" src="s3.jpg">
<img id="slide4" src="s4.jpg">
<img id="slide5" src="s5.jpg">
</div>
</body>
This code works perfectly fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img
{
display:none;
}
</style>
</head>
<body>
<div>
<img id="slide1" src="1.png">
<img id="slide2" src="2.png">
<img id="slide3" src="3.png">
<img id="slide4" src="4.png">
<img id="slide5" src="5.png">
</div>
<script type="text/javascript">
var slides=new Array("slide1","slide2","slide3","slide4","slide5");
var slideCntr = 1;
setInterval(slideShow,3000);
function slideShow()
{
//alert('called');
for(var i = 1 ; i < slides.length+1 ; i++)
{
document.getElementById("slide"+i).style.display = "none";
}
document.getElementById("slide"+slideCntr).style.display = "block";
slideCntr+=1;
if(slideCntr == slides.length+1)
{
slideCntr = 1;
}
}
</script>
</body>
</html>

jquery zoomer rebind after image source changed by javascript

I made a small image gallery with one big image along with few small ones under neath. there is a zoomer attached with big image and when i click on small image it replaces the big image but zoomer shows the old image instead of new one
jQuery
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
javascript
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src=img.src;
$(document).trigger("ready");
}
html
<img id="myimage" src="img/abc.jpg" alt="" />
<image src="thumbnails/xyz.jpg" onClick="movImg(this);" width="73px" style="cursor: pointer;" />
where i am wrong or what's the right way to do it?
Thanks
Try to call $('#myimage').addpowerzoom(); instead of $(document).trigger("ready");
This worked for me. It looks like the slight delay that happens when you change the source of the image breaks powerzoom. The idea is to call addpowerzoom() after image is loaded.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
function movImg(img){
var bImg = document.getElementById('myimage');
bImg.src = img.src;
jQuery('#myimage').one("load", function() {
jQuery('#myimage').addpowerzoom();
});
};
jQuery(document).ready(function($){
$('#myimage').addpowerzoom();
});
</script>
</head>
<body>
<img id="myimage" src="img/abc.jpg" alt="" />
<img id="thumb" src="thumbnails/xyz.jpg" onClick="movImg(this);" width="64px" style="cursor: pointer;" />
</body>
</html>

How can I make this toggle javascript buttons (images) less clumsy?

I'm looking to see if there's a way to make this code less clumsy? I'm thinking there must be a more elegant way to make 2 buttons that toggle between 2 or more button states on hover and click.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
img1 = "images/buy1.png";
img2 = "images/buy2.png";
function chng(c_img) {
if (c_img.src.indexOf(img1)!= -1) c_img.src = img2;
else c_img.src = img1;
}
img3 = "images/sell1.png";
img4 = "images/sell2.png";
function chng2(c_img) {
if (c_img.src.indexOf(img3)!= -1) c_img.src = img4;
else c_img.src = img3;
}
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
border="0" height="50" id="img" /></a>
</div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
width="115" border="0" height="50" id="img2" /></a>
</div>
</body>
</html>
This sounds like a perfect fit for using CSS background sprites. Create images that have both states in them, stacked vertically:
----------------------
| "on" image |
----------------------
----------------------
| "off" image |
----------------------
Give your links a class and apply the images to them to the elements using the background-image property (using the shorthand notation below):
.buy1 {
display: block;
width: 115px;
height: 50px;
background: transparent url(images/buy1.png) left bottom no-repeat;
}
.buy1.on { background-position: left top; }
Then with the JavaScript, you can simply toggle the class:
$(document).ready(function(){
$("#sell a").on('click',function(){
$(this).toggleClass('on');
});
});
This approach has a number of advantages:
Fewer server requests (you can combine all the images into one sprite
sheet and they will load in one request) mean better performance
There will be no lag on hover as the "on" state is already loaded
Much easier to maintain
Edit I'd add, you should put some real content in the links to give screenreader users something to navigate with. I'd typically use an image replacement technique for that:
<span>Buy Now</span>
.buy1 span {
position: absolute;
display: block;
top: -10000px;
left: -10000px;
font-size: 1px;
}
Using jQuery toggle-event
NOTE
The code will handle any link and image where the ID of the link and the image has some kind of match - doable with data as well but compatible with non-html5 browsers too.
You will have to provide images or classnames for each different image but the toggle script is fixed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var icons = {
buy:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
},
sell:{
on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png",
off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
}
}
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].on);
// OR change the className of the link
// OR use data-toggle - but no need to test the image src
},
function() {
var id = $(this).attr("id");
$("#"+id+"Img").attr("src",icons[id].off);
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="buyImg" width="115"
border="0" height="50" /></a>
<a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png" id="sellImg" width="115"
border="0" height="50" /></a>
</div>
</body>
</html>
UPDATE Using data attributes to prove a point
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".toggleLink").toggle(
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleon'));
},
function() {
var img = $(this).find("img");
img.attr("src",img.data('toggleoff'));
}
);
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="buy">
<a href="#" class="toggleLink"><img src="images/buy1.png"
data-toggleon="images/buy1.png"
data-toggleoff="images/buy2.png"
width="115" border="0" height="50" id="img" /></a>
</div>
</body>
</html>
PS: Have a look here for a great version
Element with hover then click removes hover effect and click again adds hover again with a fiddle by Greg Pettit
Use CSS selectors - like what is documented here:
http://www.w3schools.com/cssref/sel_hover.asp
if you mean more stylish there is way by css or jquery
http://www.webreference.com/programming/css_stylish/index.html
http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/
It seems fine. I can think of a more elegant way, using jQuery:
First off, give each one of your elements the toggleImg class. Then, give each button the attributes data-toggleon and data-toggleoff. Remove the id and name if you desire.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggleImg").on('click',function(){
if($(this).attr('src')==$(this).data('toggleon')){
$(this).attr('src',$(this).data('toggleoff'))
}else{
$(this).attr('src',$(this).data('toggleon'))
}
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<div id="sell">
<img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png" width="115" border="0" height="50" />
</div><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50" />
</div>
</body>
</html>
The code can be thus easily extended--you can just add new imgs wherever you want with the appropirate class/attributes and not worry about adding new JS.

Categories