icanI always strive for simple solutions to all my problems, akWpLightBox plugin is result of one such endeavor.
For quite some time now I was looking for a plugin which is lightweight, and can show images in lightbox like effect, in my blog.
The effort of creating a javascript functionality for that was putting me off, then few days back I saw the prettyPhoto, it is a jQuery based plugin for creating the lightbox effects for the images.
This made my job pretty easier, now I can have my lightbox effect, all i needed to was convert it into a wordpress plugin. So I did some modifications to the prettyPhoto to suite my needs, and here is the result of my work. Check out an working example below.
How To Install
- Just download the akwpLightbox plugin, akwplightbox.zip.
- Extract akwplightbox.zip into akwpLightbox folder.
- Upload this folder into ‘wp-content/plugin’ folder.
- Now go to plugins section in admin and activate the plugin
Now, enjoy the lightbox effect.
How To use
Next time when you are adding a image in the post or page, just remember to link you image to full size image, or to image that you want to show in the lightbox. You may want to check “title” attribute of anchor tag, this will be displayed below the image as caption in the lightbox.
Credits
I will say all credit goes to Stephane Caron for creating simple to use prettyPhoto plugin that made this possible.
If you have any questions, suggestions or issues just leave a comment below.
Thoughts on This Post (60)
Hi nice plugin but got error when downloading
hi rezo, thanks for letting me know, it is fixed now.
I love the idea, but it’s not working on my server. It’s odd, I tried it on my //LOCALHOST/ test setup, and it worked GREAT. (very nice work, by the way.) But when I upload it to my server, it’s not working. Maybe I need to set rights on the javascript or something? You can see a non-working link here: http://makcenterufi.org/?cat=9 Thank you for making the plug-in. Hopefully I can use it on my server.
Follow up question: Does it modify any files? If it does, then I need to change the rights on that file. Thank you! G–
Gabril, From what i have see the problem is that javascript files or not getting included. on the server can you check that name of the plugin folder is exactly “akwpLightbox”, ie ‘L’ in the lightbox is capital.
That was it! Fixed it. No idea how the directory ended up all lowercase, though. hmm, maybe my decompression program.? Thank you for the great plugin!
Thank you for sharing your wp-plugin, i am glad to use it. I have a question: If i want to change the page’s background color to darker, what can i do?
i didn’t get you question properly, so i am assuming you are talking about the background color of lightbox, Right now their is no easy way to do it, but you can play with the css file in the plugin folder and replace the four gif images.
sorry, i mean the webpage’s other part except the light box. When i click the image, the light box shows and the background of the webpage becomes dark(but not dark enough). I just want to the background darker, so that the light box looked more attractive. Thank you! sorry about my english expression, i am not an english speaker.
the background color is controlled via javascript, you may want to play with ‘div.prettyPhotoOverlay’ in css file and try adjusting the opacity.
Yes, thank you, i now know how to change it. this “0.35” in the prettyPhone.js file is the key: fadeTo(prettyPhoto.options[“animationSpeed”],0.35 i changed it to 0.65 , it works. Thank you again!
don’t seems to be working with firefox… or is it just me?
I absolutely love this plugin. Great job! I have used other lightbox-effect plugins, but the difference is that in this one, I don’t have to remember to add a class or style code to my images. May I make a suggestion for a new feature of this plugin? I often post more than one image in my blog entries. I would like to incorporate a mini slideshow into the lightboxed image. That is, if I have 4 pictures of a birthday party, I would like to pop up one image in the lightbox with a “next picture” arrow showing the next photo in the series, rather than having to close/reopen the lightbox to see the next image.
Hi Sam, Nice idea, i will be releasing that feature soon. thanks.
Gecko, it works great in my Firefox. maybe you’re have the directory naming problem I was having. Look at his message to me explaining the proper plugin directory name. He also has an example image link at the top of this page you can test in firefox.
Those having problems with Firefox and the lightbox effect not showing up, revise if you have the Firebug plugin installed, if you do, that´s the problem, deactivate Firebug and the problem will be solved.
Hello, how do your plugin work, when I add some fotos as gallery? cu Carsten
Hi Carsten, i am not sure what you mean exactly, but in general my plugin works something like this.. when you add an image to the post, which is linked to bigger image. So that when i click on the image in post it directly opens the bigger image. My plugin detects such situation and attaches itself these images in the post and shows then in the lightbox window. As for showing the images in a gallery is concerned, that will be a feature that i will be releasing in the next release of the plugin.
I’m not sure what I’m doing wrong. My pictures just open up in the browser…no lightbox at all. The plugin is activated, and the pic is linking to an obviously larger pic…any help?
hi Kain, just checked, the folder name of plugin should be “akwpLightbox” and not “akwplightbox”. enjoy!!!
Thanks, that worked. Thought I had it right, but I guess not…great plugin!!!
good job~~thankyou~~~~~
Hmm… going to http:///wp-content/plugins/akwpLightbox/js/ shows the two js files (jquery-1.2.3.min.js and prettyPhoto.js) but when I click on either of them I’m taken to the standard error page (getting a 404 I presume). Also I’ve noticed that the rel=”prettyOverlay” is not inserted on images when I edit my posts. I guess this could be a result of the “missing” js files? Any thoughts on this?
Turned out to be a caching problem in Firefox… Doh! Feel free to deleted this and my prior comment 🙂
I’ve been testing this on the localhost setup I have on my PC and it works fine in both FF and IE but it doesn’t work on my site in either browser. I check the directory name and it’s correct (has the “L”).
Nice plugin! Thanks for making it available – I have tried several others like it and this is the only one I have been able to get working.. Is there an easy way to make the dark overlay darker?
@hulan can you show me the website where you can’t get it working. I might be able to help. @larry: sorry, but for now the only way to change color darker is as ‘dabay’ pointed out in the comments above.
You can see an entry at http://hulantheholy.net/2008/04/18/i-can-fly/ Thanks 🙂
Doh! I did enable it, honest! When it didn’t work initially I came here and checked the comments and saw the issue about the folder name being changed to lower-case when the zip was unpacked and sure enough, that had happened to me too; correcting the folder name must have de-activated the plugin, I never thought to check that again *sighs* Thanks for looking at it 🙂
you need to enable the plugin first 😐
Hi Amit, nice plugin, though I have a strange problem with it on the web (localhost works fine): In IE everything works fine, in Firefox 2.0.0.14 the plug seems not getting called. I already fixed the “L” problem that occoured and made sure the plug is activated in WP. So, now it works in IE 7.0 but it refuses in FF… Any suggestions what went wrong? Thanks for your input! Jens
Yo thanks, I already fixed it by editing your code via the plugin editor directly inside of WP: Where the directory name is specified: “define(‘AKDIR’, ‘akwplightbox’);” you can see, I changed the name to all lowercase letters. Then change the name of the folder on the server acordingly. That did it for me! Thanks for your work, great, great WP plugin! Jens
thanks jens, for taking time, to provide us with an alternate solution to the problem..
What a terrific piece. Thank you.
Hey, I’ve been posting comments on the WP forums there, and just realised that I should really have checked this page. So, my query about the “L” in the folder name is known, and it looks like the prev/next function is also known. I just did this myself by editing the akWpLightbox.php code to read: ` jQuery(“a[href$=’jpg’]”).attr(‘rel’,’prettyOverlay[“.$post->ID.”]’); jQuery(“a[href$=’gif’]”).attr(‘rel’,’prettyOverlay[“.$post->ID.”]’); jQuery(“a[href$=’png’]”).attr(‘rel’,’prettyOverlay[“.$post->ID.”]’); ` Also, I put a point up in the forum about how the overlay z-index values should be higher. At the moment they’re set at 1 and 2, for the background overlay, and the image container. I’d have them up at 1000 and 1500 to avoid any potential clash with user css. Nice work though 🙂 If prettyPhoto was able to ensure that the image size was never larger than the browser window, that would be incredibly cool! Cheers, Alex
Alex, thanks for nice feedback.The next release of this plugin, which will have these enhancements.
This is exactly what i was looking for.
Great pluging 😉 Amit, when you are planning to release new version?
I noticed that prettyPhoto DOES resize images to prevent being too bog for the window. Would it be possible for me to drop that new version into your plugin? Or is it too cimplicated for a layperson like myself? Thanks so much! I love this as it’s so much smaller than lightbox! Marina www.hotforwords.com
Oh.. by the way… I downloaded the plug-in and it changed the L to a lowercase l in the folder. I changed the l to an uppercase L and the plugin still didn’t work.. so I instead did what Jen said to do above : “define(’AKDIR’, ‘akwplightbox’);” and it worked perfectly after that. Maybe you should just go all lowercase moving forward? Thanks! Marina
@HotForWords, Well i had done some modifications in prettyphoto plugin initially to make it work. I had also suggested prettyPhoto developer about those changes. So if he had included those changes then you can simply replace existing to new version of prettyPhoto. I say check it out and let us know, their won’t by any harm. if it does not work simply replace it with old version.
I´d love to see this plugin workin out of an iFrame, displaying the photo over the whole page! that would be sweet!
hi, great plugin, I added more than one image, four actually. but it only shows one image at a time. the gif files contain next and previous, I thought that would display every image in the post. thanks
@arch, this is exactly what this plugin is designed to do.
Cool ! This is what exactly i was looking for…
Hi, nice plugin! But i’m fix your prettyPhoto.css for IE5.5 or better: div.prettyPhotoOverlay { background: #003; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; width: expression(document.body.clientWidth + “px”); <- FIX } Good luck!
thanks for sharing Vadikoff
Hi, Thanks for the great work on akWpLightBox! I am hoping to implement it! So far it is the only other lightbox that allows me to have 2 installs of lightbox-esque plugins on my Wordpress site (in combination with Lightbox2)! I am not a programmer by any means, so I hope someone can help me. I have tried both Alex Leonard and Vadikoff’s mods. I have been tagging my photos with rel=”prettyOverlay” if they are a single photo and rel=”prettyOverlay[gallery]” and rel=”prettyOverlay[gallery2]” if I want them to be part of a group of photos. I have all three of these instances on one Wordpress page. The result, after the mods, was that ALL the photos became one big gallery. Even if I were just clicking on the single photo that I want to pop up by itself without next or previous navigation, it still supplies it. The second issue I’ve come across is only in IE (I dunno about IE7, I’m only using IE6 on this computer). When I arrive at the last picture in the group, a “Next” navigation appears in the middle of the photo where it looks really strange. It is clickable; I click on it and it just does the “thinking” thing with the animated gif, because it is trying to go next but there are no more pictures! This does not occur when I click directly on the last photo on the page and have the lightbox open up from there, only if i click on any other photo and use the next button to get the last photo. Also, using Vadikoff’s modifications, I am not sure what difference I should be seeing in the result. Has anyone else had these issues? Thanks in advance for your help! I love the prettyPhoto effect and hope to be able to use it!
for this plugin to work you don’t need to do anything in the source code. just install and enable and you are done.
Hell, Good plugin but its not working for me. I have isntalled it and no errors, hen activate. and it do nothing, all my mages opens in a new blank window. Now idea whats wrong. Any help?
Working fine now thanks 🙂
Thanks Buddy, your example on your site looked cool and I believe I can get the same effect on my own blog. Looks really good.
awesome work. one question; my images display in a huge lightbox (way way too big) even though the image is small… what have i done?!
Ben, i am not sure.. but it must be due to original image dimensions.. check them properly.
Hi, I used amiworks.co.in forum to get information for that i had in my class. This is an excellent site for this information
Perfect plugin!
I installed your plugin, which by the way, I love becuase of it’s simplicity but it does not work all the time. Sometimes it opens up pics in a different browser but then I will close the new browser and go back to the same picture and the plugin will work correctly. I am sure it is something simple that I am missing but my knowledge doesn’t extend far from plug and play. Any help would be appreciated.
I am not sure.. but i think it is mostly due to cache or may be because relevant JavaScript files are not loading properly.
This plugin ROCKS! 🙂
Hello, I am not a programmer, just a brave and just knowledgeable enough to be slightly dangerous dyi blogger. I installed your plugin, but cannot get it to work properly. It did work one time when i inserted my image as a thumbnail. I don’t really want a tiny image in the post, i would like the image in the post to be something like 150 px and then the lightbox to display the larger image. (the original image is about 600×400 – i tried linking the inserted image to the source, but it opens in a new browser window instead of the lightbox.) I did try the suggestion above and i changed the name of the plugin inside the plugin editor (it did have lower and uppercase letters in the name), but still no luck. Can you help a newbie out? 🙂 thanks so much!