New Media for Ministry News: May 2009

Thursday, May 28, 2009

Lightbox 2 Tutorial

Overview

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

What's New in Version 2

Image Sets: group related images and navigate through them with ease
Visual Effects: fancy pants transitions
Backwards Compatibility: yes!

Example

Single Images

Image Set

How to Use

Part 1 - Setup

Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
```
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
```
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
```
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> 
```
Optional: Use the title attribute if you want to show a caption.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
```
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> 
```
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Download

Lightbox v2.04

Changelog

v2.04 - 3/9/08
- NEW - Upgraded Prototype from v1.4 to v1.6.0.2
- NEW - Moved label text into configuration for easier localization
- UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.
- FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.
- FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.
v2.03.3 - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.
v2.03.2 - 4/30/07 - Fixed animated gif support in IE/Opera.
v2.03.1 - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.
v2.03 - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.
v2.02 - Fixed layout issues caused by multiline captions. Added keyboard navigation.
v2.01 - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.

Support

It doesn't work at all. The image opens up in a new page. What's wrong?: This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages('/images/menu_on.gif')…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages('/images/menu_on.gif')…;initLightbox()">
It doesn't work if I click an image link before the page has finished loading.: The script is activated only after the page has finished loading.
The shadow overlay doesn't stretch to cover full browser window.: Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.
Can I insert links in the caption?: Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents. For example:
<a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">Image</a>
Can I display flash, video, or other content using the script?: Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's ThickBox.
Can the script be called from an iframe?: If you're using iframes, try the Lytebox modification which has better support.
Can I use the script in a commercial project?: Yes. It is licensed under the Creative Commons Attribution 2.5 License. A donation would be nice, hint hint.

As for proper attribution, all that is required is that you leave my name and link atop the lightbox javascript file. I do appreciate an html link, but it is not required.

Contact

For troubleshooting, feature requests, and general help, post a message in the Lightbox Forum. Make sure to include details on your browser, operating system, Lightbox version, and a link (or relevant code). I do not have time to personally respond to support emails, please use the forum.

To send me a non-support related note, email me. Thanks.

Donate

If you're feeling generous, consider a donation. Any and all PayPal donations are sincerely appreciated. Thanks.

**************************************

"Loving God, Loving People, Serving the World."

New Covenant Church & MInistries

4625 N. Keystone Avenue

Indianapolis, IN 46205

(317) 205-6000

--------------------------------------------------

www.newcovenant.org

www.indyIMPACT.tv

www.visioncomsolutions.com

LIGHTBOX TUTORIAL

LIGHTBOX TUTORIAL Updated 05/05/2006

Lightbox is a useful JavaScript, which allows you to watch photos in a semi-transparent overlay to your site. When you click on a link, the picture is shown above the content of your page, which frees you of limitations like columns.

You can see Lightbox at http://www.huddletogether.com/projects/lightbox/
Lightbox exists in many versions, but all of them are built on Lightbox JS, the original Lightbox, which is avaible at the page above.

A few weeks ago, version 2 of Lightbox JS has been released (http://www.huddletogether.com/projects/lightbox2/). So I will cover this Lightbox in this tutorial, too.

This tutorial is about setting up Lightbox to work on your page. I will concentrate on three different Lightboxes: Lightbox Plus!, Lightbox Gone Wild and Lightbox JS 2

I) Lightbox JS 2

So this is Lightbox JS 2, which is avaible at http://www.huddletogether.com/projects/lightbox2/

Lightbox JS 2 has some great improvements over the "old ones". To help you decide which Ligtbox to choose:
If you want to display PICTURES, use Lightbox JS 2.
If you want to display HTML-Pages, use Lightbox Gone Wild!
If Lightbox JS 2 won't run, use Lightbox plus! otherwise use Lightbox JS 2.

So let's start. I want to thank trinix, who has written great portions of the tutorial.

1) Download all files at Lightbox JS v2.0

2) Create a directory for Lightbox on your webserver and remind the path.

3) Now open your RW Template. Just open the theme drawer, control-click on your theme and choose "Show Contents". This will open a finder window.
Important: Never change anything without making a copy before. To duplicate a theme, crtl-click on it and choose "Duplicate XXX".

4) Open index.html with any TextEditor, but NOT with TextEdit, because this one doesn't display sourcecode.

5) Search for Insert the following code before that:

Code:

Of course you have to adjust the path to your situation.
This will enable you to use Lightbox on any page of your site. RapidWeaver creates new pages using the index.html in the Theme-folder. So now every new page will have the code above integrated and will be able to display lightboxes.
Important: Do not enter these lines inside the site inspector. It will not work.

6) Now open lightbox.css and go right to the end.

There you have to enter the path to two of the images you uploaded, prev.giv and next.gif. Please enter the full path, for example: http://www.xx.de/lightbox/prev.gif
If you want to, you can use custom images, just upload them to you webserver.

Then open lightbox.js and adjust the paths for loading.gif and close.gif. Enter the full path!

7) Now upload all files to the directory you created in step two. You have to use the path you specified in step 6, because otherwise, lightbox won't find your images.

8) Lightox is now installed. Now comes the interesting part: Displaying the images.
Images are displayed using slightly modified links. Each link has to contain a rel="lightbox". Bad thing: You have to enter this manually. Good thing: You can use RW for it.
Let's assume you want to show a file called "1.jpg". Create a thumbnail of it (there's a very cool app out there called "Thumbscrew"). Drag this thumbanail into its desired location and upload the original to your webserver.
Now click on the thumbnail within RW. In the "Add Link" window, enter the url as followed:

Code:

http://www.xx.de/1.jpg" rel="lightbox" title="Your Description

