Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Lightbox no longer works after jQuery pagination is triggered

  1. #1
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Lightbox no longer works after jQuery pagination is triggered

    We are using two scripts at the same time: prettyPhoto and jQuery pagination. When the page first loads, both of the scripts are working. However, when I click on Page 2 of the pagination, the lightbox no longer shows but I can still go from one page to the next. These are the initialization scripts for both:

    jQuery Pagination:

    Code:
    <script type="text/javascript">
    
                // This is a very simple demo that shows how a range of elements can
                // be paginated.
                // The elements that will be displayed are in a hidden DIV and are
                // cloned for display. The elements are static, there are no Ajax 
                // calls involved.
    
                /**
                 * Callback function that displays the content.
                 *
                 * Gets called every time the user clicks on a pagination link.
                 *
                 * @param {int} page_index New Page index
                 * @param {jQuery} jq the container with the pagination links as a jQuery object
                 */
                function pageselectCallback(page_index, jq){
                    var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                    $('#Searchresult').empty().append(new_content);
                    return false;
                }
    
                /** 
                 * Initialisation function for pagination
                 */
                function initPagination() {
                    // count entries inside the hidden content
                    var num_entries = jQuery('#hiddenresult div.result').length;
                    // Create content inside pagination element
                    $("#Pagination").pagination(num_entries, {
                        callback: pageselectCallback,
                        items_per_page:1 // Show only one item per page
                    });
                 }
    
                // When document is ready, initialize pagination
                $(document).ready(function(){                  
                    initPagination();
                });
    </script>
    prettyPhoto:

    Code:
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>
    Anyone knows where the conflict lies? Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    It's not a conflict. Pretty Photo was initialized on the document when it was ready. Later, using the pagination script the document is changed. The initialized elements no longer exist, new ones that are qualified are perhaps introduced, but they aren't initialized by Pretty Photo, so would act as ordinary links.

    This depends to a degree upon how robust Pretty Photo is. But if it's as robust as most jQuery based Lightbox type scripts, you could probably use the pageselectCallback function to initialize the new content, additions highlighted:

    Code:
                /**
                 * Callback function that displays the content.
                 *
                 * Gets called every time the user clicks on a pagination link.
                 *
                 * @param {int} page_index New Page index
                 * @param {jQuery} jq the container with the pagination links as a jQuery object
                 */
                function pageselectCallback(page_index, jq){
                    var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                    $('#Searchresult').empty().append(new_content);
                    $("a[rel^='prettyPhoto']").prettyPhoto();
                    return false;
                }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    flash_noob (07-08-2011)

  4. #3
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    It worked and your explanation makes sense. Thanks a lot!

  5. #4
    Join Date
    Jun 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default prettyPhoto popup numbering of images and pages problem

    I have similar problem and want to ask if this solve a problem with numbering of images in PrettyPhoto popup window. Now i use the same libraries (prettyPhoto, jquery_pagination ) to show thumbnails on few pages with 6 images on each. And when i click on page 2 (for example) and open first image in prettyPhoto popup numbering of images starts from 1 instead of 7.
    Here is a simple screenshot.
    Click image for larger version. 

Name:	1.jpg 
Views:	74 
Size:	19.9 KB 
ID:	5119Click image for larger version. 

