Search jQuery

jQuery Forum

Fade in and fade out images in gallery

in Using jQuery • 9 years ago

I have an inline list with an image gallery horizontally centralized, but sometimes this gallery can have a width bigger than the browser window, so some images will not be visible.

You can also check it online here: http://3bum.com

My idea: If the gallery width is bigger than the browser window, every 3 seconds fade out an image the user can see and fade in, at the same time and place, an image he cant see, replace the same image only after replacing all others, and stop it when the mouse is over the gallery.

I'm not a javascript expert, so here is what I've done so far: Every 5 seconds replace two random images, first "fade" out one, than "fade" in the other, and stop it when the mouse is over the gallery.

Javascript:

$.fn.fader = function ()
{
var gallery = $(this),
images = [];
gallery.css(
{
marginLeft: '-' + (this.width() / 2) + 'px',
visibility: 'visible'
}).find('a').each(function ()
{
images.push($(this));
});
var fade = setInterval(function ()
{
fadeImages();
}, 5000);
var fadeImages = function ()
{
images.sort(function ()
{
return 0.5 - Math.random()
});
imagesToFade = images.slice(0, 2);
var temporarySrc = imagesToFade[0].find('img').attr('src'),
temporaryHref = imagesToFade[0].attr('href');
switchImages(imagesToFade[0], imagesToFade[1].find('img').attr('src'));
switchImages(imagesToFade[1], temporarySrc);
switchLinks(imagesToFade[0], imagesToFade[1].attr('href'));
switchLinks(imagesToFade[1], temporaryHref);
}
var switchImages = function (oldImage, newImage)
{
oldImage.find('img').animate(
{
opacity: 0.0
}, 1000, function ()
{
oldImage.find('img').attr('src', newImage).animate(
{
opacity: 0.6
}, 1000);
});
}
var switchLinks = function (oldImage, newImage)
{
oldImage.attr('href', newImage);
}
gallery.mouseover(function ()
{
clearInterval(fade);
}).mouseout(function ()
{
fade = setInterval(function ()
{
fadeImages();
}, 5000);
})
};
$('section.portfolio ul').fader();

HTML:

<section class="portfolio">
<ul>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_b.jpg">
<img src="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg">
<img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg">
<img src="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_b.jpg">
<img src="http://farm9.staticflickr.com/8200/8207750975_bd288a2a1f_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg">
<img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg">
<img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg">
</a>
</li>
<li>
<a class="fancybox" rel="portfolio" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg">
<img src="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_m.jpg">
</a>
</li>
</ul>
</section>