Shadowbox with Gallery2

Feliz

Joined: 2009-01-08
Posts: 30
Posted: Tue, 2012-08-21 15:00

Hi.

I've been looking everywhere and couldn't find an answer. So even knowing that Gallery 2 has been replaced by Gallery 3, is there any way to implement Shadowbox in Gallery 2?

Best Regards.

Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Tue, 2012-08-21 17:20

easy peasy

Edit gallery2/themes/your theme/templates/local/theme.tpl <- you may have to copy the original here.

in the <head /> add:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>

then in gallery2/themes/your theme/templates/local/album.tpl <- you may have to copy the original here.
find where the gsThumbMatrix is being produced and look for the $linkurl:

{capture assign=linkUrl}{g->url arg1="view=core.ShowItem"
                    arg2="itemId=`$child.id`"}{/capture}

change that from core.ShowItem to core.DownloadItem

then at the bottom of theme.tpl again you can init like:

<script>
Shadowbox.init({
    // skip the automatic setup again, we do this later manually
    skipSetup: true
});

window.onload = function() {

    // set up all anchor elements in gsThumbMatrix
    Shadowbox.setup("#gsThumbMatrix a", {
        gallery:            "My Fun Gallery",
        autoplay:     true
    });

};
</script>

untested

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Wed, 2012-08-22 09:29

Suprsidr.

Thank you for your quick answer, I'll try it later and post the results here.

Just one minor question: I have to copy the shadowbox module to the Modules folder of G2 right?

Best Regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2012-08-22 15:58
Quote:
Just one minor question: I have to copy the shadowbox module to the Modules folder of G2 right?

you can upload shadowbox whereever you want, as long as you link to the correct location when including the css and js files.
here is my shadowbox example

for shadowbox you have to make sure to set the rel attribute in album.tpl for the link to:
rel="shadowbox[gallery];player=img"
and then init shadowbox like:

<script>
    window.onload = function(){
        Shadowbox.init({
            overlayOpacity: 0.8
        }, Shadowbox.setup("#gsThumbMatrix a", {
            gallery: "My Gallery",
            continuous: true,
            counterType: "skip"
        }));
    }
</script>

I found colorbox easier to setup.
And topup is pretty easy too.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Sun, 2012-08-26 22:01

Hi, Suprsidr

Sorry to take your time once again, but I've been trying all the weekend to get shadowbox to work in gallery2 with no sucess. All I get is a white screen when I try to acess my gallery.

here what I did:

- Downloaded Shadowbox 3.0.3 (with JQuery adapter, and without it), and placed the folder in gallery2/modules.

- Then created the folder local in Matrix/templates, and copied album.tpl and theme.tpl to the folder. (It's an unchanged version of Matrix)

- Changed album and theme tpl following your instructions above, but only get a white empty screen.

In attach it's a zip file whith the two tpl, can you please try to see what am I doing wrong? Or it must be other version of shadowbox.

Thank's for your patience to answer to all this questions.

Best Regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-08-26 23:19
 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Mon, 2012-08-27 11:37

Suprsidr,

Thank you for you availability and fast answer, It's getting better, now I can at least see the gallery header :-) (screen.jpg), but something is still missing and now that you kindly corrected the TPL, shure it must be on my side.

The reason for all this is because I tried to update my site to gallery3, but it get slower than gallery2, it's missing some G2 functions, and I don't like lightbox in G2.

So if this time thing's don´t work I promise not to take more of your precious time, and move to G3. Here are the my last questions:

- In the TPL you send me, I don´t have to change nothing, right?

- I'm using in test's Xammp, with .htaccess and urlrewrite module. Is it ok?

- Could you please send me in attach or PM, the shadowbox files you're using, or the link where to download them?

Thanks in advance, on attach is the system info of my test site.

Best regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Mon, 2012-08-27 12:29
Quote:
In the TPL you send me, I don´t have to change nothing, right?

You should not have to change anything. But I did not test as it would affect my site globally. And I did not look to see what else you might have changed.

Quote:
I'm using in test's Xammp, with .htaccess and urlrewrite module. Is it ok?

disabling rewrite while you are testing other changes is better - you can re-enable later.

Quote:
Could you please send me in attach or PM, the shadowbox files you're using, or the link where to download them?

http://www.shadowbox-js.com/download.html I chose jQuery adapter and selected all options.

One issue I foresee w/ this approach is: we don't have access to the resized images in album view, so we are telling shadowbox to use the full image.

In my example I used an external page and jQuery to alter the links to point to an adapter I wrote so I can deliver the resize I want.
full image: http://www.flashyourweb.com/gallery2/embed_samples/getImage.php?g2_itemId=24213
resize image: http://www.flashyourweb.com/gallery2/embed_samples/getImage.php?g2_itemId=24213&g2_maxSize=600
This approach works very well, as users w/ javascript disabled get the default gallery operation and we progressively enhance the site w/ jQuery + shadowbox for users w/ javascript enabled.

Also this allows for excellent site integration.

I could whip up a template for that instead.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Mon, 2012-08-27 13:32

Supsidr

Many, many thanks for all your help and time, but it still doesn't work.

In the TPL's I send you, only changed what you told me in you first reply, nothing more.

So as promised I wont take more of your time. I´ll move to gallery 3 and try to put things my way or almost my way. :-)

Who knows the G2 team decide to create a Theme with an shadowbox module to G2. ;-)

Once more, thank you very much for your time and patience.

Keep up the good work.

Best regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Mon, 2012-08-27 15:32

Oh, you're giving up?
ok.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Mon, 2012-08-27 16:03

NO! Not giving up! If it is possible, I'm gonna do it.

But I don't like to bother other people, and I already took much of your time. Beside at this time, the problem is that with all this indecision I have a few hundred photos to put online, so I'll move to gallery 3 just to keep thing's working. And just because I already have it implemented, so it wont take much work to move my galleries there.

I'll keep my old gallery 2 online to test, and after return to this problem. It's just a matter of few days. But as soon I put all the galleries in G3. I'm going to try all this solutions you gave on my gallery 2 installation.

So once again thank's for you help. I´ll return to this discussion perhaps next week, with more developments. Or questions :-)...

Sincerely
Nuno Feliz

 
Dayo

Joined: 2005-11-04
Posts: 1642
Posted: Mon, 2012-08-27 17:12
Feliz wrote:
Just one minor question: I have to copy the shadowbox module to the Modules folder of G2 right?

No. You should not. This is probably why things are not working.

Only G2 specific modules/themes should go directly under the modules or themes directories and the shadowbox "module" is not such.
You can put it directly under the G2 folder or INSIDE a theme folder for instance but not directly in modules or themes.

OK

/gallery2/shadowbox
/gallery2/themes/Some_G2_Theme_Such_As_Matrix/shadowbox
/gallery2/modules/Some_G2_Module/shadowbox <- Probably not a good idea

NOT OK

/gallery2/modules/shadowbox
/gallery2/themes/shadowbox

The reason why is that any folder directly under those directories will be assumed to be a G2 module or theme and G2 will be looking to handle them as such by looking to load some files which it will not find in your case. When it does not find these, it will crash (blank/partial page display).

--
dakanji.com

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Mon, 2012-08-27 20:56
Quote:
Who knows the G2 team decide to create a Theme with an shadowbox module to G2. ;-)

Here you go a theme w/ shadowbox integrated. http://www.flashyourweb.com/filemgmt/index.php?id=56

Example

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Mon, 2012-08-27 22:30

Hi,

Dayo and Suprsidr, MANY, MANY, THANKS!!! :-)

The theme with shadowbox works like a charm, so I can keep with gallery2. It has some features that the G3 team thought they were not needed, and on my site its much faster.

Regardless the new theme, as a point of honor, and with all your tips and from Dayo, I'll try to make a theme with shadowbox working.

Thanks once again for all your help and patience.

Best regards
Nuno Feliz

P. S. - If you ever come to Porto - Portugal I´ll gladly buy you a dinner. :-)

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Tue, 2012-08-28 15:18

Hi,

Just one tinny little question. :-)

I've found a way to make shadowbox to display the photo caption as the title, but it need's some changes in shadowbox.js. The problem is the .js that comes with the theme only have a few functions changed to work with G2. :-(

Is it possible to make shadowbox show the photo caption as the title?

Best regards
Nuno Feliz

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Tue, 2012-08-28 17:35

I've found it!

The shadowbox.js is all in 4 huge lines. Now I only have to break all the lines to get to the part I need to change, without breaking the code.

Nuno Feliz

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Wed, 2012-08-29 16:29

Hi, Suprsidr

Remember what I said about not giving up? IT'S WORKING!!! :-)

Feliz wrote:
NO! Not giving up! If it is possible, I'm gonna do it.

With all your help, and many crashing and burning it´s working. As you can see in the picture, shadowbox is working in my theme, and displaying the photo exif caption as title. When it's finished I send you the theme.

The only turnoff is that after all this work I discover shadowbox only displays the photos on the current page. :-(

I've been checking what G3 does to turn around this characteristic, because on my site it shows all the photos in the album. So I found that G3 has function that creates a link to every photo in the specific album, allowing to shadowbox show all the photos. (See file G3.txt)

As I'm not an programming expert is it possible and easy to do the same in G2?

Best Regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2012-08-29 19:53

I can do anything w/ G2.
You have yet to explain what it is you want besides shadowbox.
Like:

  • how many items do we display on a album page
  • how many items in an album
  • how do we launch shadowbox
  • are we including other media types - video, audio...

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Thu, 2012-08-30 10:33

Hi,

Thanks for your answer. Ok, let's see if I can explain everything:

The theme right now for me is almost perfect. My site is a very basic one, you can check at http://www.nunofeliz.com (at this moment running on G3, until I get this theme tuned), and is just to show my photos to the people and it's not commercial. To enter click on [b]Menu in the camera and then you have the themes[/b] Máscaras (Traditional Masks) / Desporto (Sport) / Escapadelas (Travel) / Espectáculos ( Theatre, Concerts, etc.) / Diversos (Misc Themes).

It's only to display photos (800x800 px), and Shadowbox is just to visitors can see the photos in a good looking slideshow by clicking on a thumbnail, so that is already working 100%.

The only thing not perfect is as shadowbox only displays the photos in the active album page, and I photograph sport events and shows, some albums has at about 200 images divided by several pages. I can workaround this by making the albuns (ex. 5 columns x 40 lines) and then the photos stay all in the same page and everything works. But I'm afraid it take too long to load the page and shadowbox only starts after the page is completely loaded.

So here are the answers to your questions:

- How many items do we display on a album page: At this time (5C X 3L) 15
- How many items in an album: Around 250 máx.
- How do we launch shadowbox: By clicking on a thumbnail.
- Are we including other media types - video, audio...: No only photos (800 X 800 px)

I hope you understood this explanation.

Thank you once again for your patience and availability.

Best regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Thu, 2012-08-30 22:25

I think I have an idea and will try it tonight.

-s
All New jQuery Minislideshow for G2/G3

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Fri, 2012-08-31 01:25

Working w/ all data items now. Just replace your current copy w/ http://www.flashyourweb.com/filemgmt/index.php?id=56

Example

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Fri, 2012-08-31 09:05

Suprsidr

Many thanks for all your effort and work. I´ll try it later when I get home and post the results here.

Best regards

Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Fri, 2012-08-31 11:22

You were right, my system wasn't replacing the zip if the name was the same.
Current version now online.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Fri, 2012-08-31 11:32

Now everything seems alright.

I'll test it and post results here.

Thanks.
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Fri, 2012-08-31 12:32

Found some issues, working to solve. This turned out to be a major PITA

-s
All New jQuery Minislideshow for G2/G3

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Fri, 2012-08-31 12:59

Seems safe now.
I'll let the person who wanted this do further testing.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Fri, 2012-08-31 14:51
suprsidr wrote:
Seems safe now.
I'll let the person who wanted this do further testing.

-s
All New jQuery Minislideshow for G2/G3

Suprsidr

Sorry for giving you all this extra work. I'll test this and post the results here.

I appreciate all your effort and help, but shure you have more important thing's to do. When I came up with this idea, I thought it was simple because everywhere you read that shadowbox is almost the same as lightbox, and if this one works with G2 why shadowbox doesn't, and when you first reply to the post saying that was easy, I decided to give it a try.

But as I said before I don't like to bother other persons, and already took much of your time. So when you think that it's enough, just say it. Because if I put all the photos in only one page, the first version of shadowmatrix works perfect for me.

Best regards
Nuno Feliz

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Sat, 2012-09-01 23:29

Suprsidr,

IT WORK'S WITHOUT PROBLEMS!

Tested it on my test gallery against an 475 photo's album, spanned over 32 pages and it worked like a charm. Tested it with Mozzila, IE8 and Google Chrome all 100%.

Congratulations and once again thanks for the huge help and patience.

That was the good news.

This is only a minor issue, in order to shadowbox display the photo title, it must be included in the url that sends the information to shadowbox. I managed to make it work on the first version (working only with active page), by making the change bellow (marked in bold), in Album.tpl

115- {/g->container}
116- {elseif isset($child.thumbnail)}
117- <a href="{$linkUrl}" rel="{$rel}" title="{$child.description}">
118- {g->image item=$child image=$child.thumbnail class="giThumbnail"}
119- </a>

On the last version it only displays the title of the photos in the active page, after it shadowbox keep's working fine, but without displaying the title. Can you please tell me what to change in order to make it work through all images?

Thanks once again
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-09-02 06:01

I'll do this tomorrow

-s
All New jQuery Minislideshow for G2/G3

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-09-02 15:22
 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Sun, 2012-09-02 22:34

Supsidr

Sorry to say your new version doesn't work! This is the bad news...

The good ones is at least comparing the older and the newer version, makes me understand where and what to change. And with a little try and error and some changes in Theme.inc and Album.tpl, I managed to make it work at least on my dev site. Tested it with a 90 photo album and it worked 100%.

Here what I did:

Theme.inc

/*your version */
110- $tmp[$i]['id'] = $itemId;
111- $tmp[$i]['resizeId'] = $id;
112- $tmp[$i]['entityType'] = $item->getEntityType();
113- $tmp[$i]['title'] = $item->getTitle();
114- $tmp[$i]['summary'] = $item->getSummary();
115- $tmp[$i]['description'] = $item->getDescription();

/*my changes in bold*/
110- $tmp[$i]['id'] = $itemId;
111- $tmp[$i]['resizeId'] = $id;
112- $tmp[$i]['entityType'] = $item->getEntityType();
113- $tmp[$i]['title'] = $item->getSummary();
114- /*$tmp[$i]['summary'] = $item->getSummary();*/
115- $tmp[$i]['description'] = $item->getDescription();

Album.tpl

/*your version*/
109- {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
110- width=$child.thumbnail.width height=$child.thumbnail.height}
111- <a title="{$child.title}" href="{$linkUrl}" rel="{$rel}">
112- {g->image id="%ID%" item=$child image=$child.thumbnail
113- class="%CLASS% giThumbnail"}
114- </a>
115- {/g->container}
116- {elseif isset($child.thumbnail)}
117- <a title="{$child.title}" href="{$linkUrl}" rel="{$rel}">
118- {g->image item=$child image=$child.thumbnail class="giThumbnail"}
119- </a>

/*my changes in bold*/
109- {g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
110- width=$child.thumbnail.width height=$child.thumbnail.height}
111- <a title="{$child.summary}" href="{$linkUrl}" rel="{$rel}">
112- {g->image id="%ID%" item=$child image=$child.thumbnail
113- class="%CLASS% giThumbnail"}
114- </a>
115- {/g->container}
116- {elseif isset($child.thumbnail)}
/* putting title here only add an extra line with the description under the thumbnail*/
117- <a href="{$linkUrl}" rel="{$rel}">
118- {g->image item=$child image=$child.thumbnail class="giThumbnail"}
119- </a>

I found this solution using Firebug to see what it was being displayed as the photo description, try it and worked. :-)

So once again many thanks for all your effort, help an patience. As soon I have my site up and running, I'll notify here.

Best regards
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-09-02 23:34
Quote:
Sorry to say your new version doesn't work!

Well, that is misleading.
It does not display the way you want it.
But it displays the way a typical user would want it. Example

I'm glad you found a way to customize it for your preferences.

-s
All New jQuery Minislideshow for G2/G3

 
Feliz

Joined: 2009-01-08
Posts: 30
Posted: Mon, 2012-09-03 00:14

Sorry about the misleading.

I do not want to be misunderstood and less to put in question your excellent work. But I downloaded the theme, installed, cleaned all the caches and when trying it didn´t display nothing in the title in shadowbox, so my mistake I assumed that it was not working. I hope you accept my apologies for that.

The only explanation I find for this to work normally on your example and not on my site, probably is because I put the description of the photo in the exif and IPTC Description field with Adobe Lightroom, then import the photos to G2 with Server Add. At the import I use the Exif module to get the info from the photo to the database, so perhaps the module is putting the information on the wrong field, I didn´t changed nothing in the Exif module, and it was the only way I found to put it to work.

Hope to have clarified the situation.

Sincerely
Nuno Feliz

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2012-09-16 20:34

FYI I updated to v.1.1.7 today to fix dynamic album display.

-s
All New jQuery Minislideshow for G2/G3

 
fondy

Joined: 2003-03-13
Posts: 17
Posted: Wed, 2013-04-17 18:17

Hi

A very nice theme.

Have som problems. In some of my albums, not all, when I view the photos in the album, they show up as thumbnail.

On the top album, I have set the thumbnails to '150' and resized images to '1024', and this is also set til all subalbums.

But in some album all is ok, in some other, viewing the photo is at 150 size

regards Paal

 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2013-04-17 18:30

theme.inc line 182 set the size to something closer to 1024 like 800 or so.

-s
________________________________
All New jQuery Minislideshow for G2/G3

 
fondy

Joined: 2003-03-13
Posts: 17
Posted: Wed, 2013-04-17 18:52

Thx a lot, all is ok now

:)

regards