akWpLightBox : simple lightbox for wordpress

May 21st, 2008 | Save to del.icio.us now(0)

I 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.

Example of akWpLightbox


How To Install

  1. Just download the akwpLightbox plugin, akwplightbox.zip.
  2. Extract akwplightbox.zip into akwpLightbox folder.
  3. Upload this folder into ‘wp-content/plugin’ folder.
  4. 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.

wpSimpleBackup : a simple wordpress plugin to take backups of your blog.

Related posts

  1. Simplified AJAX For WordPress Plugin Developers using Jquery
  2. akModal: simplest alternative to thickbox
  3. akslideshow
  4. 5 key skills of a successful web application developer
  5. TubeSpy by Ajaxonomy

Wondering what to do next?


(Search web development related contents)


81 Responses to “akWpLightBox : simple lightbox for wordpress”

  1. May 21, 2008 6:57 am akWpLightBox : simple lightbox for wordpress says

    [...] unknown wrote an interesting post today onHere’s a quick excerptJust download the akwpLightbox plugin [download id]. Extract into akwpLightbox folder. Upload this folder into ‘wp-content/plugin’ folder. Now go to plugins section in admin and activate the plugin … [...]

  2. May 21, 2008 7:01 am rez0 says

    Hi nice plugin but got error when downloading

  3. May 21, 2008 7:10 am Amit Kumar Singh says

    hi rezo,

    thanks for letting me know, it is fixed now.

  4. May 21, 2008 7:44 am akWpLightBox : plugin wordpress pour vos images | Photographie says

    [...] une solution simple pour l’affichage de photographies et d’images sur votre blog ? AkWpLightBox est un plugin Wordpress léger, facile d’utilisation, qui vous permettra d’afficher vos [...]

  5. May 26, 2008 7:27 pm Gabriel says

    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.

  6. May 26, 2008 7:29 pm Gabriel says

    Follow up question: Does it modify any files? If it does, then I need to change the rights on that file.

    Thank you!

    G–

  7. May 27, 2008 12:56 am Amit Kumar Singh says

    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.

  8. May 27, 2008 1:06 am Gabriel says

    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!

  9. May 27, 2008 3:26 am dabay says

    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?

  10. May 27, 2008 3:55 am Weblog Tools Collection » Blog Archive » WordPress Plugin Releases for 5/26 says

    [...] Thanks for visiting! If you’re new here, you may want to subscribe to our RSS feed. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.akWpLightbox [...]

  11. May 27, 2008 4:24 am WordPress Plugin Releases for 5/26 | BlogBroker24-7 says

    [...] akWpLightbox [...]

  12. May 27, 2008 4:30 am Amit Kumar Singh says

    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.

  13. May 27, 2008 4:43 am dabay says

    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.

  14. May 27, 2008 4:59 am Amit Kumar Singh says

    the background color is controlled via javascript, you may want to play with ‘div.prettyPhotoOverlay’ in css file and try adjusting the opacity.

  15. May 27, 2008 5:17 am dabay says

    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!

  16. May 27, 2008 9:31 am akWpLightBox: jQuery based Lightbox WordPress Plugin » D' Technology Weblog: Technology, Blogging, Tips, Tricks, Computer, Hardware, Software, Tutorials, Internet, Web, Gadgets, Fashion, LifeStyle, Entertainment, News and more by Deepak Gupta. says

    [...] Plugin Page [...]

  17. May 27, 2008 12:38 pm Gecko says

    don’t seems to be working with firefox… or is it just me?

  18. May 27, 2008 3:11 pm Sam says

    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.

  19. May 27, 2008 3:33 pm Все о Wordpress » Плагины для Wordpress 27.05.2008 says

    [...] akWpLightbox [...]

  20. May 27, 2008 6:31 pm Amit Kumar Singh says

    Hi Sam,

    Nice idea, i will be releasing that feature soon.

    thanks.

  21. May 27, 2008 6:44 pm Gabriel says

    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.

  22. May 27, 2008 9:31 pm links for 2008-05-27 « RabiFoot at wordpress.com says

    [...] akWpLightBox : simple lightbox for wordpress | am i works? (tags: lightbox wordpress plugin) « links for 2008-05-26 [...]

  23. May 28, 2008 1:01 am blog.rotracker.net » Blog Archive » WordPress Plugin Releases for 5/26 says

    [...] akWpLightbox [...]

  24. May 28, 2008 7:42 am Sabo says

    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.

  25. May 28, 2008 10:58 am Carsten Giesen says

    Hello,

    how do your plugin work, when I add some fotos as gallery?

    cu
    Carsten

  26. May 28, 2008 11:26 am Amit Kumar Singh says

    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.

  27. May 28, 2008 9:22 pm Added “Lightbox” plugin… | The Flagstaffian says

    [...] So this is kind of a test, and kind of (if the test works) a shout-out to the new Lightbox plugin you can get right here…. [...]

  28. May 28, 2008 11:10 pm E.D. Kain says

    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?

  29. May 29, 2008 12:53 am Amit Kumar Singh says

    hi Kain,

    just checked, the folder name of plugin should be “akwpLightbox” and not “akwplightbox”.
    enjoy!!!

  30. May 29, 2008 2:50 am E.D. Kain says

    Thanks, that worked. Thought I had it right, but I guess not…great plugin!!!

  31. May 29, 2008 1:08 pm wppluginz.com » Blog Archive » akWpLightBox 1.0 says

    [...] [Download] [Plugin Page] [...]

  32. May 29, 2008 1:08 pm wppluginz.com » Blog Archive » akWpLightBox 1.0 says

    [...] [Download] [Plugin Page] [...]

  33. May 30, 2008 11:30 am WordPress Plugins That Add Value | WordPress Web 2.0 Spot-Er says

    [...] Visit akWpLightBox Home Page Here [...]

  34. May 31, 2008 5:04 am Weblog Tools Collection » Blog Archive » WordPress Plugin Releases for 5/31 says

    [...] Thanks for visiting! If you’re new here, you may want to subscribe to our RSS feed. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.Google AJAX Libraries API Plugin [...]

  35. May 31, 2008 9:51 am xiaomo says

    good job~~thankyou~~~~~

  36. May 31, 2008 4:37 pm Claus says

    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?

  37. May 31, 2008 8:10 pm Claus says

    Turned out to be a caching problem in Firefox… Doh! Feel free to deleted this and my prior comment :-)

  38. June 2, 2008 5:04 pm Hulan says

    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”).

  39. June 2, 2008 5:27 pm Larry says

    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?

  40. June 2, 2008 5:28 pm Hulan the Holy » A New Look :: No, they’re not real but thanks fer noticin’! says

    [...] a lightbox plugin. It works fine on the test blog on my PC but doesn’t work on my site. This is the one I got, if anyone can recommend another please shout up in the comments. The final niggle [...]

  41. June 3, 2008 1:31 am Amit Kumar Singh says

    @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.

  42. June 3, 2008 7:05 am Hulan says

    You can see an entry at http://hulantheholy.net/2008/04/18/i-can-fly/

    Thanks :)

  43. June 3, 2008 7:17 am Hulan says

    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 :)

  44. June 3, 2008 7:18 am Amit Kumar Singh says

    you need to enable the plugin first :-|

  45. June 5, 2008 7:06 am Jens says

    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

  46. June 5, 2008 7:17 am Jens says

    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

  47. June 5, 2008 9:16 am Amit Kumar Singh says

    thanks jens, for taking time, to provide us with an alternate solution to the problem..

  48. June 19, 2008 2:01 pm Все о Wordpress » Плагины для Wordpress 19.06.2008 says

    [...] Google AJAX Libraries API Plugin [...]

  49. July 9, 2008 8:32 pm How to Install and Set Up WP-Magazine Theme 1.0 : Premium WordPress Magazine Theme says

    [...] akWpLightBox [...]

  50. July 10, 2008 9:48 pm pictures says

    What a terrific piece. Thank you.

  51. July 13, 2008 9:05 pm Alex Leonard says

    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

  52. July 14, 2008 2:46 am Amit Kumar Singh says

    Alex,

    thanks for nice feedback.The next release of this plugin, which will have these enhancements.

  53. July 23, 2008 2:33 pm Philix says

    This is exactly what i was looking for.

  54. July 29, 2008 4:48 pm Evaldas says

    Great pluging ;)

    Amit, when you are planning to release new version?

  55. August 4, 2008 6:21 pm HotForWords says

    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
    http://www.hotforwords.com

  56. August 4, 2008 8:03 pm HotForWords says

    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

  57. August 5, 2008 2:27 pm Amit Kumar Singh says

    @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.

  58. August 10, 2008 4:21 pm hannes says

    I´d love to see this plugin workin out of an iFrame, displaying the photo over the whole page! that would be sweet!

  59. August 14, 2008 8:39 am Arch says

    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

  60. August 14, 2008 5:26 pm Amit Kumar Singh says

    @arch, this is exactly what this plugin is designed to do.

  61. September 8, 2008 1:58 am 我使用的wordpress插件 | 小墨|博客 says

    [...] akWpLightbox:为博客上图片提供lightbox效果。 [...]

  62. September 17, 2008 4:36 pm Wordpress » Blog Archive » Lightbox2 Plugin for Wordpress says

    [...] See also link1 link2 [...]

  63. September 22, 2008 7:24 am Saurabh says

    Cool ! This is what exactly i was looking for…

  64. October 26, 2008 9:54 am Vadikoff says

    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!

  65. October 26, 2008 5:45 pm Amit Kumar Singh says

    thanks for sharing Vadikoff

  66. December 7, 2008 6:24 pm wp-magazine主题使用教程 : 发财的梦想 says

    [...] akWpLightBox [...]

  67. December 18, 2008 1:58 am Caro :) says

    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!

  68. December 18, 2008 3:48 pm Amit Kumar Singh says

    for this plugin to work you don’t need to do anything in the source code. just install and enable and you are done.

  69. December 31, 2008 7:19 am 4webmasters » Top 1000 WordPress Plugin Authors says

    [...] akWPLightbox [...]

  70. December 31, 2008 1:25 pm En.nicuilie.eu Blogs » Top 1000 WordPress Plugin Authors says

    [...] akWPLightbox [...]

  71. January 14, 2009 9:01 am Wordpress Plugins for Photo Galleries - Photoblogging Part II : Web Design Resources Blog & Graphics Blog with Lists of Web Site Design Tools says

    [...] akWPLightbox [...]

  72. February 13, 2009 2:37 am gallery plugins « twodots says
  73. March 13, 2009 7:59 am akWPLightbox Plugin | WordPress Plugins Database - WordPressPluginsDatabase.com says

    [...] post, it helps you add your images as you do now, it will take care of rest of the things… …..read more Download Plugin! Plugin Owner: Amit kumar singh Homepage: Visit Plugin’s Website Version [...]

  74. March 17, 2009 5:00 pm Daniil says

    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?

  75. March 17, 2009 5:11 pm Daniil says

    Working fine now thanks :)

  76. April 7, 2009 4:20 pm Bikram says

    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.

  77. May 10, 2009 1:56 pm Ben says

    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?!

  78. May 10, 2009 2:05 pm Amit Kumar Singh says

    Ben, i am not sure.. but it must be due to original image dimensions.. check them properly.

  79. July 5, 2009 2:30 am minnickup says

    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

  80. August 14, 2009 10:12 pm Lacne chaty online says

    Perfect plugin!

  81. November 7, 2009 12:47 am Top 1000 WordPress Plugin Authors « Metode de promovare says

    [...] akWPLightbox [...]

Trackback URI | Comments RSS

Say Something, and Be Counted

Name (required)

Email (required)

Website

Speak your mind