Lightbox theme

Chilifrei64

I posted this in response to another thread but figured I would post it in here since this a theme that has been created.

I created a theme using Lightbox.js

I basicaly have 2 versions..
One is my theme that I have colored to how I like things, with some simple blue's and greys

http://www.chilifrei.net/downloads/Chili-Light_Official.zip

and just the default theme but with Lightbox.js
http://www.chilifrei.net/downloads/Chili-Light_Default.zip

This theme uses the lightbox on the thumbnail page and basically removes the single image/commenting page.

you can see a demo at http://beta.chilifrei.net/zenphoto

Anymore information that I may not have posted here will be here:
http://www.chilifrei.net/?p=41

Enjoy

cowboydan

Well, I've been trying to install your Lightbox theme but I always get an annoying bug. When I click on an image (in the "album.php" file) I always get a Javascript error telling me "objLoadingImage has no properties" on line 193. Does anyone have a clue about that ?

Chilifrei64

That is one error I never ran into..
The implementation of lightbox on my part simply consisted of linking the js file on the page and adding a rel="lightbox" to the image tag

The only things I can think of is for some reason the path to the loading.gif is incorrect in the js file on line 36... it should start read
var loadingImage = 'themes/Chili-Light/images/loading.gif';

The only other thing that sparks my attention is on line 193 in the js file is
objLoadingImage.style.display = 'none';
since the error says no properties on 193.. give it some properties.. make 'none' into 'block'

I really dont know much about javascript at all.. what I gathered from setting all this up was just ensuring that you have the correct paths.. once I figured out what they should be everything worked fine..

I did just try to load the theme directly out of the zip into one of my test galleries and everything worked fine...

were any of the paths changed?

cowboydan

Thanks Chilifrei64 for your answer !

I tried various things and I finally just removed the line 193 and now it works fine. I really don't know why this error happened. The lightbox effect simply would not work, neither with Firefox nor with IE.

The line 36 doesn't work either. I tried to change the path to loading.gif but never get it to appear.

Thanks for your help on this issue !!

Now I have a new problem but it has nothing to do with your Lightbox theme : my images are just too large !! When I click on the thumbnail, the lightbox effet works fine but the image is much bigger than the screen ... so, it's not really nice-looking !

Chilifrei64

Yeah i noticed that too when I was playing with it.. you actually have to resize them before you put them up.. Oh well. atleast you got it working...

genosypheus

Would love to try this if it retains the commenting option. Love the effect though, great work, thanks!

Chilifrei64

how would you suggest keeping the commenting option?
... it would seem silly to just put the lightbox on the image page where the image is already displayed wouldnt it? If you have a logical way of doing it I will certinately try but if it is just gonna add an effect just for the sake of adding the effect and not be functional....

susitres

if you want to keep the commenting option, you should try to implement the lightbox variation done by particletree wm. you can find examples and code here

Unknown

If you guys are having issues with the images being too big for the page, you might want to consider using "Lightbox Plus"

http://serennz.cool.ne.jp/sb/sp/lightbox/

Just replace lightbox.js with lightbox_plus.js in the header part of the albums.php page in the template set.

This will then show your full sized images shrunk to the size of the page first, and the user can choose to click a button in the top left of the image to see it full size.

Also of note, to get the "loading" animated gif to load in the center of the screen, put

text-align:left;

in the

#overlay{

area of zen.css

Works like a charm for me. Big thanks to Chili for the work!

smoyssidis

Has anyone tried out ZP with Lightbox JS v2.0? Please post any issues with the upgrade/installation if you have. Thanks!!!

http://www.huddletogether.com/projects/lightbox2/

aitf311

I tried it out yesterday and couldnt get it to work. I tried implementing the code myself and I also tried editing Chili's theme with the new js files, still a no go. It would be awesome if someone could get it to work since it does work with albums now.

Chilifrei64

