...

View Full Version : jQuery Image Gallery WITH Mouseover Fading Effect



Psionicsin
10-22-2010, 07:14 AM
Hey I'm a photo retoucher, and really want to be able to show clients my abilities with some before and after of images that I've worked on. This thing is that I don't want them clicking to reload the page everytime in order to get to the next image.

Does anyone know a way to combine the Nivo Slider Image Gallery:
http://nivo.dev7studios.com/

...with this Image Mouseover Fade technique:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

...to accomplish this task?

harbingerOTV
10-22-2010, 02:24 PM
From the slider page:

"Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider."

Keeping that in mind, first thing you need to do is figure out how to make the slider not auto play.

Then I guess you could write your HTML like:

<div id="slider">
<a href="#x">
<img src="img1a.jpg" />
<img src="img1b.jpg" />
</a>
<a href="#x">
<img src="img2a.jpg" />
<img src="img2b.jpg" />
</a>
<!-- etc... -->
</div>

Then your jQuery for the mouseover something like:

$(document).ready(function(){

$("slider a").hover(
function() {
$(this).children("img").eq(0).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).children("img").eq(0).stop().animate({"opacity": "1"}, "slow");
});

});

That should trigger the first image inside the hovered link to fade out.

To make your link not do anything you can add:

$("#slider a").click(function(){
return false;
});

your CSS something like:


div#slider a {
position: relative;
width: XX; /* the width of your image */
height: XX; /* the height of your image */
display: block;
}

div#slider a img {
position: absolute;
left: 0;
top: 0;
border: none;
}

div#slider a img:first-child {
position: absolute;
left: 0;
top: 0;
z-index: 10;
border: none;
}


Didn't test any of this but, seems like it should work out.

Psionicsin
10-22-2010, 03:53 PM
Thanks. I'll give it a try and see what happens.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum