Question

我搜索过，但没有找到答案。

我有一个网站，以缩略图格式显示数百张图片。我目前正在使用php来显示缩略图中的所有图像，然后单击缩略图以全尺寸显示图像。

我想要做的是能够点击缩略图并查看生成的全尺寸图像，然后在此时能够在全尺寸图像中来回滚动而无需返回缩略图

作为一项附加功能，在查看缩略图时，我只想加载当前显示在客户端页面上的缩略图...即 - 如果客户端屏幕分辨率支持20，则仅加载20并等待加载其余的在客户端上，直到用户向下滚动。此用例中的主要客户端是iphone。

提前致谢！

Answer 1

你需要使用一个滑块jquery插件

像

<强> Jquery Light Box Plugin

Answer 2

当你点击图片时，它应该指向一个包含完整尺寸图像的新PHP文件，或者甚至更好，将它加载到带有php的新<div>中，你可以通过{{3获得客户端解析}}

Answer 3

你实际上有两个单独的问题。一个是显示拇指全尺寸，并能够点击下一个图像。几乎每个显示图像的插件都有这些选项。我个人使用fancybox，但选择你喜欢的任何人。要启用下一个/上一个按钮，您需要使用rel标记对图像进行分组。

现在要加载每页的图片，类似于谷歌的做法，你需要通过javascript加载它。以下是如何做到这一点的设置。这是未经测试的，因为我手头没有图库。

在下面的代码中，我将所有图像一次加载到数组中，当您拥有大量图像（如1000+）时，这并不完美。在这种情况下，您最好使用AJAX加载新页面。但如果您的图像数量较少，则会更快。

<script>
//simple JS class to store thumn and fullimage url
function MyImage(thumbnail, fullimage, imgtitle) {
  this.thumb = thumbnail;
  this.full = fullimage;
  this.title = imgtitle;
}

//array that holds all the images
var imagesArray = new Array();
var currentImage = 0;

<?php
//use php code to loop trough your images and store them in the array
//query code to fetch images
//each row like $row['thumb'] and $row['full'] and $row['title'];
while ($row = mysqli_fetch_assoc($result))
{
  echo "imagesArray.push(new MyImage('".$row['thumb']."', '".$row['full']."', '".$row['title']."'));";
}
?>

//the thumb width is the width of the full container incl. padding
//In this case I want to use 50x50 images and have 10px on the right and at the bottom. Which results in 60x60
var thumbWidth = 60;
var thumbHeight = 60;

var screenWidth = $('body').width();
var screenHeight = $('body').height();

var maxImagesPerRow = Math.round(screenWidth / thumbWidth);
var maxImagesPerCol = Math.round(screenHeight / thumbHeight);
var totalImagesPerPage = maxImagesPerRow * maxImagesPerCol;


//function to load a new page
//assuming you use jquery
function loadNextPage() {
  var start = currentImage;
  var end = currentImage + totalImagesPerPage;
  if (end >= imagesArray.length) {
    end = imagesArray.length - 1;
  }
  if (end<=start)
    return; //last images loaded

  $container = $('#thumbnailContainer'); //save to var for speed
  $page = $('<div></div>'); //use a new container, not on stage, to prevent the dom for reloading everything on each iteration of the loop
  for (start;start<=end;start++) {
    //add a new thumbnail to the page
    $page.append('<div style="margin:0;padding:0 10px 10px 0;"><a class="fancybox" rel="mygallery" href="'+imagesArray[start].full+'" title="'+imagesArray[start].title+'"><img src="'+imagesArray[start].thumb+'" alt="" /></a></div>');
  }
  currentImage = start;

  //when all images are added to the page, add the page to the container.
  $container.append($page);
}

$(function() { 
  //when loading ready, load the first page
  loadNextPage();  
});

//function to check if we need to load a new page
function checkScroll() {
  var fromTop = $('body').scrollTop();
  //page with a 1-based index
  var page = 1 + Math.round(fromTop / screenHeight); 

  var loadedImages = page*totalImagesPerPage;

  if (loadedImages==currentImage)  {
    //we are scrolling the last loaded page
    //load a new page
    loadNextPage();
  }  
}

window.onscroll = checkScroll;

</script>

<body>
    <div id='thumbnailContainer'></div>
</body>

缩略图后滚动浏览网页图片

3 个答案: