jQuery Next-Previous Gallery按鈕沒有結束

Question

我建立了這個div，該div出現了，並允許用戶瀏覽相冊中的圖像。 首先使用php-mysql獲取圖像的文件路徑，然后將行數分配給名為array_size的JavaScript變量。 然后，它使用array_size變量創建picture_list數組，並為該數組的每個元素分配一個文件路徑。 然后，它會顯示彈出式div，其中包含圖像以及下一個向后，關閉的按鈕集。 當前，當后退按鈕到達數組的第0個元素時，返回按鈕將停止處理照片，但是當到達最大元素時，下一個按鈕將繼續在數組中滾動，而沒有為后續圖像分配值。 我希望下一個和上一個按鈕都可以在數組中旋轉，並且目前對如何實現此功能沒有任何想法。 我一直在努力解決這一問題，並且距離發射這頭野獸還有一個星期的時間，因此再也無法坐在我的手上了。

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>

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

我想這對您來說太晚了，但也可能會幫助別人。 您可以通過使用if語句將其刪除，如果圖像在那里，請保留該按鈕，否則將其刪除。 首先，添加屬性style="display:none;" 當.next和.back都用php輸出時。 然后在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