I saw that on digg.com the other day. I havent had a chance to yet the past few days.. but I will take a look at it over the weekend sometime and try to make a second theme with lightbox2.

Chilifrei64

Well I had a little time today to make this up. I have a live demo here
http://beta.chilifrei.net/zenphoto2

The link to the download is
http://www.chilifrei.net/downloads/Chili-Light2-Default.zip

A couple things with this and I havent decided really how I would do this.. I am hoping there will be a way. In lightbox.js v.2, they have the option scroll through the images from within the lightbox. This will only scroll through the images on that page.. which means if you have more than 1 page you have to exit lightbox and go to page 2 and restart... or make the images per page in your config.php to a crazy number like 100 to make this work.. which would be fine(sorta) except lightbox.js will only start working once the page is loaded.. so if you have 100 images.. you will have to wait a while for the pages to load..

if anyone knows of a way to override a setting in the config.php in the templates file please let me know and I will do what I can.

Until then.. enjoy..

Side Note: This is hosted off my home server.. as my connection is not bad.. it really cannot handle a large amount of connections.. If it is down or really slow.. please just be patient..
Also.. I am upgrading my webserver in about a week and a half.. so there may be intermittent downtime during that time frame.. please just be patient with me.

aitf311

Im not a php whiz, but maybe in the image loop you can test to see if you are on the last image and then in the caption put a link to the next set of thumbnails. Then you could at least use the new gallery feature.

jerryforeman

I am using the new 1.0.2b release and had trouble with the close.gif and loading.gif showing up when using the Chili-Light2 theme. I edited lines 60 and 61 of themes/chili-light2/js/lightbox.js and changed them to read:

var fileLoadingImage = "../themes/Chili-Light2/images/loading.gif";
var fileBottomNavCloseImage = "../themes/Chili-Light2/images/close.gif";

(the difference is the '../' on each line)

In case you need to know, I am on Dreamhost, PHP5, NOT using php-cgi, using mod_rewrite.

I hope this helps some people

amory

I already posted this elsewhere, but for anyone more php inclined - how can I get the link to each individual image `/server/photo.jpg` to appear next to the close button within the javascript lightbox framework? Or rather than making assumptions, can I do this? The goal is to provide the user the ability to download the image.

bongiben

I have been building a site with zenphoto and the lightbox.js but seem to be getting issues with the loading of the close button
http://www.benscottarts.co.uk/zenphoto/

i realise the reason for a bit of link coming on the overlay area but cannot get the graphics to appear for load or close

also found many difficulties getting the lightbox.js 2nd version from huddle together to work or the chilli theme to work

does javascript reference a url in a weird way like css or is it plain html reference?

Chilifrei64

have you changed the folder name of my theme?

Lightbox2 stores references to 2 images in the js file on line 60 and 61 which are hardcoded for my theme.
the loading image and the close image

Just change the path in the js file to your path and both images should work for you

bongiben

didnt use your theme built my own and they are hard coded to correct location will check yours but it didnt seem to work at all when i installed plus i cant see working on your site on many pages either

Chilifrei64

working here

http://beta.chilifrei.net/zenphoto2/

also.. after looking at your sources.. it looks like you are using lightbox version 1 and trying to add the close.gif to that.. version 2 would be much easier.

Also. I remember having a problem with using "../" in the js file which is why it was hardcoded.

try hardcoding it with the webpath which in your case would be.
"themes/stopdesign/img/close.gif"

bongiben

thanks for that

yes yours works

tried the hardcoding of link, wasnt sure if maybe it is something to do with conflict of style names with stop design template

fuBar

Hello,

I am looking to implement lightbox by clicking the album picture itself (no images/commenting page), is that possible?

Thanks.

trisweb

@fuBar - yes, that will work. Just edit /themes/[themename]/image.php and insert the lightbox javascript include and change the main image `` tag. If there is no `` tag, you might need to make one, using `<?php echo getDefaultSizedImage();?>` as the src.