1

私は検索しましたが、これに対する答えは見つかりませんでした。

何百もの画像をサムネイル形式で表示する Web サイトがあります。私は現在、すべての画像をサムネイルで表示するためにphpを使用しています。サムネイルをクリックすると、画像がフルサイズで表示されます。

私がやりたいのは、サムネイルをクリックして結果のフルサイズの画像を表示し、その時点でサムネイルに戻らずにフルサイズの画像を前後にスクロールできるようにすることです。

追加機能として、サムネイルを表示するときに、現在クライアント ページに表示されているもののみを読み込みたいと思います...つまり、クライアントの画面解像度が 20 をサポートしている場合は、20 のみを読み込み、残りを読み込むのを待ちます。ユーザーが下にスクロールするまでクライアント。このユース ケースの主なクライアントは iPhone です。

前もって感謝します！

4

3 に答える 3

1

スライダーjqueryプラグインを使用する必要があります

お気に入り

Jquery ライト ボックス プラグイン

于 2013-01-22T07:07:30.907 に答える
0

実際には、2つの別々の質問があります。1つは、親指をフルサイズで表示し、クリックして次の画像に移動できるようにすることです。画像を表示するほとんどすべてのプラグインには、そのオプションがあります。個人的には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>
于 2013-01-22T08:19:12.140 に答える
0

画像をクリックすると、フルサイズの画像を含む新しい PHP ファイルを指す必要があります。さらに良いのは、php を使用して新しいファイルにロードし、他のツール<div>でクライアントの解像度を取得できることです。

于 2013-01-22T07:07:48.440 に答える