phpまたはjqueryのリンクから画像をあらかじめロードする方法

Question

私はそれをそれぞれのサムネイルをクリックすると画像にセンタリング機能を適用しない、私のギャラリーの解決策を熱心に検索しました。代わりに、大きな画像がページの中央にポップアップするには、サムネイルを少なくとも2回クリックする必要があります。ギャラリーはjquery/phpです。私は動的にPHPを使用してサムネイルをロードし、PHPを使用して同じ名前のそれぞれの大きな画像にリンクしています。私は大きい画像をプリロードすることがこの問題を助けるだろうと思っています。どうすれば画像をたくさん持っているディレクトリ全体のように見ることができますか？スクリプトは次のとおりです。

<?php 
    error_reporting(0); 
/* function: returns files from dir */ 
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) { 
$files = array(); 
    if($handle = opendir($images_dir)) { 
while(false !== ($file = readdir($handle))) { 
    $extension = strtolower(get_file_extension($file)); 
    if($extension && in_array($extension,$exts)) { 
    $files[] = $file; 
    } 
} 
closedir($handle); 
    } 
    return $files; 
} 

/* function: returns a file's extension */ 
function get_file_extension($file_name) { 
    return substr(strrchr($file_name,'.'),1); 
} 

$images_dir = 'hftpnyc/thumbs/'; 
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/'; 
$thumbs_width = 100; 
$images_per_row = 11; 
$string = ""; 
/** generate photo gallery **/ 
$image_files = get_files($images_dir); 
if(count($image_files)) { 
$index = 0; 
foreach($image_files as $index=>$file) { 
$index++; 
$thumbnail_image = $thumbs_dir.$file; 
//if(!file_exists($thumbnail_image)) { 
    //$extension = get_file_extension($thumbnail_image); 
    //if($extension) { 
    //make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width); 
    //} 

//} 

error_reporting(0); 

echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "><a href="'.$images_dir.$file.'" rel="lrgimg" class="lightbox"> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></a></div>'; 

if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; } 
    } 
} 

else { 
echo '<p>There are no images in this gallery.</p>'; 
} 


?> 

<script type="text/javascript"> 

$(document).ready(function(){ 

$('.smllpic img').hover(function() { 
var $this = $(this); 
$this.stop().animate({'opacity':'1.0'},200); 
},function() { 
var $this = $(this); 
$this.stop().animate({'opacity':'0.7'},200); 
}); 
    function centreit(){ 


//get the height and width of the modal 
var modal_height = $('.box').height(); 
var modal_width = $('.box').width(); 
//get the height and width of the page 
var window_width = $(window).width(); 
var window_height = $(window).height(); 
//calculate top and left offset needed for centering 
var topp = (window_height - modal_height)/2; 
var left = (window_width - modal_width)/2; 

//apply new top and left css values 
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); 
$('.motown').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); 
}; 
$('.lightbox').click(function(e) { 
e.preventDefault(); // keeps new page from loading 

var thisPicture = $(this).attr('href'); // path to full sized picture, 
function getit(){ 
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;" ></div>'); 
}; 

centreit(); 

$(window).resize(function(){ 
$('.box').resize(); 
$('.motown').resize(); 
centreit(); 
}); 

if ($('.smllpic').click()){ 
getit(); 
centreit(); 
$("html").css("overflow", "hidden"); 
$('.backdrop').fadeTo(500,0.9); 
$('.box').children().fadeIn(1000); 
}; 

//$('.backdrop').css({ 'display' : 'block', opacity : 0}); 

$('.close').click(function(){ 
close_box();}); 

$('.backdrop').click(function(){ 
close_box();}); 

function close_box(){ 
$('.backdrop').remove(); 
$('.box').remove(); 
$("html").css("overflow", "");}; 
});}); 
</script> 

Answer 1

大きな画像をプリロードしないでください。ロード中のインジケータを表示するには、jQueryを使用する方が良いです（イメージのロード中に、 - http://ajaxload.info/からgifローディングインジケータをダウンロードできます）。イメージがロードされたら、インジケータを取り外します。