Jquery “帮助加载”；凯丹酒店；画廊与。加载

我有一个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”功能。各种各样的问题，没有更新缩略图，然后单击相册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应该是这样的，对吧？）

导航链接（导航链接的语义无关紧要）

Javascripts（这是重要的部分）

函数加载页（href）{
//使用成功处理程序执行ajax调用：
$.post（href，函数（rsp）{
//'rsp'现在是整个html页面（包括等？？）
//这里应该做的是过滤HTML，所以只保留div#galleria
//我不能在这里这样做，因为我不知道您的实际HTML是什么样子的
$（'rCol'）.html（rsp）；
initGalleryClickables（）；
}，null）；//null只是表示没有实际的POST数据
}
函数initGalleryClickables（）{
//重新输入galleria插件（DOM已更改）
元（“#凯丹”）。凯丹({
过渡：“淡出”，
//代码中已有的更多设置
});
//reinit gallery图片链接？用于lightbox或其他东西？可能不是。。。
}
//重新初始化导航链接没有意义：它们的DOM不会改变
$（“#凯丹广场导航a”）。单击（功能（e）{
e、 preventDefault（）；//它不是链接
loadPage（this.href）；
});

我不喜欢

jQuery.live

并尽量避免它。它使用冒泡和在大的DOM中，这是没有效率的。在许多情况下，这也不是必要的。像这个

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

就足够了

编辑

您可以使用
.live
进行导航链接（和画廊图片链接，如果有的话（链接）），但您仍然需要重新初始化galleria插件，因此我不使用
.live
并重新初始化整个内容

正如我所说：您需要过滤正确的HTML片段。最好是服务器端（与Javascript相比，下载更少，过滤更容易）。我不能帮你，除非你给我看一些服务器端代码=）
和“加载整个页面”你的意思是包括
和
和
？那会很有趣的。你能发布一个链接到整个HTML响应吗？在JS中，您可能只需要2个
响应.split
。（讨厌，但可能。）PS.
.live
确实只适用于
点击事件，而不适用于galleria插件，但您可以重新初始化，没问题。@Rudie，请参阅上面编辑的评论，了解我重新初始化gallery功能的尝试。老兄，我不是这么想的。我会用简单的（半伪=）html+js来回答。我真的很感激。虽然不幸的是我并不完全理解。我想我会尝试用PHP攻击过滤服务器端……如果你在的话——对“rsp”的进一步解释和我需要在服务器端做的事情会很棒。我不能告诉你们服务器端该怎么做，除非我知道你们现在是怎么做的。您有权访问输出脚本吗？PHP？ASP？CMS？我已经在上面的答案中扩展并注释了代码。
<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>

<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>