Lightbox 2.51 (using JQuery) spanning multiple pages

chrisn

Joined: 2008-04-24
Posts: 5

Posted: Mon, 2012-05-14 07:16

Hi all,

Hoping someone may be able to help. I have been working on intergrating the latest version of lightbox (2.51) which uses JQuery with the Siriux theme. I'm no coding wiz, but so far have the lightbox working without any issues however there is one last thing I would like to incorporate which is the ability to span multiple album pages. Have tried following the guides as written for the older versions of lightbox but keep hitting smarty error security issues. Has anyone had luck getting the newer JQuery version of lightbox to work? Unfortunately I still need to run with G2 until the embedding API is written for G3 (however that seams to be getting further away) so really hopeful of getting this feature to work.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Mon, 2012-05-14 12:39

Quote:

Unfortunately I still need to run with G2

There is nothing wrong w/ G2, it is more mature and powerful and Embeddable ;)

I have been working on a mobile G2.
If you visit this gallery w/ a touch enabled device, it will ask if you want to see the mobile version.
I'm using a different type of lightbox called Photoswipe which is optimized for mobile devices and "Swipable".
It is built using responsive design so it adjusts the layout for different screen resolutions and orientations.

I have 3 different techniques for reading in gallery2's album data using jQuery:

Using gallery's slideshow mediaRss feed
Or my own mediaRss script which has recursive/dynamic/mime search options
Also my own mediaBlock script's json feed (which is cross-domain capable)

it is possible to load a "shadow" gallery into a hidden <div /> using gallery's own mediaRss and activate lightbox on the hidden element:

<div id="target" style="display: none;"></div>
...
function getMediaRss(url){
    $.get(url, {}, function(data){
        if (data) {
            $(data).find('item').each(function(){
                // append our <a /> and <img /> to our target <div />
                $('#target').append($('<a />').attr({
                    href: $(this).children('media\\:content').attr('url'),
                    title: $(this).children('title').text()
                }).append($('<img />').attr({
                    src: $(this).children('media\\:thumbnail').attr('url'),
                    alt: $(this).children('title').text()
                })));
            });
        }
        // Screwy for webkit you cannot use the namespace for atom here but can above for media?
        if ($(data).find('atom\\:link[rel="next"], link[rel="next"]').length > 0) {
            // this will recurse to the end of the album
            getMediaRss($(data).find('atom\\:link[rel="next"], link[rel="next"]').attr('href'));
            return;
        }
        launchLightbox('#target a');
    });
}
// Kick off the show w/ the page's own mediaRss link something like:
// http://yoursite.com/gallery2/main.phpg2_view=slideshow.SlideshowMediaRss&g2_itemId=32&g2_browserPlugin=1&g2_offset=0
getMediaRss($('link[title="Photo RSS"]').attr('href'));

Now I don't know any of the specifics about your lightbox nor have I ever used the sirux theme, you'll have to fill in the blanks.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

chrisn

Joined: 2008-04-24
Posts: 5

Posted: Mon, 2012-05-14 22:26

Thanks suprsidr

don't get me wrong, G2 has served me well for many years, just with a large gallery it can be slow. The tests I've done so far with G3 suggest it will be faster. One of the reasons I've decided to stick with lighbox2 is that it is one of the few popups of its type which does not automatically offer the user a "Save Image As" option when they right click. I know that won't stop someone determined to steal images (and I do have them watermarked as well), but it does help to deter those who aren't quite so determined.

I know lvthunder had been working with an updated version of greypop that was using JQuery. By the looks of the latest download (greypop133) he has lightbox 2.51 incorpoated there. Even using the module from his latest update though I keep getting a security violation smarty error. It appears to be something to do with the math calculation for the number of pages in the album. I think it may be something to do with the fact that siriux doesn't use columns and rows in the same way as the matrix based themes. Unfortunately however my coding skills are pretty basic (okay with HTML and CSS) so this is where I get lost.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Tue, 2012-05-15 02:11

some themes return $theme.allChildIds in the templates

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

ichthyous

Joined: 2006-06-16
Posts: 324

Posted: Thu, 2012-08-02 18:59

Hi Supersidr,

I also have an older version of gallery installed and have been looking for a way to improve navigation. I have PGLightbox installed but I disabled the lightbox features years ago (2006 I think). I like the popup thumbs for navigational purposes but I found that the theme hid all of my images by moving them into background divs. The result is that Google can't index any of the images, so that didn;t work for me. It also doesn't work for mobile devices, so I was thrilled to find this post that you found something for Gallery 2 that does. I am not really understanding how to implement this though. Do you just download the code from Photoswipe and place it in the header of the theme.tpl page? Then place your code above where exactly?

Thanks!

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Thu, 2012-08-02 19:40

I've created an easy way to display your gallery items on mobile.
The idea is to create a separate page to redirect mobile users to.
Like on my test site it will ask users w/ touch enabled devices if they want to see the mobile version instead.
If they confirm, they get redirected to http://testr.suprsidr.com/m

I have made a RESTful interface for G2 and a jQuery plugin to populate the gallery via ajax requests.
I'm putting the spit/polish on it now and trying to do my least favorite documentation(may just do some samples instead).

-s

ichthyous

Joined: 2006-06-16
Posts: 324

Posted: Thu, 2012-08-02 20:16

I saw your test site and the swipe worked great on my Samsung Galaxy. I'm not sure what a RESTful interface is...I'll have to wait and see the final product. My gallery site is very old...Gallery version = 2.2-svn core 1.1.16. Will it work for a site this old?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Thu, 2012-08-02 21:15

Quote:

Gallery version = 2.2-svn core 1.1.16

I honestly don't remember what API changes were made since then.
You may have to update to at least 2.6

