Question

您好我在使用php和jQuery创建动态图库时遇到问题。简单来说，我有一百张想要以漂亮的形式展示的照片（对于摄影师的网站而言）。图片已经过优化，因此整个画廊的重量约为10mb。

我正在使用galleryView插件。 php用于从图像文件夹中获取所有文件名，并创建一个无序的s列表。 GalleryView然后获取列表并创建一个整洁的画廊。

我遇到的问题是你必须等待画廊展示才能下载所有图片。 10mbs需要很长时间。

在下载了几个文件后，是否有一个简单的选项来运行图库？

或者有人知道更好的方法吗？一些不错的jQuery gallery插件，可以处理许多图像？我一直很难找到一个。

提前致谢

Answer 1

似乎没有任何原生支持在 galleryView 中预加载图片。从规格：

我将在未来的版本
中研究预加载图像

所以你必须自己动手。

查看jQuery .load() 函数。

加载后显示第一张图片，然后在后台加载其他图片。

假设第一张图片位于id = first

$(function() { // <== doc ready

      // do something after first image is loaded
    $("#first").load( /* show the first image */ );

      // do something after all images loaded
    $("img").load( /* do the main gallery loop */ )
});

根据需要修改上述内容。假设您要显示第一个大图像和前5个缩略图等等。

以下是我的开始。我认为如果你不仅预装了第一张图片，而且预装了第一排拇指所需的图片数量，那么它看起来可能会更顺畅。

只显示一张图片的临时div，直到加载所有图片：

HTML：

<div id="temp"></div>
<div id="photos" class="galleryview">
    <img id="first" ... />
    <img ... />
    <img ... />
    <img ... />
    ...
</div>

JS：

$(function() { // <== doc ready

    var $photos = $("#photos"), $temp = $("#temp"),
        $first = $("#first");

      // Hide gallery:
    $photos.hide();      

      // show temp when 1st img loaded
    $first.load( $temp.append( $first.clone() ) );

      // To make things look smooth you can also make 
      // a quick gallery view out of temp. This only has 1 image.
    $temp.galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100,
    });

      // do full gallery when all imgs loaded
    $("img").load( 
          // remove the temp gallery
        $temp.remove();
          // show gallery
        $photos.galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 100,
            frame_height: 100,
        });
    );
});

Answer 2

JQuery Cycle插件是一个超可自定义的选项，请查看@ http://jquery.malsup.com/cycle/

他们甚至有一个预加载示例@ http://jquery.malsup.com/cycle/add3.html

Answer 3

@Peterajtai

不，你是对的，我没有看到一个。对我来说最好的方法是从一些图像开始:(下面是来自galleryview默认实现示例）：

<div id="photos" class="galleryview">
  <div class="panel">

     <img src="img/gallery/01.jpg" /> 
    <div class="panel-overlay">
      <h2>Effet du soleil sur le paysage</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
    </div>
  </div>

  <div class="panel">
     <img src="img/gallery/02.jpg" /> 
    <div class="panel-overlay">
      <h2>Eden</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.  View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
    </div>

  </div>
  <div class="panel">
     <img src="img/gallery/03.jpg" /> 
    <div class="panel-overlay">
      <h2>Snail on the Corn</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>.  View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/04.jpg" /> 
    <div class="panel-overlay">
      <h2>Flowers</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>.  View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/06.jpg" /> 
    <div class="panel-overlay">
      <h2>Alone Beach 2B</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>.  View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/05.jpg" /> 
    <div class="panel-overlay">
      <h2>Sunrise Trees</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>.  View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/07.jpg" /> 
    <div class="panel-overlay">
      <h2>Waterfall</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>.  View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/08.jpg" /> 
    <div class="panel-overlay">
      <h2>Death Valley</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>.  View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>

    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
    <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
    <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>

    <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
  </ul>
</div>

然后像这样运行ajax：

$.ajax({
url: 'getImgSrcs.php', //this will access the server and return srcs for remaining images, let's say pipe delimited for example
data: {'getimages': 'true'}, // this could easily be {getimages: 'block 1'}
type: 'post',
success function(data) {
imgarray = data.split("|"); // split into array giving thumbsrc:fullsrc:title;
$.each(imgarray, function(index) {
var thumbsrc = data[index].split(":")[0];
var fullsrc = data[index].split(":")[1];
var title = data[index].split(":")[2];
$('<div class="panel"></div>')
.append('<img src="' + thumbsrc + '" />')
.append('<div class="panel-overlay"></div>')
.append('<h2>' + title + '</h2>');
.append('<p>View full-size photo <a href="' + fullsrc + '" target="_blank">here</a>.</p>')
.appendTo('#photos');
})
}
})

您可以使用相同的功能来构建列表项和appendTo（'ul.filmstrip'）;

我个人会在php端使用for循环构建图像块并准备好插入

success: function(data) {
$("#photos").append(data);
}

或者你可以构建一个xml feed或json对象并通过它。您个人的选择。

在加载图片之前运行jQuery

3 个答案:

HTML：

JS：