Lightbox no longer works after jQuery pagination is triggered

**flash_noob** · 07-08-2011, 04:57 AM

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.

**jscheuer1** · 07-08-2011, 06:07 AM

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;
            }

**flash_noob** · 07-08-2011, 06:38 AM

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

**Amok** · 06-28-2013, 12:07 PM

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: 259
Size: 19.9 KB
ID: 5119

Click image for larger version.

Name: 2.jpg
Views: 250
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.

**jscheuer1** · 06-28-2013, 02:51 PM

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.

**Amok** · 07-02-2013, 06:46 AM

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!

**jscheuer1** · 07-02-2013, 07:55 AM

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.

**jscheuer1** · 07-03-2013, 05:18 AM

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

gallerylt-2-h.zip

**Amok** · 07-04-2013, 08:27 AM

WOW, this is amazing

Just what i wanted to make. Thank you very much!

**jscheuer1** · 07-04-2013, 09:04 AM

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.