I've been using the gallery script below from the Codrops site and managed after a bit of reading on the forums to get an autoplay function working. However the image fades in nicely but it doesn't fade out - it just dissapears.
Can anyone give me any pointers on how to make the main image fade out?
http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/
I've attached my version of the slideshow script
Thanks in advance.
$(function() {
/* name of the selected album, in the top right combo box */
var album = $('#albumSelect div').html();
/* mode is small or expanded, depending on the picture size */
var mode = 'small';
/* this is the index of the last clicked picture */
var current = 0;
//
// bali, 2011-05-28
// add slideshow functionality
//
var slideshow_enabled = true; // enable or disable the slideshow on page load
var slideshow_delay = 6000; // slideshow delay in msec.
var slideshow_extra_delay = 6000; // slideshow additional delay (when directly clicking on a thumbnail), in msec
var slideshow_timeout=false;
var slideshow_real_delay=slideshow_delay;
if(slideshow_enabled){
var increase_delay_func=function(event){
slideshow_real_delay=slideshow_delay+slideshow_extra_delay;
window.clearTimeout(slideshow_timeout);
slideshow_timeout=window.setTimeout(slideshow_loop,slideshow_real_delay);
};
$("#imageWrapper img").click(increase_delay_func);
slideshow_timeout=window.setTimeout(slideshow_loop,slideshow_real_delay);
}
function slideshow_loop(){
slideshow_real_delay=slideshow_delay;
var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current+1)+')');
if($thumb.length){
++current;
loadPhoto($thumb,'cursorRight');
}
else
{
current = 0; /* restart from the start */
loadPhoto($thumb,'cursorRight');
}
if(current > 0)
{
slideshow_timeout=window.setTimeout(slideshow_loop, slideshow_real_delay);
}
else
{
var slideshow_real_delay = 0; /* no needs to wait */
slideshow_timeout=window.setTimeout(slideshow_loop, slideshow_real_delay);
}
}
/* first, let's build the thumbs for the selected album */
buildThumbs();
/*
clicking on a thumb loads the image
(alt attribute of the thumb is the source of the large image);
mouseover and mouseout for a nice spotlight hover effect
*/
$('#thumbsContainer img').live('click',function(){
loadPhoto($(this),'cursorPlus');
}).live('mouseover',function(){
var $this = $(this);
$this.stop().animate({
'opacity':'1.0'
},200);
}).live('mouseout',function(){
var $this = $(this);
$this.stop().animate({
'opacity':'0.4'
},200);
});
/* when resizing the window resize the picture */
$(window).bind('resize', function() {
resize($('#displayed'),0);
});
/* Album Combo Events to open, close, and select an album from the combo */
$('#albumSelect div').bind('click',function(){
var $this = $(this);
if($this.is('.up'))
closeAlbumCombo();
else if($this.is('.down'))
openAlbumCombo();
});
$('#albumSelect ul > li').bind('click',function(){
var $this = $(this);
album = $this.find('a').html();
buildThumbs();
var $combo = $('#albumSelect div');
$this.find('a').html($combo.html());
$combo.html(album);
closeAlbumCombo();
orderCombo($this.parent());
});
/*
when hovering the main image change the mouse icons (left,right,plus,minus)
also when clicking on the image, expand it or make it smaller depending on the mode
*/
$('#displayed').live('mousemove',function(e){
var $this = $(this);
var imageWidth = parseFloat($this.css('width'),10);
var x = e.pageX - $this.offset().left;
if(x<(imageWidth/3))
$this.addClass('cursorLeft')
.removeClass('cursorPlus cursorRight cursorMinus');
else if(x>(2*(imageWidth/3)))
$this.addClass('cursorRight')
.removeClass('cursorPlus cursorLeft cursorMinus');
else{
if(mode=='expanded'){
$this.addClass('cursorMinus')
.removeClass('cursorLeft cursorRight cursorPlus');
}
else if(mode=='small'){
$this.addClass('cursorPlus')
.removeClass('cursorLeft cursorRight cursorMinus');
}
}
}).live('click',function(){
var $this = $(this);
if(mode=='expanded' && $this.is('.cursorMinus')){
mode='small';
$this.addClass('cursorPlus')
.removeClass('cursorLeft cursorRight cursorMinus');
$('#thumbsWrapper').stop().animate({
'bottom':'0px'
},300);
resize($this,1);
}
else if(mode=='small' && $this.is('.cursorPlus')){
mode='expanded';
$this.addClass('cursorMinus')
.removeClass('cursorLeft cursorRight cursorPlus');
$('#thumbsWrapper').stop().animate({
'bottom':'-85px'
},300);
resize($this,1);
}
else if($this.is('.cursorRight')){
var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current+1)+')');
if($thumb.length){
++current;
loadPhoto($thumb,'cursorRight');
}
}
else if($this.is('.cursorLeft')){
var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current-1)+')');
if($thumb.length){
--current;
loadPhoto($thumb,'cursorLeft');
}
}
});
/*
function to build the thumbs container
An AJAX request is made to retrieve the
photo locations of the selected album
*/
function buildThumbs(){
current=1;
$('#imageWrapper').empty();
$('#loading').show();
$.get('ajax/thumbs.php?album='+album, function(data) {
var countImages = data.length;
var count = 0;
var $tContainer = $('<div/>',{
id : 'thumbsContainer',
style : 'visibility:hidden;'
})
for(var i = 0; i < countImages; ++i){
try{
var description = data[i].desc[0];
}catch(e){
description='';
}
if(description==undefined)
description='';
$('<img title="'+description+'" alt="'+data[i].alt+'" height="75" />').load(function(){
var $this = $(this);
$tContainer.append($this);
++count;
if(count==1){
/* load 1 image into container*/
$('<img id="displayed" style="display:block;" class="cursorPlus"/>').load(function(){
var $first = $(this);
$('#loading').hide();
resize($first,0);
$('#imageWrapper').append($first);
$('#description').html($this.attr('title'));
}).attr('src',$this.attr('alt'));
}
if(count == countImages){
$('#thumbsWrapper').empty().append($tContainer);
thumbsDim($tContainer);
makeScrollable($('#thumbsWrapper'),$tContainer,15);
}
}).attr('src',data[i].src);
}
},'json');
}
/* adjust the size (width) of the scrollable container
- this depends on all its images widths
*/
function thumbsDim($elem){
var finalW = 0;
$elem.find('img').each(function(i){
var $img = $(this);
finalW+=$img.width()+5;
//plus 5 -> 4 margins + 1 to avoid rounded calculations
});
$elem.css('width',finalW+'px').css('visibility','visible');
}
/*
loads a picture into the imageWrapper
the image source is in the thumb's alt attribute
*/
function loadPhoto($thumb,cursorClass){
current = $thumb.index()+1;
$('#imageWrapper').empty();
$('#loading').show();
$('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
var $this = $(this);
$('#loading').hide();
resize($this,0);
if(!$('#imageWrapper').find('img').length){
$('#imageWrapper').append($this.fadeIn(2000));
$('#description').html($this.attr('title'));
}
}).attr('src',$thumb.attr('alt'));
}
//functions to control the albums combos
function closeAlbumCombo(){
var $combo = $('#albumSelect div');
$combo.addClass('down').removeClass('up');
$combo.prev().hide();
}
function openAlbumCombo(){
var $combo = $('#albumSelect div');
$combo.addClass('up').removeClass('down');
$combo.prev().show();
}
function orderCombo($ul){
var items = $ul.find('li').get();
items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(items, function(i, li){
$ul.append(li);
});
}
//Get our elements for faster access and set overlay width
function makeScrollable($wrapper, $container, contPadding){
//Get menu width
var divWidth = $wrapper.width();
//Remove scrollbars
$wrapper.css({
overflow: 'hidden'
});
//Find last image container
var lastLi = $container.find('img:last-child');
$wrapper.scrollLeft(0);
//When user move mouse over menu
$wrapper.unbind('mousemove').bind('mousemove',function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;
var left = (e.pageX - $wrapper.offset().left) * (ulWidth-divWidth) / divWidth;
$wrapper.scrollLeft(left);
})We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.