Php 缩略图后滚动浏览web图像_Php_Scroll

Php 缩略图后滚动浏览web图像

php scroll

Php 缩略图后滚动浏览web图像,php,scroll,Php,Scroll,我搜索了一下，但没有找到答案我有一个网站，以缩略图格式显示数百幅图像。我目前正在使用php以缩略图的形式显示所有图像，然后单击缩略图以全尺寸显示图像我想做的是能够点击一个缩略图，并看到结果的全尺寸图像，然后在这一点上能够在全尺寸图像之间来回滚动，而不返回到缩略图作为一个附加功能，在查看缩略图时，我只想加载当前显示在客户端页面上的缩略图…即-如果客户端屏幕分辨率支持20，则只加载20，并等待在客户端上加载其余的缩略图，直到用户向下滚动。本用例中的主要客户端是iphone 提前谢谢您需要使用

我搜索了一下，但没有找到答案

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

我想做的是能够点击一个缩略图，并看到结果的全尺寸图像，然后在这一点上能够在全尺寸图像之间来回滚动，而不返回到缩略图

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

提前谢谢

您需要使用slider jquery插件

像

您需要使用slider jquery插件

像

当你点击图像时，它应该指向一个包含全尺寸图像的新PHP文件，或者更好，用PHP将其加载到一个新的

中。当你点击图像时，它应该指向一个包含全尺寸图像的新PHP文件，或者更好，使用php将其加载到一个新的

中，您可以使用获得客户机解决方案。实际上，您有两个不同的问题。一个是显示拇指的全尺寸，并能够点击到下一个图像。几乎每个显示图像的插件都有这样的选项。就个人而言，我使用，但选择任何你喜欢的人。要启用下一个/上一个按钮，您需要使用

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>


//用于存储thumn和fullimage url的简单JS类
函数MyImage（缩略图、完整图像、imgtitle）{
this.thumb=缩略图；
this.full=fullimage；
this.title=imgtitle；
}
//包含所有图像的数组
var imagesArray=新数组（）；
var currentImage=0；
你有两个独立的问题。一个是显示拇指的全尺寸，并能够点击到下一个图像。几乎每个显示图像的插件都有这样的选项。就个人而言，我使用，但选择任何你喜欢的人。要启用下一个/上一个按钮，您需要使用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>


//用于存储thumn和fullimage url的简单JS类
函数MyImage（缩略图、完整图像、imgtitle）{
this.thumb=缩略图；
this.full=fullimage；
this.title=imgtitle；
}
//包含所有图像的数组
var imagesArray=新数组（）；
var currentImage=0；