100
rated 0 times
[
107]
[
7]
/ answers: 1 / hits: 15093
/ 12 Years ago, fri, december 14, 2012, 12:00:00
Is there any way to run a script again after an ajax call?
I have a photoswipe (lightbox) jquery plug-in I call like this:
jQuery(document).ready(function($){
if( $('.img-frame a').length > 0 ){
var myPhotoSwipe = $(.img-frame a).photoSwipe();
}
});
I also have an ajax 'load more posts' function, and obviously photoswipe doesn't target images loaded after the first page load.
I don't have much ajax knowledge, any help on this? Thanks
UPDATE: Here's the 'load more' script:
jQuery(document).ready(function($) {
// The number of the next page to load (/page/x/).
var pageNum = parseInt(djwd_load_posts.startPage) + 1;
// The maximum number of pages the current query can return.
var max = parseInt(djwd_load_posts.maxPages);
// The link of the next page of posts.
var nextLink = djwd_load_posts.nextLink;
/**
* Replace the traditional navigation with our own,
* but only if there is at least one page of new posts to load.
*/
if(pageNum <= max) {
// Insert the More Posts link.
$('#content')
.append('<div class=lp-placeholder-'+ pageNum +'></div>')
.append('<p id=lp-load-posts class=long-button><a href=#>Load More Posts<i class=icon-chevron-down icon-large></i></a></p>');
// Remove the traditional navigation.
$('#nav-below').remove();
}
/**
* Load new posts when the link is clicked.
*/
$('#lp-load-posts a').click(function() {
// Are there more posts to load?
if(pageNum <= max) {
// Show that we're working.
$(this).text('Loading posts...');
$('.lp-placeholder-'+ pageNum).load(nextLink + ' .post',
function() {
$( this ).hide().fadeIn(700);
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(//page/[0-9]?/, '/page/'+ pageNum);
// Add a new placeholder, for when user clicks again.
$('#lp-load-posts')
.before('<div class=lp-placeholder-'+ pageNum +'></div>')
// Update the button message.
if(pageNum <= max) {
$('#lp-load-posts a').text('Load More Posts');
} else {
$('#lp-load-posts a').text('No more posts to load.');
}
}
);
} else {
$('#lp-load-posts a').append('.');
}
return false;
});
});
I call it in Wordpress functions.php this way:
function djwd_ajax_load_init() {
global $wp_query;
if( !is_singular() ) {
wp_enqueue_script('ajax-load-posts', get_template_directory_uri() . '/js/ajax-load-posts.js', array('jquery'), true );
$max = $wp_query->max_num_pages;
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
wp_localize_script(
'ajax-load-posts',
'djwd_load_posts',
array(
'startPage' => $paged,
'maxPages' => $max,
'nextLink' => next_posts($max, false)
)
);
}
}
add_action('template_redirect', 'djwd_ajax_load_init');
More From » jquery