在縮略圖後滾動網頁圖像

<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-22 08:19:12

在縮略圖後滾動網頁圖像

回答

相關問題