Name:	2.jpg 
Views:	70 
Size:	13.7 KB 
ID:	5120
    It seems the re initializing of prettyphoto reset counter and i don't know how to fix this
    Thanks in advance.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    From what information you supply I can see that you are using the feature of PrettyPhoto that allows for a group of images to be seen. The original question only asked if individual images could be shown. If you want to preserve the original order of the images, you have to copy them in that order and use those, not the ones that show in the pagination 'pages'. The ones in the 'pages' must be able to trigger the ones in the original order though.

    So you would do something like, on document ready copy (clone) all the links in the group to a hidden div at the beginning of the page, remove the rel from the links in the 'pages' and replace it with a class. Then initialize the hidden links to PrettyPhoto. Then add a live() or on() event (which depends upon the version of jQuery you're using) to the document, something like (requires jQuery 1.7 or later):

    Code:
    jQuery(function($){
    	var $origorder = $('<div></div>').css({visibility: 'hidden', position: 'absolute', top: -10000, left: -10000}).prependTo('body'),
    	$ppas = $("a[rel^='prettyPhoto']");
    	$ppas.each(function(i, a){
    		var $ppa = $ppas[i];
    		$ppa.clone(true).appendTo($origorder);
    		a.removeAttribute('rel');
    		$ppa.addClass('prettyphotoproxy');
    	});
    	$ppas = $("a[rel^='prettyPhoto']");
    	$ppas.prettyPhoto();
    	$(document).on('click', '.prettyphotoproxy', function(e){
    		var href = this.href;
    		$ppas.each(function(i, a){
    			if(a.href === href){
    				$ppas[i].trigger('click');
    				e.preventDefault();
    				return false;
    			}
    		});
    	});
    });
    Since I cannot know what your setup is like, I would have to make my own demo up from scratch and hope that it was close enough to what you're doing to work for it and to even just to test my code for syntax, basic workability. That's a waste of my time. If I could see your page, I could use developer tools to determine a good way to copy the links and activate them as I describe. What I just wrote in the above code block might work 'as is' though, so try it. And get rid of the highlighted line in the callback:

    Code:
                /**
                 * Callback function that displays the content.
                 *
                 * Gets called every time the user clicks on a pagination link.
                 *
                 * @param {int} page_index New Page index
                 * @param {jQuery} jq the container with the pagination links as a jQuery object
                 */
                function pageselectCallback(page_index, jq){
                    var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
                    $('#Searchresult').empty().append(new_content);
                    $("a[rel^='prettyPhoto']").prettyPhoto();
                    return false;
                }
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Jun 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick answer and your help. I will try to use your fix (it will take some time because i'm newbie in javascript ) but i got the idea. Here is my page where i'm trying to set up 4 galleries with pagination: http://mal.comule.com/lt/gallery.php
    I know the initPagination and callbacks can be made better, but i'm still learning.
    Thanks again - i will try now to fix order of images.

    edit:
    Now i realized that the numbering is not the only problem When i'm on page 2 and open last image, the NEXT button open first image of page 1, instead of first image on page 3. It seems i can't use this pagination with gallery and must manage it with php somehow Thanks again for reply and sorry for wasting your time!
    Last edited by Amok; 07-02-2013 at 07:03 AM.

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    If you want only the items on a given 'page' to be in a group, all you need to do is:

    Code:
    function pageselectCallback1(page_index, jq){
    	var new_content1 = $("#hiddenresult1 a.result").slice(page_index * ITEMS_PER_PAGE, (page_index + 1) * ITEMS_PER_PAGE).clone();
    	$("#Searchresult1").html(new_content1);
    	$("#Searchresult1 a[rel^='prettyPhoto']").prettyPhoto({social_tools:false, slideshow:4000});
    	return false;
    }
    function pageselectCallback2(page_index, jq){
    	var new_content2 = $("#hiddenresult2 a.result").slice(page_index * ITEMS_PER_PAGE, (page_index + 1) * ITEMS_PER_PAGE).clone();
    	$("#Searchresult2").html(new_content2);
    	$("#Searchresult2 a[rel^='prettyPhoto']").prettyPhoto({social_tools:false, slideshow:4000});
    	return false;
    }
    function pageselectCallback3(page_index, jq){
    	var new_content3 = $("#hiddenresult3 a.result").slice(page_index * ITEMS_PER_PAGE, (page_index + 1) * ITEMS_PER_PAGE).clone();
    	$("#Searchresult3").html(new_content3);
    	$("#Searchresult3 a[rel^='prettyPhoto']").prettyPhoto({social_tools:false, slideshow:4000});
    	return false;
    }
    function pageselectCallback4(page_index, jq){
    	var new_content4 = $("#hiddenresult4 a.result").slice(page_index * ITEMS_PER_PAGE, (page_index + 1) * ITEMS_PER_PAGE).clone();
    	$("#Searchresult4").html(new_content4);
    	$("#Searchresult4 a[rel^='prettyPhoto']").prettyPhoto({social_tools:false, slideshow:4000});
    	return false;
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I think you might like this version (right click and 'Save As'):

    gallerylt-2-h.zip
    Last edited by jscheuer1; 07-03-2013 at 06:09 AM. Reason: update file for IE 7 and less
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Amok (07-04-2013)

  11. #9
    Join Date
    Jun 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    WOW, this is amazing Just what i wanted to make. Thank you very much!

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Great! I have a slightly more streamlined version which adds a cookie to keep track of which page the visitor is on in each gallery:

    gallerylt-3-h.zip

    I made one modification you might want to reverse. I used the Google hosted version of jQuery:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    Since your server is probably not very close to the Google server, going back to your hosted copy:

    Code:
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    might be a good idea. However, if your target audience might be closer to the Google servers, using the Google hosted version might be a good thing. And it may already be cached by many of your visitors, which would cut down a little on load time.

    About load time. It might be a good idea to figure out a way to not have the thumbnail images load until they're made visible. I'll have a look at that. And, since they're only thumbnails, consider cutting down on their byte load by optimizing them. That will also speed loading of the page. And some of the larger images are so large they take over the screen and more when expanded, they don't really need to be that large.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •