Thickbox for full image

lupker

I love this photoalbum, but i do not like the way the photo is displayed when clicking for the full photo in the image.php of the themes.

So I've added the Thickbox AJAX technique to make it more smooth and share the info here:

Download the Thickbox files from: http://jquery.com/demo/thickbox/
You will need the Thickbox.js / Thickbox.css / LoadingAnimation.gif and the jQueary.js (make sure you use the compressed version).

Add the links to the image.php file:

<!-- Thickbox CSS -->
<style type="text/css" media="all">@import "/thickbox.css";</style>

<!-- Thickbox JavaScript -->
<script type="text/javascript" src="/thickbox/jquery.js"></script>
<script type="text/javascript" src="/thickbox/thickbox.js"></script>

And add class="thickbox" and rel="photoalbum" to the id="image":

" class="thickbox" rel="fotoalbum" title="<?php echo getImageTitle();?>"> <?php printDefaultSizedImage(getImageTitle()); ?>

Edit the thickbox.css to change the colors etc... if you like.

Have fun!

Greetz,
Mark

monster

We think in the same way,
I love ZenPhoto, but I dont like the way the photos are displayed,
I have been using some other gallery which uses Thickbox for displaying images,
take a look http://www.pawelnawrocki.com/minishowcase/
It uses thickbox and it is great and it`s big advantage of that script.

I found ZenPhoto two days ago and I`m really impressed..
It is so customizable...
Can you give a link to your theme with thickbox?
I`m also going to develop new theme based on this http://www.pawelnawrocki.com/zenphoto/
but with thickboxes for displaying images.
Maybe I will also make try with slimboxes from here http://www.digitalia.be/software/slimbox

jayray999

I think I am missing something but what is the difference between what you have here and existing themes like HighSlide and ChiliLight?

Chilifrei64

The only difference I see is the top post said linking to the full size images using thickbox(lightbox... whatever) where as mine atleast(ChiliLight) the lightbox is a replacement for image.php..

Really it is just an over fascination with the whole lightbox phenomena. People want to use it wherever because it is a cool effect.

monster

I made some tests with thickbox, and it seems to be almost OK
(overlay doesnt work on FF - dont fulfil all window, on IE and Opera works fine)
http://www.pawelnawrocki.com/zenphoto/paris2007/

Why I didnt choose Lightbox2 (ChilliLight) B/C I dont like those transistions ,
they slow down browsing gallery and they are 'cheap' effect for me,
and in other hand they are pretty heavy JS. There is some other script which
looks exactly the same like LightBox JS2 but is only 7KB and is much more convenient.
It`s slimbox http://www.digitalia.be/software/slimbox

What about HighSlide? Hmmm,
If it is possible to turn of the enlarging effect and to leave just movable
lightbox I think it is worth trying.

Thanks

jleekun

Hey monster, could you send me your theme there? I'd like to play around with it and thickbox?

That would be great! Thanks in advance.

monster

It actually uses slimbox
It's effervescence theme with some small modifications,
We have already discussed how to implement
lightbox/slimbox/thickbox/undiscoveredalreadybox/.... in that thread
http://www.zenphoto.org/support/topic.php?id=1242
+ I have something new Now I know what one should put to get custom size
image in lightbox. Instead of `a href="<?=getFullImageURL();?>"` can be `a href="<?=getCustomImageURL(null, 580);?>"`
If you want me to help you, first install effervescence and make it working
(dont forget to copy customfunctions.php to /zen folder and make right modifications in it)

my gallery http://www.pawelnawrocki.com/zenphoto/
how fast does it load in your country?

jleekun

Honestly, when I download ef, it breaks on me, shows me one image with a ton of text in one line...

Any suggestions?

monster

Give a link to your gallery.
Didnt you forget to copy customfunctions.php to zen folder?
And did you adopt it to your table names in DB?
(if you have prefixes for example)

jleekun

http://www.septemberthree.com/photo/

Thanks.

jleekun

I didn't add any prefixes in the installation. So, custom functions should run "as is."

permesso

monster - big fan of your theme mods and site. I am trying to mimic it as well. I did the mods in the other thread you mentioned but didn't get it working. I changed the albums.php line to this:

<div class="image"><div class="imagethumb">" rel="lightbox[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div></div>

and added the includes for js files which are placed in js folder under the theme. css files in the css folder too. I used a working copy of effervescence on my system. I get these errors shown here:

https://secure.permesso.net/zenphoto/albums/Miscellaneous/themetest.jpg

not sure how to troubleshoot where the problem is. I switched the theme back to a working effervescence one for now. Any ideas? no prefixes for me either. Do I need to added something to customfunctions.php or is the one found in effervescence fine?

trisweb

@jleekun -- you still need to edit the customfunctions.php to fix the table names, the error you're getting is this:

`Failed. Error: Table 's3photo.zpimages' doesn't exist`

So it thinks the table is called zpimages. I believe that's hardcoded, and yes, they really should be using the set prefix, but you have to change it manually.

s3

Thanks Tris. Not sure, though, what I should be changing in the customfunctions php file. Any further assistance would be awesome.

s3

Nevermind. I got it!

monster

@permesso
<div class="image"><div class="imagethumb">" rel="lightbox[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div></div>

is wrong. Should be
`

" rel="lightbox[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?>

`
but you can also change
`<?php echo getFullImageURL();?>`
to
`<?php echo getCustomImageURL(550, null);?>`

s3

Hey monster, can you take a look at what it's doing now...? It's launching the picture extremely low... and cutting it in half or something.
Is this the difference between:

<?php echo getFullImageURL();?>

and

<?php echo getCustomImageURL(550, null);?>

I'm using the getFullImage.

s3

http://www.septemberthree.com/photo

s3=jleekun

monster

Difference between <?php echo getFullImageURL();?>
and <?php echo getCustomImageURL(550, null);?>
I think is very clear.

The first gives a link to original uploaded photo,
the second prints link to custom sized image.
(550px for example)

If you put large (I mean 1024x768, 1600x1200 or bigger)
you should use the second functions,
which resize photo to size which is more useful
for visitors who have only 1024x768 screen resolution
(it's still majority)

permesso

I now get the same thing as s3/jleekun now. In firefox, the thumbs look fine. When I click on them, I get what s3 describes above. The picture is displayed below the thumbs (no overlay) and only half of the image it there. In IE7, it begins to show the thumbs page then says cannot open site - operation aborted in a textbox popup and then doesn't even display the page. To clarify, I replaced the text:

<div class="image"><div class="imagethumb">" title="<?=getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div></div>

with

<div class="imagethumb">" rel="lightbox[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div>

thanks again for your help monster.

monster

@s3
I took a look to your site's source,
and I see you use roebox
``
Did you try to use slimbox? I don't know what is roebox,
maybe there is something wrong with this java script?

s3

Hey monster. Thanks for all your help so far. I've moved to slimbox and it is still giving me issues. The picture is launching below the thumb, etc...

monster

maybe you have bad scripts? i dont know
try my files http://www.pawelnawrocki.com/files/slimbox/

s3

Must be jinxed. Got a clean copy of eff, downloaded your slimbox, installed, and still broke. it must be magic!

permesso

At least it isn't just me, s3! I have the same issue. I appreciate the effort monster. I actually have been using your copies of the js and css files all along downloaded directy from your site's directories. Any chance we could just simplify things and you could just zip/tar your entire theme we could work from there. I don't expect you to clean it up for our use - just as is. Thanks again.

permesso

If I look at the photo that is displayed below the thumbs it just looks like the right third of it is displayed. Interestingly, using the keyboard arrows does move it to the next picture and the transitions look good. Just no overlay as it should. We must be missing something minor.

php 5.1.6
Apache/2.2.3 (Fedora)

monster

@permesso
http://www.zenphoto.org/trac/attachment/wiki/ZenphotoThemes/effervescence1.1+slimbox.zip

permesso

Thanks monster! I got it working with that. I didn't go back and compare things to see why it didn't work before. Thanks for your time.

I am now working through getting it working via https not http. In my setup, I have to use SSL for zenphoto (port 80 is blocked incoming). It appears that there are some issue with using SSL with mootools using the Window.onDomReady() function. I had to download the uncompressed version of the tools and do the mod discussed here:

http://forum.mootools.net/topic.php?id=1738&replies=4

I am still getting inconsistant results though. BTW monster, which parts of mootools are needed to make this work? I pretty much just did them all to get it working.

monster

Here are the modules required by Slimbox:

Native: Array, String, Function, Element
Window: Window.Base, Window.Size
Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)

jleekun

s3

Monster: Thanks. It seems to be working. I'm going to have to go back and compare what I did and what you have. My frustration is not that simply doesn't work, rather, that I do not understand what was broken!

Permesso, tell me what you find. I'm running into the same issue.