帮助加载“画廊”画廊与.load

我有100多个图像的图像画廊，使其加载速度更快我想它分割成30组在页面上有一个导航“图库1 2 3 4 5“，当用户点击任何数字时，我想将链接的href加载到”#rCol“ - 但只有”#galleria“部分。我可以得到它加载的内容，但它）加载整个页面和B）“环球免税店”功能未启用。帮助加载“画廊”画廊与.load

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

有什么想法吗？

试图重新初始化“圆顶场所”功能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(); 
      })); 
      }); 
     } 



          }); 
     }); 
    });

来源

2011-05-02 Dirty Bird Design

“加载整个页面”，你的意思是包括''和''和''？这会让它变得有趣。你能发布一个链接到整个HTML响应吗？你可能只需要在JS中使用2个'response.split'。（讨厌，但可能。） – Rudie 2011-05-02 20:25:12

PS。 '.live'确实只适用于''点击事件，不适用于广告系列插件，但您可以重新初始化，没问题。 – Rudie 2011-05-02 20:26:39

@Rudie，请参阅上面编辑的评论，以便我重新启用画廊功能。 thx人。 – 2011-05-02 20:41:09

画廊（您的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更少的下载和更容易的过滤）。我帮不了你，除非你给我看一些服务器端代码=）

来源

2011-05-02 21:49:09 Rudie

我真的很感激。虽然不幸我不完全明白这一点。我想我会尝试用PHP攻击过滤服务器端....如果你身边 - 关于“rsp”的一些进一步的解释和我需要做的服务器端将是很棒的。 thx人。 – 2011-05-03 02:21:08

我不能告诉你该怎么做服务器端，除非我知道你现在怎么做。你有权访问输出脚本？ PHP？ ASP？一个CMS？我已经在上面的答案中扩展和评论了代码。 – Rudie 2011-05-03 07:41:31

帮助加载“画廊”画廊与.load

回答

相关问题