I'm having trouble rebinding slimbox2 after ajax content is loaded. I realize I need to rebind the function on the ajax load but I have no idea how to do that. I'm using this code to generate the external content.
$(document).ready(function() {
$('.content_box').hide();
$('.sf-menuUP a').click(function(){
$('.content_box').fadeIn('slow');
});
var hash = window.location.hash.substr(1);
var href = $('.sf-menuUP li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('.sf-menuUP li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').fadeOut('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').fadeIn('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
I tried adding
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
to the bottom of my script hoping that would just reload it. But no luck. I've read livequery could work, but I don't know how/where/what to do with that.
I'm getting desperate. Please anyone?
Thanks.
How about changing your showNewContent() callback this way...
I had the same problem trying to reload slimbox. And implementing livequery for slimbox broke the gallery function just as redonkeechong experienced.
But I found on the Slimbox forum that you can simply add it to the AJAX output. So it'll look like...
Or you can save it to a separate file and use the getScript method after your AJAX call...
$.getScript('slimbox2/js/slimbox2.autoload.js')
Since livequery is deprecated for a long time, my solution that is working is to use the jQuery function
.each()
like in this example:to refresh i call the
refreshSlimbox()
when ajax is readyI took a look at liveQuery for you. Here's what you'd need to do:
Call me picky, but the next/previous functions don't work when the now pops up. Can livequery rebind those as well?
Here's the code for slimbox