Using Lightbox with WYSIWYG Images
I've wanted an easy way to use Lightbox with images I insert into a WYSIWYG editor for a while now. This way, I can take a screenshot or a large image, insert it into a post, display a thumbnail within the post (so that the large image doesn't make the theme bleed off the page), and allow a lightbox popup to show the full-size image when it's clicked.
This involves a 2 step process:
- Upload and insert the image and send it to the editor.
- Switch to the HTML view of the editor and add a link manually with a rel=lightbox attribute.
The first step is handled by the FCKEditor and IMCE (for image upload and management). The second step needed to be manual because the Link dialog for FCK does not have any way to set the 'rel' attribute.
I came across an issue in the FCKEditor Module Issue Queue called How to Have Meta Link Rel Tag in FCKEditor.
Make the changes to the fck_link.js, fck_link.html, an en.js files as detailed in the post. Then you'll add a line of code to include the option for lightbox which looks like this:
<option value="lightbox"><Lightbox></option>
These are very easy code changes. Once complete (and you clear your browser cache), you simply do the following:
- Click the Image icon in FCK.
- Click the Browser Server button to invoke the IMCE image uploader/manager.
- Upload and/or select the image and then click the "Send to FCKEditor" link on top of the form.
- Before clicking OK on the Image dialog, copy the URL of the image.
- Click the image in the editor to select it.
- Click the Link button.
- Paste the URL into the Link dialog.
- Click the Advanced Tab. You should notice a new drop-down on the bottom of the form called relationship. Select "Lightbox", click OK, and you're done.
It should work something like this:
so rather than uploading the image when you create your conetnt node, you simply dragged it from your desktop and dropped it into your editor?
No. You use IMCE to upload the image to the server. This is standard image upload via IMCE. Once the image is uploaded, you can select "Send to Editor" which will create the image within the editor. Once you have an image in the editor, if you click it to select it and right-click your mouse, you'll see an option for image properties. If you select it, you get a popup which allows you to set the attributes of the image (like height, width, alignment, etc.). You'll also see an 'Advanced' tab. If you click the advanced tab, there are additional options you can select via a dropdown.
The code changes detailed above creates a new option which says "Lightbox". If you select this, then the 'rel="lightbox"' property is set for the image. This will make the image a link to a lightbox popup.
Lightbox comes with a number of options to use. There's Lightbox which is a simple popup for a single image. There's another one called Lightshow which does the same thing, but will automatically provide prev/next navigation to additional images contained within the node.
Hope this helps.
so rather than uploading the image when you create your conetnt node, you simply dragged it from your desktop and dropped it into your editor? is taht what you're driving at?