...

View Full Version : jQuery adding slideshow to existing gallery script



andyrigby
12-20-2010, 07:39 AM
I modified this script from www.tympanus.net and I am trying to create a slideshow so the images automatically progress to the next one after my set interval. It seems like it should be easy. I have tried a few different approaches, but nothing has worked.


$(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;
//begin new variables
var interval = 3000;
var current_thumb = 0;
var nmb_images_wrapper = 26;
var playtime;

// first, let's build the thumbs
buildThumbs();

//clicking a thumb loads image (alt attribute of thumb is the source of 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);
});
// when resizing the window resize the picture
$(window).bind('resize', function() {
resize($('#displayed'),0);
});

//when hovering main image change the mouse icons (left,right,plus,minus) also when clicking on the image, expand it or make it smaller
$('#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
function buildThumbs(){
current=1;
$('#imageWrapper').empty();
$.get('support/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){
$('<img 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);
resize($first,0);
$('#imageWrapper').append($first);
}).attr('src',$this.attr('alt'));
}
if(count == countImages){
$('#thumbsWrapper').empty().append($tContainer);
thumbsDim($tContainer);
makeScrollable($('#thumbsWrapper'),$tContainer,15);
}
}).attr('src',data[i].src);
}
},'json');
}
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum