July 26, 2005
Overlib, Wordpress & Images
I have used the overlib javascript library for many different text based popups on different applications. It is extremely useful for applications where a detailed help message would be valuable to the client.
For some time I have wondered about using it with images - instead of having to click a link or thumbnail and then browsing back, why not just use a rollover?
I discovered that it was relatively easy to embed an image within an overlib. First, let's demonstrate how it works (mouseover the thumbnail):
Pretty neat, huh?
Using overlib is relatively straightforward, and I won't go through the instructions for its full use; the overlib website contains full documentation and several cool examples to get you started. Once you have downloaded overlib, you should test that everything works in a static html page. The following code will work on your page if you copy and paste it into a file on your server:
<a href="javascript:void(0);" onmouseover="overlib('<img width=320 border= \\\'1\\\' src=\'http://john.ellingsworth.org/images/EDSC06239.jpg\'>\',RELX, 0, RELY, 0);" onmouseout="nd();"> <img src=http://john.ellingsworth.org/images/tn_EDSC06239.jpg border=0/></a>
If this works fine, we are halfway there.
What about WordPress?
When you submit a post in WordPress, the application 'cleans up' your post to make it pretty to read and safe to process on the server. It also allows you to keep your markups to a minimum when you post by setting the options in the admin panel. The problem is, WordPress will break MOST javascript that I am aware of. How do you fix this problem? By adding the TextControl plugin and setting it to the appropriate level of markup. Since I add my own formatting to my posts, and don't allow comments (sorry!), I set it to No Formatting. There is a more detailed explanation on using javascript within WordPress at the WordPress Codex.
This corrected the issue I was facing when trying to add images to overlib within my WordPress posts. I hope that you find this helpful and that it saves you a little time. You can see how I implemented this on my Vermont, July, 2005 post.
Good luck!
I discovered that it was relatively easy to embed an image within an overlib. First, let's demonstrate how it works (mouseover the thumbnail):
Pretty neat, huh?
Using overlib is relatively straightforward, and I won't go through the instructions for its full use; the overlib website contains full documentation and several cool examples to get you started. Once you have downloaded overlib, you should test that everything works in a static html page. The following code will work on your page if you copy and paste it into a file on your server:
<a href="javascript:void(0);" onmouseover="overlib('<img width=320 border= \\\'1\\\' src=\'http://john.ellingsworth.org/images/EDSC06239.jpg\'>\',RELX, 0, RELY, 0);" onmouseout="nd();"> <img src=http://john.ellingsworth.org/images/tn_EDSC06239.jpg border=0/></a>
If this works fine, we are halfway there.
What about WordPress?
When you submit a post in WordPress, the application 'cleans up' your post to make it pretty to read and safe to process on the server. It also allows you to keep your markups to a minimum when you post by setting the options in the admin panel. The problem is, WordPress will break MOST javascript that I am aware of. How do you fix this problem? By adding the TextControl plugin and setting it to the appropriate level of markup. Since I add my own formatting to my posts, and don't allow comments (sorry!), I set it to No Formatting. There is a more detailed explanation on using javascript within WordPress at the WordPress Codex.
This corrected the issue I was facing when trying to add images to overlib within my WordPress posts. I hope that you find this helpful and that it saves you a little time. You can see how I implemented this on my Vermont, July, 2005 post.
Good luck!