1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

JQuery Gallery

Discussion in 'jQuery' started by hatsune miku, Oct 3, 2013.

  1. #1
    Hello JQuery users!
    I have a big problem regarding a script I'm modifying is for a web gallery so long the script work perfectly but everything is triggered by pressing a button as you can see, but I want to trigger the script without having to press the button so what I want is to lead the images and start the gallery without the help of a button...
    any ideas? Thanks in advance
    here is the script (ignore that I have multiple buttons, in this end just pretend I have only one) Also I attach the html with the code too if you want to see the rest

    <!-- The JavaScript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    /**
    * navR,navL are flags for controlling the albums navigation
    * first gives us the position of the album on the left
    * positions are the left positions for each of the 5 albums displayed at a time
    */
    var navR,navL = false;
    var first = 1;
    var positions = {
    '0' : 340,
    '1' : 170,
    '2' : 340,
    '3' : 510,
    '4' : 680
    }
    var $ps_albums = $('#ps_albums');
    /**
    * number of albums available
    */
    var elems = $ps_albums.children().length;
    var $ps_slider = $('#ps_slider');

    /**
    * let's position all the albums on the right side of the window
    */
    var hiddenRight = $(window).width() - $ps_albums.offset().left;
    $ps_albums.children('div').css('left',hiddenRight + 'px');

    /**
    * move the first 5 albums to the viewport
    */
    $ps_albums.children('div:lt(5)').each(
    function(i){
    var $elem = $(this);
    $elem.animate({'left': positions + 'px','opacity':1},800,function(){
    if(elems > 5)
    enableNavRight();
    });
    }
    );

    /**
    * next album
    */
    $ps_slider.find('.next').bind('click',function(){
    if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
    disableNavRight();
    disableNavLeft();
    moveRight();
    });

    /**
    * we move the first album (the one on the left) to the left side of the window
    * the next 4 albums slide one position, and finally the next one in the list
    * slides in, to fill the space of the first one
    */
    function moveRight () {
    var hiddenLeft = $ps_albums.offset().left + 163;

    var cnt = 0;
    $ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
    var $this = $(this);
    $ps_albums.children('div').slice(first,parseInt(first+4)).each(
    function(i){
    var $elem = $(this);
    $elem.animate({'left': positions + 'px'},800,function(){
    ++cnt;
    if(cnt == 4){
    $ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
    //$this.hide();
    ++first;
    if(parseInt(first + 4) < elems)
    enableNavRight();
    enableNavLeft();
    });
    }
    });
    }
    );
    });
    }

    /**
    * previous album
    */
    $ps_slider.find('.prev').bind('click',function(){
    if(first==1 || !navL) return;
    disableNavRight();
    disableNavLeft();
    moveLeft();
    });

    /**
    * we move the last album (the one on the right) to the right side of the window
    * the previous 4 albums slide one position, and finally the previous one in the list
    * slides in, to fill the space of the last one
    */
    function moveLeft () {
    var hiddenRight = $(window).width() - $ps_albums.offset().left;

    var cnt = 0;
    var last= first+4;
    $ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
    var $this = $(this);
    $ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
    function(i){
    var $elem = $(this);
    $elem.animate({'left': positions[i+1] + 'px'},800,function(){
    ++cnt;
    if(cnt == 4){
    $ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
    //$this.hide();
    --first;
    enableNavRight();
    if(first > 1)
    enableNavLeft();
    });
    }
    });
    }
    );
    });
    }

    /**
    * disable or enable albums navigation
    */
    function disableNavRight () {
    navR = false;
    $ps_slider.find('.next').addClass('disabled');
    }
    function disableNavLeft () {
    navL = false;
    $ps_slider.find('.prev').addClass('disabled');
    }
    function enableNavRight () {
    navR = true;
    $ps_slider.find('.next').removeClass('disabled');
    }
    function enableNavLeft () {
    navL = true;
    $ps_slider.find('.prev').removeClass('disabled');
    }

    var $ps_container = $('#ps_container');
    var $ps_overlay = $('#ps_overlay');
    var $ps_close = $('#ps_close');
    /**
    * when we click on an album,
    * we load with AJAX the list of pictures for that album.
    * we randomly rotate them except the last one, which is
    * the one the User sees first. We also resize and center each image.
    */
    $ps_albums.children('div').bind('click',function(){
    var $elem = $(this);
    var album_name = 'album' + parseInt($elem.index() + 6);
    var $loading = $('<div />',{className:'loading'});
    $elem.append($loading);
    $ps_container.find('img').remove();
    $.get('photostack.php', {album_name:album_name} , function(data) {
    var items_count = data.length;
    for(var i = 0; i < items_count; ++i){
    var item_source = data;
    var cnt = 0;
    $('<img />').load(function(){
    var $image = $(this);
    ++cnt;
    resizeCenterImage($image);
    $ps_container.append($image);
    var r = Math.floor(Math.random()*41)-20;
    if(cnt < items_count){
    $image.css({
    '-moz-transform' :'rotate('+r+'deg)',
    '-webkit-transform' :'rotate('+r+'deg)',
    'transform' :'rotate('+r+'deg)'
    });
    }
    if(cnt == items_count){
    $loading.remove();
    $ps_container.show();
    $ps_close.show();
    $ps_overlay.show();
    }
    }).attr('src',item_source);
    }
    },'json');
    });

    /**
    * when hovering each one of the images,
    * we show the button to navigate through them
    */
    $ps_container.live('mouseenter',function(){
    $('#ps_next_photo').show();
    $('#ps_prev_photo').show();
    }).live('mouseleave',function(){
    $('#ps_next_photo').hide();
    $('#ps_prev_photo').hide();
    });

    /**
    * navigate through the images:
    * the last one (the visible one) becomes the first one.
    * we also rotate 0 degrees the new visible picture
    */
    $('#ps_next_photo').bind('click',function(){
    var $current = $ps_container.find('img:last');
    var r = Math.floor(Math.random()*41)-20;

    var currentPositions = {
    marginLeft : $current.css('margin-left'),
    marginTop : $current.css('margin-top')
    }
    var $new_current = $current.prev();

    $current.animate({
    'marginLeft':'250px',
    'marginTop':'-385px'
    },250,function(){
    $(this).insertBefore($ps_container.find('img:first'))
    .css({
    '-moz-transform' :'rotate('+r+'deg)',
    '-webkit-transform' :'rotate('+r+'deg)',
    'transform' :'rotate('+r+'deg)'
    })
    .animate({
    'marginLeft':currentPositions.marginLeft,
    'marginTop' :currentPositions.marginTop
    },250,function(){
    $new_current.css({
    '-moz-transform' :'rotate(0deg)',
    '-webkit-transform' :'rotate(0deg)',
    'transform' :'rotate(0deg)'
    });
    });
    });
    });

    $('#ps_prev_photo').bind('click',function(){
    var $current = $ps_container.find('img:first');
    var r = Math.floor(Math.random()*41)-20;

    var currentPositions = {
    marginLeft : $current.css('margin-left'),
    marginTop : $current.css('margin-top')
    }
    var $new_current = $current.next();

    $current.animate({
    'marginLeft':'250px',
    'marginTop':'-385px'
    },250,function(){
    $(this).insertAfter($ps_container.find('img:last'))
    .css({
    '-moz-transform' :'rotate('+r+'deg)',
    '-webkit-transform' :'rotate('+r+'deg)',
    'transform' :'rotate('+r+'deg)'
    })
    .animate({
    'marginLeft':currentPositions.marginLeft,
    'marginTop' :currentPositions.marginTop
    },250,function(){
    $new_current.css({
    '-moz-transform' :'rotate(0deg)',
    '-webkit-transform' :'rotate(0deg)',
    'transform' :'rotate(0deg)'
    });
    });
    });
    });

    /**
    * close the images view, and go back to albums
    */
    $('#ps_close').bind('click',function(){
    $ps_container.hide();
    $ps_close.hide();
    $ps_overlay.fadeOut(400);
    });

    /**
    * resize and center the images
    */
    function resizeCenterImage($image){
    var theImage = new Image();
    theImage.src = $image.attr("src");
    var imgwidth = theImage.width;
    var imgheight = theImage.height;

    var containerwidth = 600;
    var containerheight = 480;

    if(imgwidth > containerwidth){
    var newwidth = containerwidth;
    var ratio = imgwidth / containerwidth;
    var newheight = imgheight / ratio;
    if(newheight > containerheight){
    var newnewheight = containerheight;
    var newratio = newheight/containerheight;
    var newnewwidth =newwidth/newratio;
    theImage.width = newnewwidth;
    theImage.height= newnewheight;
    }
    else{
    theImage.width = newwidth;
    theImage.height= newheight;
    }
    }
    else if(imgheight > containerheight){
    var newheight = containerheight;
    var ratio = imgheight / containerheight;
    var newwidth = imgwidth / ratio;
    if(newwidth > containerwidth){
    var newnewwidth = containerwidth;
    var newratio = newwidth/containerwidth;
    var newnewheight =newheight/newratio;
    theImage.height = newnewheight;
    theImage.width= newnewwidth;
    }
    else{
    theImage.width = newwidth;
    theImage.height= newheight;
    }
    }
    $image.css({
    'width' :theImage.width,
    'height' :theImage.height,
    'margin-top' :-(theImage.height/2)-10+'px',
    'margin-left' :-(theImage.width/2)-10+'px'
    });
    }
    });
    </script>
     

    Attached Files:

    hatsune miku, Oct 3, 2013 IP