使用 .load 帮助加载“画廊”画廊答案

【问题标题】：Help loading "galleria" gallery with .load使用 .load 帮助加载“画廊”画廊
【发布时间】：2011-05-03 15:59:10
【问题描述】：

我有一个包含 100 多张图片的图库，为了使其加载速度更快，我想将其分成 30 组。页面上有一个导航“图库 1 2 3 4 5”，当用户点击任何我想将链接的href加载到“#rCol”的数字中 - 但只有“#galleria”部分。我可以让它加载内容，但它 A）加载整个页面，B）“画廊”功能未启用。

是否可以制作一个包含所有图像的 xml 文件并创建一个一次可以跳过 30 个图像的寻呼机？

我正在尝试从链接的 href 中创建一个 var，因此我不必为每个类添加一个类并为每个类编写一个函数。

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria();
        });
    });

// Initialize Galleria
$("#galleria").galleria({
    transition: 'fade',
    width: 800,
    height: 536,


    extend: function(options) {

        Galleria.log(this) // the gallery instance
        Galleria.log(options) // the gallery options

        // listen to when an image is shown
        this.bind('image', function(e) {

            Galleria.log(e) // the event object may contain custom objects, in this case the main image
            Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
               this.openLightbox();
            }));
        });
    }
});

有什么想法吗？

尝试重新初始化“galleria”函数here。各种问题，不更新缩略图，然后单击专辑 2 后，返回专辑 1 它将整个页面加载到 div 中。

$("ul#gallery li a").live('click',function(e) {
        e.preventDefault();
        var $parent = $(this).parent();
        $parent.addClass("selected").siblings().removeClass("selected");
        var href = $(this).attr('href');
        $("#rCol").load(href, function() {
            $("#galleria").galleria({
                              transition: 'fade',
                              width: 800,
                              height: 536,


                              extend: function(options) {

                              Galleria.log(this) // the gallery instance
                              Galleria.log(options) // the gallery options

                              // listen to when an image is shown
                              this.bind('image', function(e) {

                              Galleria.log(e) // the event object may contain custom objects, in this case the main image
                              Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            $(e.imageTarget).click(this.proxy(function() {
                this.openLightbox();
            }));
            });
        }



                            });
        });
    });

【问题讨论】：

“加载整个页面”是指包括<html> 和<body> 和</body>？那会让它变得有趣。您能否发布指向整个 HTML 响应的链接？在 JS 中你可能只需要 2 个response.split。（讨厌，但可能。）
附言。 .live 确实只适用于 <A> 点击事件而不适用于 Galleria 插件，但您可以重新初始化它，没问题。
@Rudie，请参阅上面编辑过的评论，了解我尝试重新初始化图库功能。谢谢你。
这不是我的想法。我会用简单的（半伪=））html + js来回答。

标签： jquery ajax load

【解决方案1】：

图库（您的 HTML 将是这样的。对吗？）

<div id="rCol">
  <div id="galleria">
    <ul>
      <li><img src="" alt /></li>
      <li><img src="" alt /></li>
      <!-- etc -->
    </ul>
  </div>
</div>

导航链接（导航链接的语义并不重要）

<ul id="galleria-nav">
  <li><a href="?page=1">...</a></li>
  <li><a href="?page=2">...</a></li>
  <!-- etc -->
</ul>

Javascripts（这是重要的部分）

<script>
function loadPage(href) {
  // do ajax call, with success handler:
  $.post(href, function(rsp) {
    // `rsp` is now the ENTIRE html page (incl <html> etc????)
    // what you should do here, is filter the HTML, so you keep only div#galleria
    // I can't do that here, because I have no idea what your actual HTML looks like
    $('rCol').html(rsp);
    initGalleryClickables();
  }, null); // the `null` is just to show you there's no actual POST data
}
function initGalleryClickables() {
  // reinit the galleria plugin (DOM changed)
  $("#galleria").galleria({
    transition: 'fade',
    // more settings that you already have in your code
  });
  // reinit gallery image links? for lightbox or something? maybe not...
}
// no point in reiniting the nav links: their DOM doesn't change
$('#galleria-nav a').click(function(e) {
  e.preventDefault(); // it's not a link
  loadPage(this.href);
});
</script>

我不喜欢jQuery.live 并尽量避免它。它使用冒泡和在大 DOM 中效率不高。在许多情况下，也没有必要。喜欢这个。

我认为在您的情况下，问题在于您从 ajax 请求中获得的响应（请参阅内联注释）。您也许可以使用 Javascript 过滤正确的 HTML 片段，但很多更好的是在服务器端进行此过滤。我假设您可以访问输出脚本。几个if 就足够了。

编辑
您可以将.live 用于导航链接（以及画廊图片链接，如果有的话（链接）），但您仍然需要重新初始化 Galleria 插件，所以我不使用 .live 并重新初始化整个东西

正如我所说：您需要过滤正确的 HTML 片段。最好是服务器端（比 Javascript 更少下载和更容易过滤）。除非你给我看一些服务器端代码，否则我帮不了你=）

【讨论】：

我真的很感激。虽然不幸的是我并不完全理解它。我想我会尝试用 PHP 攻击过滤服务器端......如果你在附近 - 关于“rsp”的进一步解释以及我需要在服务器端做的事情会很棒。谢谢你。
我不能告诉你在服务器端做什么，除非我知道你现在是怎么做的。您有权访问输出脚本吗？ php？ ASP？ CMS？我已经扩展并评论了上述答案中的代码。