I have a script that I’am trying to integrate with ajax loading content. its not working when ajax loads the content. How can I integrate the two?
Thanks!
this is the ajax code:
jQuery(document).ready(function($) {
var page = 1;
var loading = true;
var $window = $(window);
var $content = $("#event-content");
var load_posts = function(){
$.ajax({
type : "GET",
data : {numPosts : 1, pageNumber: page},
dataType : "html",
url : "http://www.laartsonline.com/wp-content/themes/LaArtsOnline/loopEventsPage.php",
beforeSend : function(){
if(page != 1){
$content.append('<div id="temp_load" style="text-align:center; margin-top:20px;">\\
<img src="http://www.laartsonline.com/wp-content/themes/LaArtsOnline/images/ajax-loader.gif" />\\
</div>');
}
},
success : function(data){
$data = $(data);
if($data.length){
$data.hide();
$content.append($data);
$data.fadeIn(500, function(){
$("#temp_load").remove();
loading = false;
});
} else {
$("#temp_load").remove();
}
},
error : function(jqXHR, textStatus, errorThrown) {
$("#temp_load").remove();
alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
}
$window.scroll(function() {
var content_offset = $content.offset();
console.log(content_offset.top);
if(!loading && ($window.scrollTop() +
$window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
loading = true;
page++;
load_posts();
}
});
load_posts();
});
Here is the Lightbox code:
jQuery(document).ready(function($) {
// global variables for script
var current, size;
$('a.aggressive_lightbox').click(function(e) {
// prevent default click event
e.preventDefault();
// determine the index of clicked trigger
var slideNum = $('.aggressive_lightbox').index(this);
// find out if #lightbox exists
if ($('#aggressive_lightbox').length > 0) {
// #lightbox exists
$('#aggressive_lightbox').fadeIn(200);
// #lightbox does not exist - create and insert (runs 1st time only)
} else {
// create HTML markup for lightbox window
var aggressive_lightbox =
'<div id="aggressive_lightbox">' +
'<p class="close">Click To Close</p>' +
'<div id="aggressive_lightbox_container">' +
'<ul></ul>' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(aggressive_lightbox);
// fill lightbox with .lightboxTrigger hrefs in #imageSet
$('div.event_page_item').find('.gallery a').each(function() {
var $href = $(this).attr('href');
var $post_title = $(this).closest('div.event_page_item').find('h2').text();
$('#aggressive_lightbox_container ul').append(
'<li>' +
'<h3 class="lightbox">' + $post_title + '</h3>' +
'<div class="gallery_nav">' +
'<a href="#prev" class="prev slide-nav">PREV</a>' +
'<div class="social_buttons_lightbox">' +
'<a class="twitter-share-button" style="margin-right:10px !important;" href="http://twitter.com/home?status=' + $post_title + '+http://www.laartsonline.com/events/" target="_blank"><img src="http://www.laartsonline.com/wp-content/themes/LaArtsOnline/images/twitter_btn.jpg" width="60" height="20" alt="Share this on Twitter!" /></a>' +
'<a class="facebook_btn" style="margin-right:10px !important;" href="https://www.facebook.com/dialog/send?%20%20app_id=155180381273802&%20%20link=http://www.laartsonline.com/events/&%20%20picture=' + $href + '&%20%20name=' + $post_title + '&%20%20description=Check%20It%20Out!%20&%20%20redirect_uri=http://www.laartsonline.com/events/" target="_blank"><img src="http://www.laartsonline.com/wp-content/themes/LaArtsOnline/images/facebook_btn.jpg" width="52" height="20" alt="Send this on Facebook!" /></a>' +
'<a class="fb-send" href="https://www.facebook.com/dialog/feed?%20%20app_id=155180381273802&%20%20link=http://www.laartsonline.com/events/&%20%20picture=' + $href + '&%20%20name=' + $post_title + '&%20%20description=Check%20It%20Out!%20&%20%20redirect_uri=http://www.laartsonline.com/events/" target="_blank"><img src="http://www.laartsonline.com/wp-content/themes/LaArtsOnline/images/facebook_like_btn.jpg" width="47" height="20" alt="Like this on Facebook!" /></a>' +
'</div>' +
'<a href="#next" class="next slide-nav">NEXT</a>' +
'</div>' +
'<img src="' + $href + '">' +
'</li>'
);
});
$('div.event_page_item').find('.gallery a').each(function() {
var image_href = $(this).attr("href");
var title = $(this).closest('div.event_page_item').find('h2').text();
$('#aggressive_lightbox_container ul.social_gallery_buttons').append(
'<li>' +
'<div class="social_buttons_lightbox">' +
'<a class="twitter-share-button" href="http://twitter.com/home?status=' + title + '+http://www.laartsonline.com/events/" target="_blank"><img src="/wp-content/themes/LaArtsOnline/images/twitter_btn.jpg" width="60" height="20" alt="Share this on Twitter!" /></a>' +
'<a class="facebook_btn" href="http://www.facebook.com/share.php?s=100&p%5Btitle%5D=' + title + '%20-%20LAArtsOnline.com&p%5Burl%5D=http://www.laartsonline.com/events/&p%5Bimages%5D%5B0%5D=' + image_href + '&p%5Bsummary%5D=Check%20It%20Out!" target="_blank"><img src="/wp-content/themes/LaArtsOnline/images/facebook_btn.jpg" width="60" height="20" alt="Share this on Facebook!" /></a>' +
'<a class="fb-send" href="http://www.facebook.com/share.php?s=100&p%5Btitle%5D=' + title + '%20-%20LAArtsOnline.com&p%5Burl%5D=http://www.laartsonline.com/events/&p%5Bimages%5D%5B0%5D=' + image_href + '&p%5Bsummary%5D=Check%20It%20Out!" target="_blank"><img src="/wp-content/themes/LaArtsOnline/images/facebook_like_btn.jpg" width="47" height="20" alt="Like this on Facebook!" /></a>' +
'</li>' +
'</div>'
);
});
}
// setting size based on number of objects in slideshow
size = $('#aggressive_lightbox_container ul > li').length;
// hide all slide, then show the selected slide
$('#aggressive_lightbox_container ul > li').hide();
$('#aggressive_lightbox_container ul > li:eq(' + slideNum + ')').show();
// set current to selected slide
current = slideNum;
});
//Click anywhere on the page to get rid of lightbox window
$('body').on('click', '#aggressive_lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
$('#aggressive_lightbox').fadeOut(200);
});
// show/hide navigation when hovering over #slideshow
// navigation prev/next
$('body').on('click', '.slide-nav', function(e) {
// prevent default click event, and prevent event bubbling to prevent lightbox from closing
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var dest;
// looking for .prev
if ($this.hasClass('prev')) {
dest = current - 1;
if (dest < 0) {
dest = size - 1;
}
} else {
// in absence of .prev, assume .next
dest = current + 1;
if (dest > size - 1) {
dest = 0;
}
}
// fadeOut curent slide, FadeIn next/prev slide
$('#aggressive_lightbox_container ul > li:eq(' + current + ')').fadeOut(550);
$('#aggressive_lightbox_container ul > li:eq(' + dest + ')').fadeIn(550);
// update current slide
current = dest;
});
});