검색했지만 답변을 찾지 못했습니다.미리보기 이미지를 통해 웹 이미지 스크롤
나는 수백 장의 이미지를 축소판 형식으로 표시하는 웹 사이트를 운영하고 있습니다. 저는 현재 전체 이미지를 표시하기 위해 PHP를 사용하고 있습니다. 그리고 엄지 손톱을 클릭하면 풀 사이즈로 이미지가 표시됩니다.
내가하고 싶은 것은 미리보기 이미지를 클릭하여 결과로 만들어진 풀 사이즈 이미지를 볼 수 있고, 그 시점에서 풀 사이즈 이미지를 통해 앞뒤로 스크롤하지 않고 앞뒤로 스크롤 할 수 있습니다. 미리보기 이미지.
추가 기능으로 미리보기 이미지를 볼 때 현재 클라이언트 페이지에 표시되는 것을로드하고 싶습니다. 즉, 클라이언트 화면 해상도가 20을 지원하는 경우 20 개만로드하고 기다립니다. 사용자가 아래로 스크롤 할 때까지 나머지를 클라이언트에로드하십시오. 이 유스 케이스의 주요 클라이언트는 아이폰입니다.
미리 감사드립니다.
당신이 이미지를 클릭하면
처럼
플러그인 슬라이더 jQuery를 사용할 필요, 그것은 전체 크기 이미지를 포함하는 새로운 PHP 파일을 가리 키거나한다 심지어 더 나은, 새로운 <div>에로드 PHP와 함께 클라이언트 해상도를 얻을 수 other tools
당신은 실제로 두 개의 별도 questio ns. 하나는 엄지 손가락을 전체 크기로 표시하고 다음 이미지를 클릭 할 수있게하는 것입니다. 이미지를 표시하는 거의 모든 플러그인에는 옵션이 있습니다. 개인적으로는 fancybox을 사용하지만 원하는 사람을 선택하십시오. 다음/이전 버튼을 사용하려면 rel 태그를 사용하여 이미지를 그룹화해야합니다.
이제 Google과 비슷한 페이지 당 이미지를로드하려면 자바 스크립트로 모두로드해야합니다. 아래는 어떻게 할 수 있는지에 대한 설정입니다. 내가 손에 이미지 갤러리가 없기 때문에 이것은 테스트되지 않았습니다.
아래의 코드에서 모든 이미지를 한 번에 배열에로드합니다. 이미지가 많을 때 (예 : 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>