1

我搜索了，但没有找到这个问题的答案。

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

我想做的是能够单击缩略图并查看生成的全尺寸图像，然后能够在全尺寸图像中来回滚动而不返回缩略图。

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

提前致谢！

4

3 回答 3

1

您需要使用滑块 jquery 插件

喜欢

Jquery 灯箱插件

于 2013-01-22T07:07:30.907 回答
0

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

现在要加载每页的图像，类似于 google 所做的，您需要通过 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>
于 2013-01-22T08:19:12.140 回答
0

当您单击图像时，它应该指向一个包含完整大小图像的新 PHP 文件，或者更好的是，使用 php 将其加载到新文件中，您可以使用其他工具<div>获取客户端分辨率

于 2013-01-22T07:07:48.440 回答