I am using two scripts on my website
- jQuery/Ajax to load the next three posts without reloading the page
- jQuery to open each post in an iFrame/modal dialog
The problem is: after clicking "load more posts", and then clicking on one of the first 3 posts, the post is open twice.
I need to find a way to remove the function superbox() for the previous placeholder and add it again for the new placeholder (otherwise the new posts just open in a normal window).
The website is http://gotoviproekti-och.com
if(pageNum <= max) {
// Insert the "More Posts" link.
$('.content-middle')
.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
.append('<p id="pbd-alp-load-posts"><a href="#">Покажи още готови проекти</a></p>');
$(function(){
$.superbox();
});
//Single Page Carousel
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
}
/**
* Load new posts when the link is clicked.
*/
$('#pbd-alp-load-posts a').click(function() {
// Are there more posts to load?
if(pageNum <= max) {
// Show that we're working.
$(this).text('Loading...');
$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .pic',
function() {
// Update page number and nextLink.
pageNum++;
nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
// Add a new placeholder, for when user clicks again.
$('.content-middle')
.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div><div class="clearfloat"></div>')
$.superbox.detach();
$.superbox();
// Update the button message.
if(pageNum <= max) {
$('#pbd-alp-load-posts a').text('Load more posts');
}
);
} else {
$('#pbd-alp-load-posts a').append('.');
}
return false;
});
});