-
Help with simple jQuery + png image rotator
Hi guys,
I was hoping that someone might know a trick to make this work.
I’ve just worked through the Lynda.com jQuery tutorials and I’m trying to add an image rotator to my site.
I’ve got it to work exactly as it should, but in the tutorial they were using JPEGs, and I’m using PNGs with transparency, so unfortunately the z-sorting can be seen by the user.
https://printing.alpha-duplication.com/business-cards.htmlHere’s the code:
HTML
<div id="photoShow"><div class="current">
<img src="image1.png" width="360" height="360" />
</div>
<div>
<img src="image2.png" width="360" height="360" />
</div>
<div>
<img src="image3.png" width="360" height="360" />
</div>
<div>
<img src="image4.png" width="360" height="360" />
</div>
<div>
<img src="image5.png" width="360" height="360" />
</div></div>
jQuery
$(function() {
setInterval("rotateImages()", 3000);
});function rotateImages() {
var oCurPhoto = $("#photoShow div.current");
var oNxtPhoto = oCurPhoto.next();if (oNxtPhoto.length == 0)
oNxtPhoto = $("#photoShow div:first");oCurPhoto.removeClass("current").addClass("previous");
oNxtPhoto.css({opacity:0.0}).addClass("current").animate({opacity:1.0}, 1000,
function() {
oCurPhoto.removeClass("previous");
});
}
CSS
#photoShow {
margin: 0px;
padding: 0px;
height: 360px;
width: 360px;
}
#photoShow div {
position:absolute;
z-index:0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}I’d be greatful for any tricks or advice.
Kind Regards,
ClintAdobe CS4 Master Suite
Vista Ultimate 64 SP1
Intel Core i7 920 @ 3.60GHz
12 GB DDR3 RAM
NVidia Quadro FX 3700
Matrox RT.X2 LE Capture Card
4 TB RAID 5 -
3 Replies
-
Are you talking about the business cards on the left?
They play nice in FF and IE8 on Vista 64.
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
-
Hi Fernando,
Yeah I the rotation works well, but I was trying to get the other pictures that don’t have a z-index of 2 to be invisible so only one is showing at a time. After sleeping on it for a night I think that I have a fix, but still need to check it out on other OS/Browsers.
https://www.castleford-printing.com/business-cards.html
I’ve just set all the images in the #photoShow to have an opacity of 0.0 and then gave the first image a .current class and then set that to have an opacity of 1.0.
Here’s the code incase anyone is curious:
$(function() {
setInterval("rotateImages()", 3000);var clearPic = $("#photoShow div");
clearPic.animate({opacity:0.0},0);
var showInit = $("#photoShow div.current");
showInit.animate({opacity:1.0},500);
});function rotateImages() {
var curPhoto = $("#photoShow div.current");var nextPhoto = curPhoto.next();
if (nextPhoto.length == 0)
nextPhoto = $("#photoShow div:first");curPhoto.removeClass("current").addClass("previous").animate({opacity:0.0},1000);
nextPhoto.css({opacity:0.0}).addClass("current").animate({opacity:1.0}, 1000,
function() {
curPhoto.removeClass("previous");
});
}Thanks Fernando,
Clint
Adobe CS4 Master Suite
Vista Ultimate 64 SP1
Intel Core i7 920 @ 3.60GHz
12 GB DDR3 RAM
NVidia Quadro FX 3700
Matrox RT.X2 LE Capture Card
4 TB RAID 5 -
They look good, but in IE the transparency is not displayed well.
The logo transparency is displayed nice and it’s also a PNG, so double check you are exporting both your logo and the business cards with the same parameters.
I have seen these kind of display problems when javascript animation is applied to images. Usually a problem that goes from browser to browser requiring the use of hacks for individual displays. A pain I don’t have a pill for, sorry.
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
Reply to this Discussion! Login or Sign Up