javascript - jQuery 下一个-上一个图库按钮在结束时不停止-6ren

javascript - jQuery 下一个-上一个图库按钮在结束时不停止

转载作者：行者123 更新时间：2023-11-28 08:11:29

26

4

我构建了这个 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 ;
}
}

最佳答案

我想这对你来说已经晚了，但也可能对其他人有帮助。您可以通过 if 语句将其删除，如果图像存在，则保留按钮，否则将其删除。首先，在 php 中输出时，为 .next 和 .back 添加属性 style="display:none;"。然后在 jquery 中执行此操作。

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

关于javascript - jQuery 下一个-上一个图库按钮在结束时不停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24148297/

26

4

0

文章推荐： css - Jssor slider 100% 宽度(模糊图像)

文章推荐： ios - 如何在 Swift guard 语句中定义弱变量

文章推荐： ios - UINavigationItem 标题 View 的框架

javascript - 图库:只有一张图像作为缩略图
这是一个链接:http://lomakincello.net/etu/sehen.php 我正在使用 HTML 和 CSS 创建一个网站。我不熟悉 JavaScript，所以有人帮助我制作了一个运行
jquery - 单击缩略图时用不同的图像替换大图像(图库)
大家好。我的目标是为自己的新爱好摄影创建一个个人作品集网站。目前一切就绪。 (这个可以看here。) 问题是，尽我所能，我无法在 CSS 中替换图像。我花了很长时间试图移动图像等，但它只是悲惨地失败
android - 图库 - 通过触摸滚动不起作用
我对画廊有疑问。我无法通过触摸滚动。通过 DPAD 或轨迹球滚动效果很好。这是一些代码:xml布局: 适配器: package de.goddchen.android.advent.tem
安卓 "Control"图库
是否有一个社区站点包含一组自定义控件或他们如何调用它为 View ，人们可以在其中获取和重用或发布比标准 UI 组件集更高级的东西？最佳答案 OpenIntents.org has a bunch
powershell - 无法注册 PS 图库
我看了很多论坛，也试过很多东西，就是无法添加PS图库我在公司代理后面，但我已经设置了我的个人资料来使用它。我正在尝试使用这些命令注册 PS 存储库 [Net.ServicePointManager]:
boost - 使用带有自定义顶点类的 boost 图库
我目前正在尝试在现有的 C++ 项目中使用 boost 图形库。我想将自定义类的对象存储在 boost 图中。下面是一个小示例，其中包含具有两个成员(一个字符串和一个整数)的自定义类定义及其相应的 g
Android 从路径获取图像(图库、图片等)
需要从路径获取图像。我已经尝试了所有方法，但似乎没有得到图像。我的两个图片路径: /storage/emulated/0/DCIM/Camera/20161025_081413.jpg conten
android - Turbolinks - 如何在单击表单按钮时打开原生相机/图库
我正在使用 Turbolinks 开发 Android 和 iOS 网络应用程序。我正在尝试使用 native View /进程实现拍摄新照片或从图库中选择一张照片。我的表单中有这一行当我通过
ListView 行中的 Android 图库
我正在尝试实现诸如适用于 Android 的 Airbnb 应用程序的效果，列出每行中水平滚动画廊的位置(并且每行都有带标题的顶层)。我在每个单元格中使用带有 FrameLayout 和 ViewPa
jquery - 图库 div 与页脚重叠
好吧，我是编码初学者。我下载了 Galereya Jquery 脚本。它有效，但它与代码中它下面的所有其他内容重叠。我尝试更改溢出和位置，但似乎没有任何效果。当我将它添加到另一个 div 中时，网格停
python - 图库 slider 图像太大
这是我在 stackoverflow 上的第一篇文章。因此，对于这篇文章中的一些不典型内容，我深表歉意。我编写了一个带有画廊 slider 的 Django 网站，但我不知道为什么图像太大。看这里:
css - 打开图像的宽度/高度(图库)
我正在处理一个网站的图库，它由显示所有图片的缩略图 block 组成以及用于显示特定图像的部分。这是我用来以实际大小显示缩略图和图像的代码。问题是:我想不出任何东西来设置打开图像的大小。设
javascript - 图库 slider 错误..
我使用 jquery 制作了一个简单的画廊，但是左右按钮不起作用？？我使用了 jquery 函数 first().appendTo 和 last().prependTo 请检查下面的链接 Mydem
JavaScript - 图库 - 灯箱 - 只有半个屏幕在后台变黑
好的伙计们，请不要杀了我，这是我的第一个问题，我对编程知之甚少:)所以我想用灯箱画廊创建一个简单的网站，你可以看看它here . 所以我无法解决的问题是，当您向下滚动页面时，照片后面没有黑色背景。我
c++ - 图库 API 设计
我正在编写自己的图形库 Graph++ ，我对接口(interface)应该返回什么有疑问。例如，我的 BFS 应该返回什么，我很困惑它是否应该返回按顺序访问的一组 vertices ，或者我应该有
Android:图库 View 已被弃用？
我一直在使用图库控件来显示照片，但在滑动照片时遇到问题。我需要一直滑动才能更改照片，否则它会弹回到上一张照片。在互联网上查询后，我听说画廊已被弃用。下一个可以与画廊控件执行相同操作的控件是什么？最
android - 如何在照片后更新 Android 图库？
为了上大学，我必须在 android 上开发一个带有面部检测的应用程序。为此，我必须在我的画廊中保存各种照片。问题是保存照片后，图库不会更新。更准确地说，如果我删除了我要保存图像的目录，我打开应用程序
android - 图库 View 不是从左边开始
我正在这样使用图库但是当我运行代码时，我发现画廊从中间开始，我想从左边开始。我该怎么办，请帮助我。最佳答案描述有关显示的一般信息的结构，例如其大小、密度和字体缩放。要访问 DisplayMe
android - 图库 Intent 仅显示图像或视频而不是两者？
我试图让用户从他的设备中选择图像或视频，目前它只显示视频或图像，具体取决于以下代码中首先写入的内容: Intent galleryIntent = new Intent(Intent.ACTION_
android - 图库 View 中图像的滚动速度
我正在创建一个 cover flow通过扩展 Gallery 类来处理图像。画廊 View 显示正常，但图像从右向左滚动的速度非常快，反之亦然。有什么方法可以调节图像在水平方向上从右到左移动的速度

首页

博学

6Ren·AI

商城

javascript - jQuery 下一个-上一个图库按钮在结束时不停止