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,312
    Mentioned
    177 Post(s)
    Tagged
    8 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
  •