SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot Chameleon's Avatar
    Join Date
    Oct 2004
    Location
    Arizona
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbox not working with ajax loading content

    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:
    Code JavaScript:
    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:
    Code JavaScript:
    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;
      });
    });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    How is it not working?

    What would be really helpful is if you could provide a link to a page where we could see this in action, with a brief description of what you expect to happen and what is actually happening.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •