|
WordPress – jQuery Tools Overlay Plugin
(just another and better Lightbox)
Lasted Release 0.9.3.2
Licence: GPL
Author: David HOHL
-> WordPress Plugin Overlay – Download
-> Download on WordPress
-> Dokumentation
-> Examples
-> Versions
-> Roadmap
-> Bugs
Wish and Bug Tracker - please fill out this form.
 Features:
- No coding necessary, just install and activate
- Themes support
- Effect settings available (speed, position)
- Apple zoom in/out effect
- Set your own background color
- Image autoresize
- Widgetloader
 Installation:
To do a new installation of the plugin, please follow these steps
- Download the zipped plugin file to your local machine.
- Unzip the file.
- Upload the `overlay` folder to the `/wp-content/plugins/` directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Go to the Overlay Plugin and save the settings!
Sry for me bad English… (my native language is German)
 Instruction:
Go to Settings – Overlay to customize the plugin
Default Settings
Width:
(Required) Specifies the width of the overlay box.
Height:
Specifies the maximum image height if ‘Image autoresize’ is checked.
Animation Settings
Theme:
select a pre-installed theme. The theme is only for the Box (backgroundImage)
Overlay Backgroundcolor:
is only in use if you select by the theme – own background color
Mask Layer:
Set the background color responsible for dimming the page over with the layer is displayed to emphasize the overlay.
Mask Backgroundcolor:
Set the backgroundcolor. – please HEX values or default webfonttags (red, black, blue …) For more information about colors have a look on the wikipedia page
closeOnClick:
Check to close the overlay with a click anywhere on the overlay
closeOnESC:
Check to close the overlay by pressing ESC
load on site load:
Check to automatically show the overlay. Might come handy for pages with single images.
Speed:
Set the speed of the animation in milliseconds. Available options: slow, normal (default), fast or custom (1000 equals 1 second)
Top:
Top position of the overlay. Can be pixels (px) or percent (%). Example: 120px or 25%
 Widgetloader:
