Question

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

是否可以创建一个包含所有图像的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();
            }));
            });
        }



                            });
        });
    });

Answer 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更少下载和更容易过滤）。除非你向我展示一些服务器端代码=）
，否则我无法帮助你

帮助用.load加载“galleria”图库

1 个答案: