FORUMS: list search recent posts

Help with simple jQuery + png image rotator

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Clint Milner
Help with simple jQuery + png image rotator
on Oct 12, 2009 at 3:41:52 pm

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.
http://printing.alpha-duplication.com/business-cards.html

Here'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,
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


Return to posts index

Fernando Mol
Re: Help with simple jQuery + png image rotator
on Oct 13, 2009 at 11:39:52 pm

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.


Return to posts index

Clint Milner
Re: Help with simple jQuery + png image rotator
on Oct 14, 2009 at 7:58:13 am

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.

http://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


Return to posts index


Fernando Mol
Re: Help with simple jQuery + png image rotator
on Oct 14, 2009 at 1:42:47 pm

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.


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]