Load any Widget in the overlay!
Step 1:
Go to your Widgets (Theme), there you will find the overlay sidebar, drop there the widgets.
Step 2:
Go to the overlay Settings – and add a selector and set the widget.
What is a selector?
Every Tag has a id or class.
Examples:
- .loadtext – Class (.)
- #mytagcloud – ID (#)
What is the difference?
If you want to use the same overlay on one page, then use a class.
otherwise use the ID, but if you have no knowledge about this – use every time a class. 
Our Example: We use here a class .loadtext
For Coder look on the jQuery Page.
Step 3:
go into your post or page and select a text or a image – click on 
Step 4:
Insert a “#” into Link Url and go on the Tab Advanced
Add by Classes “loadtext” (or your class – without point) if you use an ID, then enter the id into Id (without #).
Ready! – LOOK
 Examples
Testimage:
Load your Tagcloud in the Overlay: (with Widgetloader)
DO IT NOW!
Load any Text in the Overlay: (with Widgetloader)
DO IT NOW!
Versionshistory:
0.9.3.2
- Bugfix – Problems with the widgetloader
- add new jQuery Tools Libs
Download Version 0.9.3.2
0.9.3.1
- Bugfix – Problems with the imageloader
Download Version 0.9.3.1
0.9.3
- add overlay background color
- add effectselection
- add debugmode
- Bugfixs #3 – #10
- change imagecall
- add 4 new Themes
Download Version 0.9.3
0.9.2
Download Version 0.9.2
0.9.1.1
- Bugfix #1 Admininterface (problems with other jQuery Lib)
Download Version 0.9.1.1
0.9.1
- add theme selection (default jquery Tools themes and own themes)
- add background mask
- add basic animations
- add option menu
- add image autoresize
Download Version 0.9.1
************************************************
0.9 first stable version (without options)
Download Version 0.9
************************************************
|
Pingback: Ankündigung Version 0.9.1
great Plugin, thank you!
Where are the instructions? I mean, simple to install but then what? How do I use it once installed?
thats right
Now you will find all informations for the overlay, but you don’t really need anything, after install – go in your post and click on an image.
I’m having problems with IE 8. With overlay activated, the default image layout for wordpress 3.0 is all messed up. Works okay for Chrome and Firefox. Is there a workaround for this or is it better to use your stable version for now.
Thank you for your request, i will check this today!
Version 0.9.2 is out – now with Widgetloader!!
Pingback: Ankündigung Version 0.9.2
I discovered a weird bug in your plugin. I managed to pinpoint the problem and it’s a sneaky one. All about regular expression madness. There was one character missing (and so screwing up several of my images)
Please update your code (overlay.php) to reflect the following changes:
[code]$pattern = "/(]*?rel=['\"]overlay.*)[^>]*?src=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png)['\"][^\>]*)>/i";[/code]
[code]........[^\/>]*)>/i";[/code]
Greetings,
A thankful user of your plugin!
Laurens Vercaigne
The above fix got rid of the problem, but broke the plugin too. I mailed David some code of which I thought if was fixed, but every time there was some kind of small bug that was lurking around the corner. I managed to fix it completely by changing it to this:
$pattern = “/(]*?rel=['\"]overlay.*)[^>]*?src=['\"][^'\"]+?\.(?:bmp|gif|jpg|jpeg|png)['\"])/i”;
$replacement = ‘$1 rel=”#overlay_’.$post->ID.’”‘;
This should work untill David releases the next version. (we mailed and he let me know that he’d drop the whole regex idea and do it with jQuery anyways)
Warning: Invalid argument supplied for foreach() in C:\wamp\www\site\wp-content\plugins\overlay\lib\overlayLib.php on line 57
oops.. this error is on the admin page, using wordpress 3.0.1
Thank you for your comment, it will fix it in the next version. This bug has no effect in this version 0.9.2.
Awesome plugin!
Doesn’t work in Safari 5 on OSX for me, show’s the overlay but the image never loads in the box. Firefox is fine.
nevermind, all is fine in Safari 5– i think i just had a cache problem. Thanks for this!
This is great, but were is demo code, i whant to have text pop up on page load “under construction” so i creat a text widget drag it into the widget position then add the widget in the overlay settings wiht the selector “*” to select all and the page shits its self and the theme breaks?? any ideas?? A cool little addition would be a check box that a user can check to show a underconstruction page, and were are the themes you speak about?
Very nice tool either way , thanks mate.
shit im such a douch, thanks i shall learn to read proply in future:
Examples:
.loadtext – Class (.)
Thanks for this great tool dave.
Great plugin! But there is a weird problem in IE8. My posts become links, and by that I mean the headers, the paragraphs, divs and the content in them like the text, they all become underlined, blue, ugly links that link to the picture in a new window, but when you just click on the image itself and not on the rest of the post the plugin works. I don’t know what’s wrong but I think it’s worth mentioning it. Perhaps there is something wrong with my theme.
Thank you for your comment, i know in this version are some bugs. Currently I’m working on a new version,it will fix everything.(hopefully)
David,
I installed this plugin but any image files I insert into my post are not viewable in the lightbox/popup. They are displayed in a separate webpage which is standard for images entered in posts in wordpress. Am I not configuring something properly?
Do you have a link for me?
hi david
first of all great plugin but i have some problems.
i have one wordpress blog where the plugin have some problems.
it’s deactivated now.
problem: normal text links with overlay does’nt work, but every picture is overlayed which means for e.x i have a picture which has a link to an video clip, start now with the “overlay”, so all my normal links are broken, but the links which should work with overlay doesn’t work. my theme is twenty ten weaver.
any ideas ?
cheers frank
sorry for my bad english i’m native german too
so it might be better to explain in german ?
frank
It is remarkable, it is rather valuable piece
Greetings from the Speedy DNS
Hello and thanks for this great plugin!
I installed it but all my images have now the overlay effect. How can I deactivate it for some images?
Pingback: Fishme – Webentwicklung Web5.0 |Fishme – Webentwicklungen
I have the overlay opening, but no content will load inside. I have added widgets to the overlay sidebar and opening them using the proper class tags. Any ideas?
do you have add the css class/id ?
perhaps do you have url for me, then i will check it.
in this version you have no chance to disable the overlay for special images, but i will add a new feature in the next version.
Thanks for the plugin!
When I select anything anything other than “own background color” under Theme, the image goes right to the top of the overlay box rather than being more centered. I would like to use the default transparent but the image loses all padding at the top. Do you know what could be causing this?
The overlay is working great, but I would like to change the size of the text in the overlay. Do you have any suggestions on how I might do that? Thanks again for the great plugin!
I don’t understand : my widget configuration page is now blocked, I can’t drag into the Overlay widget area. Wasn’t there a bugfix on that ? My WP version is 3.1.2
Thanks
i will fix some bugs in the next days.