Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Nashville
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding slideshow to existing gallery script

    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.

    Code:
    $(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');
        }
    });
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •