我构建了这个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>
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 ;
}
}
我想这对你来说有点晚了，但也可能帮助到别人。你可以通过if语句删除它，如果图像在那里，保留按钮，否则删除它们。首先，在php中输出.next和.back时，为它们添加一个属性style="display:none;"。然后在jquery中这样做。
if (newSRC!=='') {
$(".next,.back").show();
}else {
$(".next").hide();
$(".back").hide();
}