Sticky 

Lightbox.js

fungifred 7:35am, 2 January 2006
www.huddletogether.com/projects/lightbox/

I was wondering if anyone had implemented this in K2 and if so, what was wrong with my copy at www.fungifred.com/wp/

It looks like the sort of thing that would bee cool in the k2 distrobution, I find it to be a far more atractive solution for putting images in a post.
Paul Stamatiou 13 years ago
Very cool! I'll try to see if I can get it running later on. I'm not sure how well it would fare with the older browsers.
perfect sign [deleted] 13 years ago
I got this working on my site www.allynedmonds.com
elifoner 13 years ago
I got it working on my site, too www.elifoner.com.
perfect sign [deleted] 13 years ago
Eli - I don't see your loading gif though.
elifoner 13 years ago
Me neither. In fact, I'm also having a problem using the script from within the actual post. What about you?
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
Ya, it's not working for me on my single page. I see you got it working. What did you do.
elifoner 13 years ago
Nope, still not working on a single post for me :(
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
When I go to your single post, it's working fine.

update: On the single post page it seems to work in IE but not in Firefox for me.
elifoner 13 years ago
ajedmonds: When I look through IE, everything works. FF breaks the single-post even after flushing the cache and everything...
perfect sign [deleted] 13 years ago
Weird thing is that when I look at yours in FF, it all works fine.
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
Ok, time to hit the sack. I'll work on this again in the am.
perfect sign [deleted] 13 years ago
Hmm, just noticed that after I signed out of the Wordpress Admin, the script on the single-post page began to work.
smooth straw [deleted] 13 years ago
hi ajedmonds and elifoner,
could you explain where to place the
rel="lightbox" exactly?
or maybe the complete way to do it.
my site is there: www.balswing.de
thank you and have a very good new year.
philippe
elifoner Posted 13 years ago. Edited by elifoner (member) 13 years ago
balswing: the rel="lightbox" goes within the A HREF attribute tag, not the IMG tag.
elifoner Posted 13 years ago. Edited by elifoner (member) 13 years ago
this will show you what the lightbox.js script actually does. flickr.com/photos/elifoner/80901817/in/photostream/
necessary stitch [deleted] 13 years ago
Mhm, doesnt work for me...
reallife.kulturstau.de/2006/01/02/test/
Anyone got an idea, why not?
Sean Nichol 13 years ago
Kinda half works for me.....

What Works: The pop-up

What doesn't: The overlay, the thumbnail, the CSS.

sannixtudio.com/wp/

It's the post named "Chain".
elifoner Posted 13 years ago. Edited by elifoner (member) 13 years ago
sannixtudio: it's the image calls, hard code them.
Sean Nichol 13 years ago
Eli: I had them hardcoded, then didn't, then did again and it worked. May have been a cache issue. Still not pulling the CSS though.
elifoner 13 years ago
sannixtudio: Just tried again and works fine from my end (overlay is there, but no loading graphic). Good job ;)
Sean Nichol Posted 13 years ago. Edited by Sean Nichol (member) 13 years ago
I actually see the loading graphic and everything..... Hmmmm. The script seems a bit flakey in its' current state but very nice nonetheless.
Etwas Grenzenloses 13 years ago
Could someone explain how to make this effect work with K2, please? (Especially where exactly to put the script text within the header).

Thanks in advance!
perfect sign [deleted] 13 years ago
Boundless: I put the script tag just before the
</head>
in header.php
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
Also,

Put lightbox.js within the js folder of your K2 theme.

Make sure this variable is added to the top of lightbox.js.

example:
var loadingImage = '/images/loading.gif';

Hard code the image if you have to.

Make sure rel="lightbox" goes within the A HREF attribute tag, not the IMG tag.

Example:
<a href="/images/Garlic_festival/images/wedding_002.jpg" rel="lightbox">


I put the loading and overlay images in my main images folder. Hard code the img tags, unless you put them in the same folders as lightbox.js.

