How do I take an on click off of a gallery?

I found a JQUERY gallery that I really like however I am having issues with it. I love the gallery however it will only appear once you click on a city name on the page. I wondered if anyone knew how to make it work without clicking anything so the gallery will just appear by its self? I have been racking my brain all day!

Download zip here and has a link to preview the final result! http://tympanus.net/codrops/2010/10/07/slider-gallery/

I have come to the conclusion that the problem is on the index page with the java at the bottom opposed to the external java files in the zip file the creator provides.

If anyone know and could give me a hand I would be beyond grateful!

Thanks in advance!!

code

        $(function() {
            //caching
            //the main wrapper of the gallery
            var $fp_gallery         = $('#fp_gallery')
            //the overlay when the large image is displayed
            var $fp_overlay         = $('#fp_overlay');
            //image loading status
            var $fp_loading         = $('#fp_loading');
            //the next and previous buttons
            var $fp_next            = $('#fp_next');
            var $fp_prev            = $('#fp_prev');
            //the close button
            var $fp_close           = $('#fp_close');
            //the main container for the thumbs structure
            var $fp_thumbContainer  = $('#fp_thumbContainer');
            //wrapper of jquery ui slider
            var $fp_scrollWrapper   = $('#fp_scrollWrapper');
            //total number of images
            var nmb_images=0;
            //which gallery is clicked (index)
            var gallery_idx=-1;
            //scroller wrapper
            var $fp_thumbScroller   = $('#fp_thumbScroller');
            //jquery ui slider
            var $slider             = $('#slider');
            //the links of the galleries (the cities)
            var $fp_galleries       = $('#fp_galleryList > li');
            //current image being viewed
            var current             = 0;

            //some control flags:
            //prevent fast clicks on next and previous
            var photo_nav           = true;

            //User clicks on a city / gallery;
            $fp_galleries.bind('click',function(){
                $fp_galleries.removeClass('current');
                var $gallery        = $(this);
                $gallery.addClass('current');
                var gallery_index   = $gallery.index();
                if(gallery_idx == gallery_index) return;
                gallery_idx         = gallery_index;
                //close the gallery and slider if opened
                if($fp_thumbContainer.data('opened')==true){
                    $fp_scrollWrapper.fadeOut();
                    $fp_thumbContainer.stop()
                                      .animate({'height':'0px'},200,function(){
                                        openGallery($gallery);
                                      });
                }                 
                else
                    openGallery($gallery);
            });

            //opens a gallery after cliking on a city / gallery
            function openGallery($gallery){
                //current gets reseted
                current             = 0;                  
                //wrapper of each content div, where each image is
                var $fp_content_wrapper = $fp_thumbContainer.find('.container:nth-child('+parseInt(gallery_idx+1)+')');
                //hide all the other galleries thumbs wrappers
                $fp_thumbContainer.find('.container').not($fp_content_wrapper).hide();
                //and show this one
                $fp_content_wrapper.show();
                //total number of images
                nmb_images          = $fp_content_wrapper.children('div').length;
                //calculate width,
                //padding left 
                //and padding right for content wrapper
                var w_width     = 0;
                var padding_l   = 0;
                var padding_r   = 0;
                //center of screen
                var center      = $(window).width()/2;
                var one_divs_w  = 0;
                /*
                Note:
                the padding left is the center minus half of the width of the first content div
                the padding right is the center minus half of the width of the last content div
                */
                $fp_content_wrapper.children('div').each(function(i){
                    var $div        = $(this);
                    var div_width   = $div.width(); 
                    w_width         +=div_width;
                    //if first one, lets calculate the padding left
                    if(i==0)
                        padding_l = center - (div_width/2);
                    //if last one, lets calculate the padding right
                    if(i==(nmb_images-1)){
                        padding_r = center - (div_width/2);
                        one_divs_w= div_width;
                    }   
                }).end().css({
                    'width'             : w_width + 'px',
                    'padding-left'      : padding_l + 'px',
                    'padding-right'     : padding_r + 'px'
                });

                //scroll all left;
                $fp_thumbScroller.scrollLeft(w_width);

                //innitialize the slider
                $slider.slider('destroy').slider({
                    orientation : 'horizontal',
                    max         : w_width -one_divs_w,//total width minus one content div width
                    min         : 0,
                    value       : 0,
                    slide       : function(event, ui) {
                        $fp_thumbScroller.scrollLeft(ui.value);
                    },
                    stop: function(event, ui) {
                        //when we stop sliding 
                        //we may want that the closest picture to the center 
                        //of the window stays centered. Uncomment the following line
                        //if you want that behaviour
                        checkClosest();
                    }
                });
                //open the gallery and show the slider
                $fp_thumbContainer.animate({'height':'240px'},200,function(){
                    $(this).data('opened',true);
                    $fp_scrollWrapper.fadeIn();
                });

                //scroll all right;
                $fp_thumbScroller.stop()
                                 .animate({'scrollLeft':'0px'},2000,'easeInOutExpo');

                //User clicks on a content div (image)
                $fp_content_wrapper.find('.content')
                                 .bind('click',function(e){
                    var $current    = $(this);
                    //track the current one
                    current         = $current.index();
                    //center and show this image
                    //the second parameter set to true means we want to 
                    //display the picture after the image is centered on the screen
                    centerImage($current,true,600);
                    e.preventDefault();
                });                 
            }

            //while the gallery scrolls we want that the slider scrolls as well
            $fp_thumbScroller.scroll(function(){
                $slider.slider('value',parseInt($fp_thumbScroller.scrollLeft(),10));
            });

            //User clicks next button (preview mode)
            $fp_next.bind('click',function(){
                if(photo_nav){
                    photo_nav = false;
                navigate(1);
                }   
            });

            //User clicks previous button (preview mode)
            $fp_prev.bind('click',function(){
                if(photo_nav){
                    photo_nav = false;
                navigate(0);
                }   
            });

            //User clicks next button (thumbs)
            $('#fp_next_thumb').click(function(){
                slideThumb(1);
            });

     开发者_开发问答       //User clicks previous button (thumbs)
            $('#fp_prev_thumb').click(function(){
                slideThumb(0);
            });

            //User clicks close button
            $fp_close.bind('click',function(){
                if(!photo_nav) return;
                //windows scroll if any
                var windowS         = $(window).scrollTop();
                //the large image being viewed
                var $large_img      = $('#fp_preview');
                //the current thumb
                var $current        = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
                                                       .find('.content:nth-child('+parseInt(current+1)+')');
                //offset values of current thumb
                var current_offset  = $current.offset();
                //the large image will animate in the direction of the center
                //after that it is removed from the DOM
                $large_img.stop().animate({
                    'top'           : current_offset.top + windowS + 'px',
                    'left'          : $(window).width()/2 - $current.width()/2 + 'px',
                    'width'         : $current.width() + 'px',
                    'height'        : $current.height() + 'px',
                    'opacity'       : 0
                },800,function(){
                    $(this).remove();
                //hide the overlay, and the next, previous and close buttons
                hidePreviewFunctions();
            });


            });

If you observe the code, they use a function defined in the page called openGallery and they call it like this openGallery($gallery)

For more info read the code in the page you posted, and if you have specific issues let us know. (best to give a working example of where you are, so we can move a step further..)

Since you only have one element, you can just trigger the click on the button.

So find the following code and alter the last line

$fp_galleries.bind('click',function(){
    $fp_galleries.removeClass('current');
    var $gallery         = $(this);
    $gallery.addClass('current');
    var gallery_index     = $gallery.index();
    if(gallery_idx == gallery_index) return;
    gallery_idx            = gallery_index;
    //close the gallery and slider if opened
    if($fp_thumbContainer.data('opened')==true){
        $fp_scrollWrapper.fadeOut();
        $fp_thumbContainer.stop()
                          .animate({'height':'0px'},200,function(){
                            openGallery($gallery);
                          });
    }                  
    else
        openGallery($gallery); 
}).trigger('click');

The last line has the only change i made (added the .trigger('click'))

In case someone is looking for a solution. To auto load gallery 1, I used .load() function.

Change the value of the gallery you want to auto load. var gallery_index = 0;

$(window).load(function() {
              //$fp_galleries.removeClass('current');
                var $gallery        = $(this);
                $gallery.addClass('current');
                var gallery_index   = 0;

                if(gallery_idx == gallery_index) return;
                gallery_idx         = gallery_index;
                //close the gallery and slider if opened
                if($fp_thumbContainer.data('opened')==true){
                    $fp_scrollWrapper.fadeOut();
                    /*$fp_thumbContainer.stop()
                                      .animate({'height':'0px'},200,function(){*/
                                        openGallery($gallery);
                                      //});
                }                 
                else
                    openGallery($gallery);
            });