使用.load帮助加载"galleria“图库
我有一个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();
}));
});
}
});
});
});回答 1
Stack Overflow用户
发布于 2011-05-03 05:49:10
这个图库(你的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更少的下载和更容易的过滤)。我不能帮你，除非你给我看一些服务器端的代码=)
https://stackoverflow.com/questions/5861567
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号