Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
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

 Answers
13

Put it in a function, call in on pageload and in your ajax call.



function setMyPhotoSwipe() {
var $targets = $('.img-frame a').not('.photo-swipe');

if($targets.length > 0 ){
$targets.addClass('photo-swipe').photoSwipe();
};
};

jQuery(document).ready(function($){
setMyPhotoSwipe();
});


By the way, if dont't need variable myPhotoSwipe, then you dont't have to set it. You are also using $('.img-frame a') twice, so cache the result.



And your load call:



$('.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.');
}

// New content has been loaded and insertet, so set up photo swipe
setMyPhotoSwipe();
}
);

[#81421] Thursday, December 13, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
feliciarainak

Total Points: 104
Total Questions: 91
Total Answers: 83

Location: Greenland
Member since Thu, Oct 27, 2022
2 Years ago
;