You should be good to go.
Etwas Grenzenloses Posted 13 years ago. Edited by Etwas Grenzenloses (member) 13 years ago
Thank you very much, ajedmonds. Now it works fine :)
gamy salt [deleted] 13 years ago
ajedmonds: I've tried to do it here: theminiblog.co.uk/ (first post there) but when I click on it it just goes to a new page and displays it there. i've added the js file into the /k2/js/ and i've added it into the header as:
<script type="text/javascript" src="/js/lightbox.js">
I've also added the rel, but I put the loading and overlay into the /js/ folder. Could that be the problem?
gamy salt [deleted] Posted 13 years ago. Edited by gamy salt (member) 13 years ago
this is what I have in my post:
It doesn't show up on flickr, dammit!
But it doesn't work. arghhh!!!
elifoner Posted 13 years ago. Edited by elifoner (member) 13 years ago
BalazsH: do you have any invitations for the new Windows Live Mail? ;)
perfect sign [deleted] 13 years ago
BalazsH - I see you got it working. Did you move the images from the /js/folder to your main images folder?
gamy salt [deleted] 13 years ago
works, thanks!
gamy salt [deleted] 13 years ago
@Eli - follow the info on this page:http://computerhelpforum.org/somefool/get_windows_live_mail_for_free_-_no_invite_needed.php

@ajedmonds: no I found out I hadn't specified the source for the images correctly in the .js file and the css.
necessary stitch [deleted] 13 years ago
Well i made everything how u said it in here. But it does not work...
( reallife.kulturstau.de )
i insert the code, placed the .js in the k2 js-folder and the pictures in the k2 images folder.
It doesn't even show the pictures. Help me pls!
perfect sign [deleted] 13 years ago
Make sure the path to the images are correct in the lightbox.js script, your css, and your post.
Rui Moura Posted 13 years ago. Edited by Rui Moura (member) 13 years ago
I also can´t get it to work ... grrrr ... Im testing it on my home server, but it allways opens the damn image on a new page ... i guess it's not connecting to lightbox.js ... i even put the entire link to it (127.0.0.1/wordpress/wp-content/themes/k2/js/lightbox.js)
and still nothing ....
eberth 13 years ago
is there a way to modify wordpress so when adding the image via WYSIWYG editor it automatically adds the lightbox version?
I am using the Flickr post bar plugin to insert my images into my post but all that is happening is what typically does....it goes to flickr. Any ideas?

www.avanfull.com
perfect sign [deleted] 13 years ago
Do you have rel="lightbox" within the each of the a href attribute tags?
yes I manually added it.
elifoner 13 years ago
BalazsH: Thanks!!!
fungifred 13 years ago
could someone who has gotten this to work explain where they put each file, what code they added to the header and so on?
It would help alot, for some reason, I can't get this silly thing to work.
fungifred 13 years ago
Nevermind, I had capitalized the l in rel="lightbox"
I would still like a step by step. Because I have followed everything to a T that I can see and it is jsut not working. I use the Flickr toolbar addin for WP and I dont know if that is maybe the issue.
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
Here is how I got it to work for me.

1. I inlcuded the lightbox.js in my header.php file, just above the
</head> tag.

Here's how it looks in my file:

<script type="text/javascript" src="/wp-content/themes/k2/js/lightbox.js"></script>
</head>

2. Save the altered header.php file.

3. I then added rel="lightbox" attribute to the a href attribute tag for my image.

Here's how it looks in my post:

<a href="/images/Garlic_festival/images/wedding_002.jpg" rel="lightbox"><img src="http://www.allynedmonds.com/images/wedding_002_thumb.gif" width="100" height="75" alt="Kyoko at Garlic Festival" /></a>

4. I then added the following code to my style.css file:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}

#overlay{ background-image: url(/images/overlay.png); }

* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
}

5. I then uploaded loading.gif and overlay.png to my images folder. Not the images folder in my k2 theme folder, but my main images folder.

6. I then opened up lightbox.js and checked to make sure this code:

var loadingImage = '/images/loading.gif';

was in the script. It was there, I just pointed it to where I had the loading.gif, which was in my main images folder.

7. I then saved all of my files and uploaded them to my server.

lightbox.js went into the js folder located in the k2 theme folder.

header.php and style.css went to the k2 theme folder.

That's it, it should work. Be advised though that if you have the Wordpress Admin open, this feature will not work from the single.php file, you have to be logged out. But it should work on your front page.

Any questions?
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
bullockdl - I use my images from flicker in this was:

<a href="https://static.flickr.com/39/81195495_be095c0205.jpg" rel="lightbox"><img src="https://static.flickr.com/39/81195495_be095c0205_s.jpg" /></a>

