jQuery Next-Previous Gallery Buttons Not Stopping at End

Question

I built this div that appears and allows the user to browse through the images in an album. It starts off by using php-mysql to get the file paths of the images and then assigns the number of rows to a javascript variable called array_size. It then creates the picture_list array using the array_size variable and assigns a file path to each element of the array. It then displays the popup div with the images in it with a next, back, close set of buttons. Currently the back button will stop progressing photos when it reaches the 0th element of the array which is okay but when it reaches the maximum element the next button will continue to scroll through the array with no values assigned for the following images. I would like both the next and back buttons to rotate through the array and am currently out of ideas on how to make this happen. I've been trying to work this out for a while and am a week from launching this beast so can't really sit on my hands any longer.

The HTML page:

<html>
<head>
<style>
@import "album_style.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>

 $(document).ready(function(){
var array_size = 0 ;
var active_index ;
var source_image ;
$('#largeImage').hide() ;
$('#imageBackground').hide() ;
$('#gallery img').click(function(){
    $('#largeImage img').attr('src',$(this).attr('src').replace('gallery','large'));
    $('#largeImage').show() ;
    $('#imageBackground').show() ;
    active_index = parseInt( $(this).attr('value') ) ;

});
$('.next').click(function( event ){
    active_index = active_index + 1 ;
    max_index = array_size - 1 ;
    if( active_index == array_size )
    {
        active_index = 0 ;
    }
    source_image = $('#largeImage img').attr('src') ;
    var newSrc = $('#largeImage img').attr('src').replace( source_image, picture_list[ active_index ] ) ;
    $('#largeImage img').attr('src', newSrc ) ;


});
$('.back').click(function( event ){
    active_index = active_index - 1 ;

    if( active_index < 0 )
    {
        active_index = array_size ;
    }
    source_image = $('#largeImage img').attr('src') ;
    var newSrc = $('#largeImage img').attr('src').replace( source_image, picture_list[ active_index ] ) ;
    $('#largeImage img').attr('src', newSrc ) ;

}) ;
$('.close').click(function(){
    $('#largeImage').hide();
    $('#imageBackground').hide() ;
});



});
</script>
</head>
<body>
<?php
require( 'albums_functions.php' );

draw_masthead();
gallery();



?>
</body>

</html>

The PHP:

function gallery()  //displays only the first 80 photos in the database.  
{
try
{
    $album_id = $_GET['id'] ;
    $db = honneyconnect( ) ;
    if( mysqli_connect_error() )
    {
        throw new Exception( "Could not connect to the database") ;
    }
    $query = 'select * from albums where album_id="'.$album_id.'"' ;
    $albums = $db->query( $query) ;
    $album_name = $albums->fetch_row();
    $default_pic = $album_name[1].'/'.$album_name[2] ;
    $albums->free();
    $query = 'select * from photos where album_id="'.$album_id.'"' ;
    $photos = $db->query( $query ) ;
    if( !$photos )
    {
        throw new Exception( "Query returned zero results." ) ;
    }
    else
    {
        $number_of_photos = $photos->num_rows ;
        echo "<script type='text/javascript'> array_size = parseInt( ".$number_of_photos." )  ;</script>" ; //figure out the size of the javascript array of photo sources 
        echo "<script type='text/javascript'> var picture_list = new Array( array_size ) ;</script>" ; //define the array
        echo "<div id='imageBackground'></div>" ;
        echo "<div id='largeImage'><input type='button' class='close' value='X'><input type='button' class='back' value='<<'><img src='".$default_pic."' ><input type='button' class='next' value='>>'></div>";
        echo "<div id='gallery'>" ;
        echo "<div id='thumbpanel'>" ;

        if( $number_of_photos > 80 )
        {
            $stop = 80 ;
        }
        else
        {
            $stop = $number_of_photos ;
        }
        for( $i = 0; $i < $stop ; $i++ )
        {
            $row = $photos->fetch_row() ;
            if( !$row )
            {
                $i = 80 ;
            }
            else
            {
                $file_path = $album_name[1]."/".$row[2] ;    //provides the path for the image source
                echo "<img value='".$i."' src='".$file_path."'>" ; //assigns the value for use in the jQuery scripts
                echo "<script type='text/javascript'> picture_list[ ".$i." ] = '".$file_path."'</script>" ;  //sends the values to the jQuery script
            }
        }
        echo "</div></div>" ;
    }
        $photos->free();
        $db->close();
}
catch( Exception $error )
{
    echo $error ;
}
}

Answer 1

I guess this is late for you but might help someone else too. You can remove it by having an if statement, if the image is there, keep the button, else remove them. First, add an attribute style="display:none;" for both .next and .back When you output them in php. Then in jquery, do this.

  if (newSRC!=='') {
      $(".next,.back").show();
  }else {
     $(".next").hide();
     $(".back").hide();
  }

jQuery Next-Previous Gallery Buttons Not Stopping at End

Question

1 answers

solution1
0 2014-10-19 04:24:45

jQuery Next-Previous Gallery Buttons Not Stopping at End

Question

1 answers

solution1 0 2014-10-19 04:24:45

solution1
0 2014-10-19 04:24:45