LightBox Scripts

dad7732 · Posted: Sat Mar 07, 2009 12:38 pm

Ok, it's done and working in "Messages". Thinking cap says that you have to call the lightbox js and stylesheet. Sooo ... I simply called each one at the beginning of the messages dialog. Smile

Cheers, hope this helps someone else.

If a link is ok to post here:

Only registered users can see links on this board!
Get registered or login to the forums!

.. click on the 3 dogs photo. Smile

nuken · Posted: Sat Mar 07, 2009 12:49 pm

I'm gonna try this FCKeditor mod to add lightbox effects to the editor later today. Maybe it will work too.

Only registered users can see links on this board!
Get registered or login to the forums!

dad7732 · Posted: Sat Mar 07, 2009 1:07 pm

Good luck, my brain having been in overdrive conditions with this has exhausted this old curmudgeon but at least I did what I set out to do. The addition to FCK would be quite nice.

Cheers

nuken · Posted: Sat Mar 07, 2009 3:08 pm

Wow... The mod worked in the FCK editor. I will have a download on my site as soon as I test it some more and put all of it in a simple upload pack. This mod allows you to upload the small image and the large image that you want to link to. Very simple and neat addition. You can see it in action at trickedoutnews.com in the first news article.

dad7732 · Posted: Sat Mar 07, 2009 3:24 pm

Yah, anything to make this easier is a blessing, thanks.

nuken · Posted: Sat Mar 07, 2009 3:27 pm

It uses the same mod I sent you plus the changes to FCKeditor. I have a couple of xhtml compliance issues to work out and then I'll release it.

dad7732 · Posted: Sat Mar 07, 2009 3:35 pm

Sounds good as I have problems with original thought, following a cookbook I can do ... Smile

Cheers

Palbin · Posted: Sat Mar 07, 2009 5:22 pm

What JS library does this use?

dad7732 · Posted: Sat Mar 07, 2009 5:55 pm

Palbin wrote:

What JS library does this use?

I believe it is jquery but "nuken" can answer that better.

nuken · Posted: Sat Mar 07, 2009 6:08 pm

I'm redoing it using a jquery Lightbox. A lot less code going this route.

Only registered users can see links on this board!
Get registered or login to the forums!

nuken · Posted: Sat Mar 07, 2009 6:14 pm

It was using prototype and scriptaculous

dad7732 · Posted: Sat Mar 07, 2009 6:33 pm

Just so long as the FCKEditor mod works. Wink

kguske · Site Admin Joined: Jun 04, 2004 Posts: 5997

alien73, the main page is working now, so I can see more of greybox's capabilites - nice! I especially like the website gallery. I'm surprised others haven't done that, but maybe it's possible and just not advertised.

Do you know if the jQuery version has the same capabilities as the AJS version?

dad7732 · Posted: Sun Mar 08, 2009 4:17 am

The effects are the same per application, just the code and modifications to existing code that's different from what I see. The one that nuken and myself are using seems to be the easiest. However, he's going to use a different mod now because of the lighter codebase.

dad7732 · Posted: Sun Mar 08, 2009 7:14 am

Tried the FCKEditor mod and doesn't work for me. I edited the correct files with the correct additions, etc. and the intended LightBox target option doesn't appear anywhere ... dunno, will wait for Nuken's package.
Obviously missed "something" but no clue as to the "something". Sad

Cheers

nuken · Posted: Sun Mar 08, 2009 10:14 am

Ok got the mod ready for download. It's a pretty simple install. After you download it, upload the contents of the HTML folder to your server keeping the file structure intact. Then you have 2 edits to make, one the the javascript.php and one in your themes style.css. It does not use jquery yet, I will continue working on it to use jquery for the next release. It is XHTML 1.0 and CSS level 2.1 valid. Here is an image of what the mod looks like in the WYSIWYG editor.

When you click on the image properties tab in the editor, you upload and use your thumb image you want displayed in the content, click on the link tab and upload and use the larger image you want to display in the Lightbox. You will need to select the lightbox target from the drop down menu. It allows up to 3 images to be displayed with the lightbox with a next tab. For a single image, select Lightbox (not in group). Have fun and give some feed back if you can. Issues can be put in my forums and I will answer them asap. An example and download can be found at

Only registered users can see links on this board!
Get registered or login to the forums!

The example is in the news on the front page.

dad7732 · Posted: Sun Mar 08, 2009 10:50 am

Awesome, will d'load and try it later when home. Thanks for ALL your efforts, much appreciated and will post back here with success. Cheers

nuken · Posted: Sun Mar 08, 2009 10:53 am

Cool. You should still be able to use it in the forums as before. It is using the latest Lightbox version 2.04.

dad7732 · Posted: Sun Mar 08, 2009 12:10 pm

As long as the rel="lightbox" works in the forums as before it should still work. Had to add the extra tag attributes in the allowed tags dialog after which a standard href link worked just fine. I have a gardener client where the forum is the major part of the site and users post flower/plant, etc images. Will look nice with the dark background and the images standing out.

eldorado · Involved Joined: Sep 10, 2008 Posts: 366 Location: France

Very very nice nuken. Makes my site look pro now Razz

dad7732 · Posted: Sun Mar 08, 2009 5:47 pm

Works just fine as intended. Just have to remember which is the thumb and which is the large image. If you choose the large image first the top 1/4 of the page is black ... Sad

Cheers and thanks !!!!

nuken · Posted: Mon Mar 09, 2009 9:40 pm

Anyone that installed this before Monday March 9, I have an improved CSS file that keeps IE from saying "done but with errors on page" at the bottom. This is also CSS level 2.1 compliant. Just replace the lightbox addon css in your themes style.css that you added during the install. The download has been corrected on my site.

Code:

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url("data:image/gif;base64,AAAA"); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

dad7732 · Posted: Tue Mar 10, 2009 7:43 am

Neat ... I was wondering why I was getting that error at work where our gov't office only allows IE (for security reasons - isn't that a HOOT!! ) ... Just tested it in FF using the extension IE Tab and no more error ..

Cheers

dad7732 · Posted: Tue Mar 10, 2009 8:54 am

Next issue ....

Using the same Lightbox files, etc. how to do a link to an html file or website such as google in the lightbox instead of an image.

Quote:

<a href="http://www.google.com" rel="lightbox">Google</a> doesn't work, the loading animation just keeps spinning

Online forms, etc. is what I have in mind as well as a Google search box in the LightBox.

Cheers

nuken · Posted: Tue Mar 10, 2009 10:24 am

I do not believe Lightbox has support for anything other then images. You can check their forum and see.

Only registered users can see links on this board!
Get registered or login to the forums!

Most of the jquery light boxes I've been testing do not either. That may be something I look for in the next release is a jquery lightbox that supports iframes or objects.