-s

chrisn Joined: 2008-04-24 Posts: 5	Posted: Mon, 2012-05-14 07:16
	Hi all, Hoping someone may be able to help. I have been working on intergrating the latest version of lightbox (2.51) which uses JQuery with the Siriux theme. I'm no coding wiz, but so far have the lightbox working without any issues however there is one last thing I would like to incorporate which is the ability to span multiple album pages. Have tried following the guides as written for the older versions of lightbox but keep hitting smarty error security issues. Has anyone had luck getting the newer JQuery version of lightbox to work? Unfortunately I still need to run with G2 until the embedding API is written for G3 (however that seams to be getting further away) so really hopeful of getting this feature to work.
	XUser login Username: * Password: * Create new account Request new password
suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Mon, 2012-05-14 12:39
	Quote: Unfortunately I still need to run with G2 There is nothing wrong w/ G2, it is more mature and powerful and Embeddable ;) I have been working on a mobile G2. If you visit this gallery w/ a touch enabled device, it will ask if you want to see the mobile version. I'm using a different type of lightbox called Photoswipe which is optimized for mobile devices and "Swipable". It is built using responsive design so it adjusts the layout for different screen resolutions and orientations. I have 3 different techniques for reading in gallery2's album data using jQuery: Using gallery's slideshow mediaRss feed Or my own mediaRss script which has recursive/dynamic/mime search options Also my own mediaBlock script's json feed (which is cross-domain capable) it is possible to load a "shadow" gallery into a hidden <div /> using gallery's own mediaRss and activate lightbox on the hidden element: <div id="target" style="display: none;"></div> ... function getMediaRss(url){ $.get(url, {}, function(data){ if (data) { $(data).find('item').each(function(){ // append our <a /> and <img /> to our target <div /> $('#target').append($('<a />').attr({ href: $(this).children('media\\:content').attr('url'), title: $(this).children('title').text() }).append($('<img />').attr({ src: $(this).children('media\\:thumbnail').attr('url'), alt: $(this).children('title').text() }))); }); } // Screwy for webkit you cannot use the namespace for atom here but can above for media? if ($(data).find('atom\\:link[rel="next"], link[rel="next"]').length > 0) { // this will recurse to the end of the album getMediaRss($(data).find('atom\\:link[rel="next"], link[rel="next"]').attr('href')); return; } launchLightbox('#target a'); }); } // Kick off the show w/ the page's own mediaRss link something like: // http://yoursite.com/gallery2/main.phpg2_view=slideshow.SlideshowMediaRss&g2_itemId=32&g2_browserPlugin=1&g2_offset=0 getMediaRss($('link[title="Photo RSS"]').attr('href')); Now I don't know any of the specifics about your lightbox nor have I ever used the sirux theme, you'll have to fill in the blanks. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

chrisn Joined: 2008-04-24 Posts: 5	Posted: Mon, 2012-05-14 22:26
	Thanks suprsidr don't get me wrong, G2 has served me well for many years, just with a large gallery it can be slow. The tests I've done so far with G3 suggest it will be faster. One of the reasons I've decided to stick with lighbox2 is that it is one of the few popups of its type which does not automatically offer the user a "Save Image As" option when they right click. I know that won't stop someone determined to steal images (and I do have them watermarked as well), but it does help to deter those who aren't quite so determined. I know lvthunder had been working with an updated version of greypop that was using JQuery. By the looks of the latest download (greypop133) he has lightbox 2.51 incorpoated there. Even using the module from his latest update though I keep getting a security violation smarty error. It appears to be something to do with the math calculation for the number of pages in the album. I think it may be something to do with the fact that siriux doesn't use columns and rows in the same way as the matrix based themes. Unfortunately however my coding skills are pretty basic (okay with HTML and CSS) so this is where I get lost.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Tue, 2012-05-15 02:11
	some themes return $theme.allChildIds in the templates -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

ichthyous Joined: 2006-06-16 Posts: 324	Posted: Thu, 2012-08-02 18:59
	Hi Supersidr, I also have an older version of gallery installed and have been looking for a way to improve navigation. I have PGLightbox installed but I disabled the lightbox features years ago (2006 I think). I like the popup thumbs for navigational purposes but I found that the theme hid all of my images by moving them into background divs. The result is that Google can't index any of the images, so that didn;t work for me. It also doesn't work for mobile devices, so I was thrilled to find this post that you found something for Gallery 2 that does. I am not really understanding how to implement this though. Do you just download the code from Photoswipe and place it in the header of the theme.tpl page? Then place your code above where exactly? Thanks!

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Thu, 2012-08-02 19:40
	I've created an easy way to display your gallery items on mobile. The idea is to create a separate page to redirect mobile users to. Like on my test site it will ask users w/ touch enabled devices if they want to see the mobile version instead. If they confirm, they get redirected to http://testr.suprsidr.com/m I have made a RESTful interface for G2 and a jQuery plugin to populate the gallery via ajax requests. I'm putting the spit/polish on it now and trying to do my least favorite documentation(may just do some samples instead). -s

ichthyous Joined: 2006-06-16 Posts: 324	Posted: Thu, 2012-08-02 20:16
	I saw your test site and the swipe worked great on my Samsung Galaxy. I'm not sure what a RESTful interface is...I'll have to wait and see the final product. My gallery site is very old...Gallery version = 2.2-svn core 1.1.16. Will it work for a site this old?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Thu, 2012-08-02 21:15
	Quote: Gallery version = 2.2-svn core 1.1.16 I honestly don't remember what API changes were made since then. You may have to update to at least 2.6 -s

Lightbox 2.51 (using JQuery) spanning multiple pages

XUser login