Question

我有一个水平的图库，其图像是从缩略图文件夹填充的。我想创建一个实用程序，使单击的图像始终保留在缩略图调色板的中间。类似于提出的问题here。

该代码的最低版本如下：

HTML

<!DOCTYPE html>
<html>
<head>
  <style>

  #loaded_img_panel {
    border-top: solid 0.3em #f1ded9;
    display:flex;
    flex-wrap: nowrap;
    overflow-x:auto;
    padding: 10px 0 0 0;
  }

  #loaded_img_panel > ul > li {
    list-style: none;
  }

  #loaded_img_panel ul li img {
    display: inline;
    width: 210px;
    height:175px;
    cursor: pointer;
  }

  #loaded_img_panel   img.active{
      border: 0.4em solid red;
      padding : 5px;
  }

  #loaded_img_panel > caption {
      display:block;
  }

  #loaded_img_panel img:hover {
      opacity: 0.5;
  }

  </style>
</head>

<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>

  <div class="loaded_img_panel" id="loaded_img_panel">  
  </div>

</body>
</html>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>

  window.addEventListener('load', function(e) {
    var matchLst = "thumb";
    var project = "upload";

  if (matchLst !== null && matchLst !=="") {
    $.post("loadimages.php", { 'project' : project,'matchLst' : matchLst }, function(output){
      $("#loaded_img_panel").html(output).show();
      });
  }
  })

  $(function(){
    $('#gotoframe').change(function() {
      var i = $(this).val() -1;
      activeBook(i);
      localStorage.setItem('clicki', i);
    });

    $('#loaded_img_panel').on('click', 'img', function() {
      activeBook($(this).index());
    });

    function activeBook(i){
      $('#loaded_img_panel img').removeClass('active');
      var active = $('#loaded_img_panel img').eq(i).addClass('active');
      var left = active.position().left;  
      console.log("firstleft: " + left);
      var currScroll= $(".loaded_img_panel").scrollLeft(); 
      var contWidth = $('.loaded_img_panel').width()/2; 
      var activeOuterWidth = active.outerWidth()/2; 
      left= left + currScroll - contWidth + activeOuterWidth;
      $('.loaded_img_panel').animate( { 
        scrollLeft: left
      },'slow');
    }
  });
</script>

loadimages.php

<?php
session_start();

$project = $_POST['project'];
$match = $_POST['matchLst'];
$_SESSION['matchLst'] = $match;

$tardir = "projects/" . $project . "/" . $match . "/thumb/*.jpg" ;
$imgdir = "projects/" . $project . "/" . $match . "/" ;
$files = glob($tardir);

for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $imgname = basename($num);
    $img = $imgdir . $imgname;
    $filnam = substr($filname, -5);
    $filnam = rtrim($filnam);
    echo '<ul class="item" id="item">';
    echo '<li class="book"><img src="'.$img.'" id="thumbNails'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</li></ul>';
}

?>

php代码从文件夹渲染图像。当我从图库中单击图像时，我没有提供图像的位置，而是获得了静态值，直到使用滚动条选择了一些在加载时不可见的图像。这些点击会返回负数的排名值。我正在尝试做的事作为示例here。

jQuery水平图片库-将点击的图片保留到中间

0 个答案: