jQuery Next-Previous Gallery按钮没有结束

Question

I built this div that appears and allows the user to browse through the images in an album. 我建立了这个div，该div出现了，并允许用户浏览相册中的图像。 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. 首先使用php-mysql获取图像的文件路径，然后将行数分配给名为array_size的JavaScript变量。 It then creates the picture_list array using the array_size variable and assigns a file path to each element of the array. 然后，它使用array_size变量创建picture_list数组，并为该数组的每个元素分配一个文件路径。 It then displays the popup div with the images in it with a next, back, close set of buttons. 然后，它会显示弹出式div，其中包含图像以及下一个向后，关闭的按钮集。 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. 当前，当后退按钮到达数组的第0个元素时，返回按钮将停止处理照片，但是当到达最大元素时，下一个按钮将继续在数组中滚动，而没有为后续图像分配值。 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页面：

<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: 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. 您可以通过使用if语句将其删除，如果图像在那里，请保留该按钮，否则将其删除。 First, add an attribute style="display:none;" 首先，添加属性style="display:none;" for both .next and .back When you output them in php. 当.next和.back都用php输出时。 Then in jquery, do this. 然后在jquery中，执行此操作。

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

jQuery Next-Previous Gallery按钮没有结束

问题描述

1 个解决方案

解决方案1
0 2014-10-19 04:24:45

jQuery Next-Previous Gallery按钮没有结束

问题描述

1 个解决方案

解决方案1 0 2014-10-19 04:24:45

解决方案1
0 2014-10-19 04:24:45