Do NOT close the title by typing a " at the end!
Now preview your site and click on the thumbnail. Boom, that's pretty cool, eh?
You can of course do this with textlinks, too.

If you want to enter the code manually, use

Code:

The "border=0" prevents RW from adding a frame to the picture.

If you want to, you can display more images:

Code:

Bild #1

Bild #2

Bild #3

II) Lightbox Plus!

Lightbox Plus (http://serennz.cool.ne.jp/sb/sp/lightbox/) is an enhanced version of Lightbox JS (version 1). Additionally to Lightbox JS, it automatically resizes images if too big for the window. That's pretty cool, and that's why I use this one.

I advise you to use Lightbox JS 2, if possible because it's better than Lightbox Plus! I'm listing Lightbox Plus! here because there seem to be serious problems installing Lightox JS 2 on some webservers.

You can see it in action on the authors site (see above).

Let's get underway:

1) Download all files at http://serennz.cool.ne.jp/sb/sp/lightbox/

2) Copy all files into a directory on your webserver and remind the path. You don't need to copy the .js file now, because you'll do this later.

3) Now open your RW Template. Just open the theme drawer, control-click on your theme and choose "Show Contents". This will open a finder window.

4) Open index.html with any TextEditor, but NOT with TextEdit, because this one doesn't display sourcecode.

5) Search for Insert the following code before that:

Code:

addEvent(window,"load",function() {

var lightbox = new LightBox({

loadingimg:'loading.gif',

expandimg:'expand.gif',

shrinkimg:'shrink.gif',

effectimg:'zzoop.gif',

effectpos:{x:-20,y:-20},

effectclass:'effectable',

closeimg:'close.gif'

});

There you have to enter the path to all the images you uploaded. Please enter the full path, for example: http://www.xx.de/lightbox/loading.gif
If you want to, you can use custom images.
Now you're ready to upload the .js file. Upload it to the location you specified in step 5.

7) Lightox is now installed. Now comes the interesting part: Displaying the images.
Images are displayed using slightly modified links. Each link has to contain a rel="lightbox". Bad thing: You have to enter this manually. Good thing: You can use RW for it.
Let's assume you want to show a file called "1.jpg". Create a thumbnail of it (there's a very cool app out there called "Thumbscrew"). Drag this thumbanail into its desired location and upload the original to your webserver.
Now click on the thumbnail within RW. In the "Add Link" window, enter the url as followed:

Code:

http://www.xx.de/1.jpg" rel="lightbox" title="Your Description

Code:

III) Lightbox Gone Wild

Now to the second Lightbox: Lightbox Gond Wild (http://particletree.com/features/lightbox-gone-wild/).
This Lightbox can display html-pages. You can see it in action at http://particletree.com/examples/lightbox/ Unfortunately, it can't display images without embedding them into an html page. At least I don't know how to do it. So if you want to show images, use LB Plus, otherwise, read on.

1) Download LGW: http://particletree.com/files/lightbox/lightbox.zip

2) Extract all files and upload them to your webspace. I reccomend to keep the file structure, because it makes sense. You can delete the default.css within the css folder since it's not needed.

3) Open your RW Template, open index.html and write the following lines before

Code:

Again: Adjust the URLs to your needs and don't enter it into the site inspector.

4) Now LGW should work fine. You can display a page by a link like this:

Code:

Email This

A few things:
- Lightbox Gone Wild! doesn't need a complete html-page. So just use the tags you need. There is no need to create a full blown site just for 2 lines of plain text.
- As far as I know, you can't just pass an image to LGW. It's displayed as plain text. You have to embed images into html
- To close the Lightbox, insert this code into your document: Close Lightbox.

Important for all Lightboxes:
You can't just use two or three Lightboxes at the same time, because they share css values.

There is a strange but known issue in RapidWeaver: On some machines, RW just replaces rel="lightbox" by "rel="self". Of course then the Lightbox does not work. Currently there is no solution to this issue, but you can do the following: Once you created a page with RW, export it to your local hard drive and edit the link manually.
Just replace rel="self" with rel"lightbox". This should work.

If you have any questions, corrections, suggestions or other things to say, just write me!

If you have problems installing Lightbox, please post your question in the question-area. Please do not post in this thread!

Novatlan

Last edited by Novatlan (05 May 2006 15:44)

If you can't win by reason, go for volume!

http://www.novatlan-sound.de

Lightbox Tutorial

Code:

http://www.xx.de/1.jpg" rel="lightbox" title="Your Description

Code:

The "border=0" prevents RW from adding a frame to the picture.

If you want to, you can display more images:

Code:

Bild #1

Bild #2

Bild #3

Code:

addEvent(window,"load",function() {

var lightbox = new LightBox({

loadingimg:'loading.gif',

expandimg:'expand.gif',

shrinkimg:'shrink.gif',

effectimg:'zzoop.gif',

effectpos:{x:-20,y:-20},

effectclass:'effectable',

closeimg:'close.gif'

});

Code:

http://www.xx.de/1.jpg" rel="lightbox" title="Your Description

Code:

Again: Adjust the URLs to your needs and don't enter it into the site inspector.

4) Now LGW should work fine. You can display a page by a link like this:

Code:

Email This

Last edited by Novatlan (05 May 2006 15:44)

If you can't win by reason, go for volume!

http://www.novatlan-sound.de

Thursday, May 28, 2009

Lightbox 2 Tutorial

http://www.lokeshdhakar.com/projects/lightbox2/#how

Lightbox2

For Hire

Overview

What's New in Version 2

Example

Single Images

Image Set

How to Use

Part 1 - Setup

Part 2 - Activate

Download

Changelog

Support

Contact

Donate

LIGHTBOX TUTORIAL

Lightbox Tutorial