I'm not sure but there may be an issue using this feature with the Flickr toolbar addin for WP. I haven't tried it as I don't have the plugin installed.
Looks great. I will give it another go.
Mike Hurtado Posted 13 years ago. Edited by Mike Hurtado (member) 13 years ago
I make it work. Remember you have to put:
How can you put code here?---
Paul Stamatiou Posted 13 years ago. Edited by Paul Stamatiou (member) 13 years ago
el mik3: replace each left < one of those with "& lt;" without the space or quotes and right > one of those with "& gt;"

i've learned you can get by replacing only all lefts or all rights.
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
You can also go here and it will
format the code for you to add to posts or include in forums such as this.

SimpleCode
fungifred 13 years ago
I basicaly took what has been said here and put it up on my site for anyone who is still looking to get this running. Maybe Michael could drop it into the next k2 release.
lexrob 13 years ago
ajedmonds: thanks for spelling it out so clearly! I got it working on the first try by following your instructions.
Rui Moura 13 years ago
broken link ....
perfect sign [deleted] 13 years ago
no problem.
tirolwild 13 years ago
I also have problems with the Lightbox Script. Could it be that wrong file rights (lightbox.js) could cause Problems with the script?

It seems to be that my script could not be executed properly.
gamy salt [deleted] 13 years ago
ajedmonds: do you know why it won't work from single.php when logged out of wp-admin?? it is quite annoying and I have no idea as to why it could happen??
necessary stitch [deleted] 13 years ago
Thx ajedmonds! It works now!
perfect sign [deleted] Posted 13 years ago. Edited by perfect sign (member) 13 years ago
BalazSH: I think you mean when you're logged into wp-admin and no, I really have no idea why it doesn't work. BTW: I find it annoying as well.
eberth 13 years ago
has anyone been able to make it work with flickr toolbar?
Mike Hurtado Posted 13 years ago. Edited by Mike Hurtado (member) 13 years ago
Ok, mine didn't want to work, so I check the working sites, and I notice you have to put:

<script type="text/javascript" src="/wp-content/themes/k2/js/lightbox.js">
</head>

Right before head. If not it does work.

mpowa.jlhost.net/

Anybody have tried to use it with falbum? I modified the php file but it doesn't show any of the changes that I made.
Rui Moura 13 years ago
I finally make it work !!!!! :w00t:

Thanks to ajedmonds for his step by step tut ... It wasn´t working because of wrong paths to files ....
Sean Nichol 13 years ago
I am in the early stages of implementing it on my photoblog:

sannixtudio.com/photoblog

I'm still working on re-tagging all of the photos.... the first one is finished though.
Jef Nickerson 13 years ago
Yes, thank you ajedmonds. I had it all going except for the overlay, and your step by step did the trick.
I put it in place per the instructions and mine is hung up on the status bar after you click the image.

Anyone have that and fix it?

dennisbullock.com
Jef Nickerson 13 years ago
The status bar (loading.gif) is optional, maybe try getting rid of that option and see if it works... Just throwing that out there, I didn't actually have that as a problem.
perfect sign [deleted] 13 years ago
Dennis, make sure that your calling the right image. Meaning,check spelling and case (upper/lower). Also make sure that you're using the correct paths to the images.
obharath 13 years ago
ajedmonds, i followed ur 6 steps as it is and i am not able to make it work. can u look at my site. obharath.com
perfect sign [deleted] 13 years ago
Try putting your loading.gif and overlay.png files in your main images folder, not the images folder within the k2 theme. Then redirect all of your tags to those images.
Jack Pearce 13 years ago
Someone seriously needs to write a simple to follow how-to guide or something.
fungifred Posted 13 years ago. Edited by fungifred (member) 13 years ago
Have you tried mine at www.fungifred.com?
Or we need a plugin that adds it to any images in a post. But, even better would be to add it to the theme.
dannytr1nh 13 years ago
Just run some javascript that runs before the page is rendered and includes the rel="lightbox" tag in any image tags?

Either that, or just mod TinyMCE to create "lightboxed" images :P

On that note, you can find the TinyMCE page here

Plugins shouldn't be all *that* hard to make. TinyMCE supports them pretty well actually.

tinymce.moxiecode.com/tinymce/docs/customization_plugins....

There you go - I might actually make one myself. If I get any results I'll share?
Rui Moura 13 years ago
I've disabled that damn tinymce on my wp ... Posting the old fashion way ... For me it´s a lot easyer ;)
eberth 13 years ago
yes, please make one dannytr1nh :D!!
Groups Beta