Version 1.1.1
- requires: jQuery 1.4.x or later
- author: Donald Van Raalte
- copyright: 2011, Ozone Solutions, Inc.
- licensed under: MIT License
- released: September 27, 2011 (1.1.0 – September 12, 2011)
Introduction
This plugin allows you to display any DOM element on top of everything else on the screen. It’s great for enlarging images or other media without having to load another page.
Download
Documentation
Note: The bug nicely reported by remco boerma and bert should be fixed as of 1.1.1. I really appreciate their valuable feedback.
bugreport aka Recipe for failure:
1. click on the sample image – it opens ok
1. click again on the sample image – it closes ok
1. click again on the sample image – it opens failed. border seems displaced
Hmm… What browser are you using? I am having difficulty reproducing the problem.
Thanks for your comment remco, but I tried several different browsers and couldn’t reproduce the behavior you described. Could you be more specific?
I’ve had the same problem as Remco. I’m using Google Chrome on Windows 7. The first time it opened fine, but after closing the image, whenever I click the sample, the image is docked into the bottom right corner of the browser and the border is stuck in the middle of the browser window with no content.
bert,
Thanks for the comment! I’m working on a fix, but it’s tough b/c I can’t seem to reproduce the problem for myself using Chrome and Windows 7. Do you mind sharing what version of Google Chrome you are using and if you are using any plugins?
Thanks!
Pingback: 10 freie jQuery-Plugins im Überblick » t3n News
The new version works like a charm! Chrome 13.0 (a little outdated maybe) on W7 and not a problem!
Fantastic. Thanks again for the valuable feedback.
Great plugin! I have a problem on the iPad / Mobile Safari tho:
When you click on a thumbnail which is positioned quite far from the top, the lightbox will open, but it’s positioned at the top and you have to scroll above to see it.
Also a problem when you switch your iPad from portrait to landscape mode and vice versa.
Glad you like o3enlargebox, eaglejohn, and thanks for the feedback!
I’m currently investigating fixes for the two problems you mentioned.
I don’t have the first problem anymore when I’m using it in my app, so that’s problem solved itself. At least, for my situation…
The second one is still there.
I’m trying to integrate the plugin in WordPress. Is it possible to use an class instead of an class?
I tried to say
img-classanda-classeaglejohn,
Good question. I’ll try to offer an adequate answer:
From how I understand it, your question isn’t actually about the plugin itself, but instead the code which calls the plugin. For the examples I used, this code can be found here.
For an example for your situation, let’s assume that there are images of class “enlargeable” that you’d like to be clickable to use the enlargeBox plugin. And let’s assume that all of those images have “_small” in their filenames and that there are larger versions of those images that have the same filenames except “_small” is replaced with “_large”. You would need the following javascript:
$(document).ready(function(){ $('img.enlargeable').click(function(e){ var that = $(this); var imageSrc = that.attr('src').replace('_small', '_large'); if ($.browser.webkit) { // this "if" is necessary b/c webkit browsers (Chrome & Safari) don't reliably report correct dimensions for images that have been cached imageSrc += '?noCache='+Date.now(); } $('<img src="'+imageSrc+'" />') // create image DOM element and make src .load(function(){ // assures that enlarged image is loaded ahead of time var $img = $(this); $img.o3EnlargeBox({}); }); }); });Thanks for you reply!
I edited the JS (go.js) and it works partially for my needs.
When you place a thumbnail in WordPress, you can link it to the original image. So no need for replacing parts of the filename
I just tried your suggestion and this happens:
First the thumbnail is displayed (very quickly) correct in the EnlargeBox, then the original file is being displayed just as an image in the browser.
PS if you’d like to see my source, just e-mail me for the link.
It sounds like the link is still firing. You should be using “preventDefault” on the event to keep it from firing.
I just tried something myself (I’m definitely not a JS-coder):
$(document).ready(function(){ $('img.size-thumbnail').click(function(e){ var that = $(this); var imageSrc = that.attr('src').replace('-140x140', ''); if ($.browser.webkit) { // this "if" is necessary b/c webkit browsers (Chrome & Safari) don't reliably report correct dimensions for images that have been cached imageSrc += '?noCache='+Date.now(); } $('') // create image DOM element and make src .load(function(){ // assures that enlarged image is loaded ahead of time var $img = $(this); $img.o3EnlargeBox({}); }); }); $('img.size-thumbnail').click(function(e){ var that = $(this); e.preventDefault(); // prevents link from firing var imageSrc = that.attr('href'); if ($.browser.webkit) { // this "if" is necessary b/c webkit browsers (Chrome & Safari) don't reliably report correct dimensions for images that have been cached imageSrc += '?noCache='+Date.now(); } $('') // create image DOM element and make src .load(function(){ // assures that enlarged image is loaded ahead of time var $img = $(this); setTimeout(function(){ // make sure the image $img.o3EnlargeBox({}); },1); }); }); });The code in my last post (thanks for editing it
) works in my situation, but I guess it’s not a clean and efficient JS anymore. I just combined the original go.js and your suggestion.