Lightbox 2 Wordpress Plugin

Contatti | Feed
Feed Box



  • 29 Mar 06

    Lightbox 2 Wordpress Plugin

    Wordpress plugin used to overlay images on the current page into neat Javascript-powered overlay popups.

    16-12-2008 – Version 2 is out! Now from settings you can choose background-color, overlay opacity, resize speed and automatically add the lightbox effect to your post’s images.

    This plugin includes the new Lightbox JS v2.0.4 javascript written by Lokesh Dhakar and and was then transformed into a Wordpress Plugin by me. Use a title attribute if you want to show a caption. Click on the images below for an example.

    • 29-07-2007 – See also the new Slimbox Wordpress Plugin, a 7kb clone of the popular Lightbox JS
    • I added the digg it button, please DIGG ME!

    test1Roma 2

    Upgrade

    • De-activate the plugin.
    • Delete the old version `lightbox-2-wordpress-plugin` directory.

    Installation

    • Unzip the `lightbox-2-wordpress-plugin.zip` file.
    • Upload lightbox-2-wordpress-plugin folder to the /wp-content/plugins/ directory.
    • Activate the plugin through the ‘Plugins’ menu in WordPress, go to Setting->Lightbox.
    • Add a rel=”lightbox” attribute to any link tag to activate the lightbox, or rel=”lightbox[roadtrip]“ for an image set.
    • Optional: Use a title attribute if you want to show a caption.

    Single example:
    <a href=”img1.jpg” rel=”lightbox” title=”my caption”>thumbnail1</a>
    Image set example:
    <a href=”img1.jpg” rel=”lightbox[roadtrip]“>thumbnail1</a>
    <a href=”img2.jpg” rel=”lightbox[roadtrip]“>thumbnail2</a>
    <a href=”img3.jpg” rel=”lightbox[roadtrip]“>thumbnail3</a>
    Tnx to my sister for the photos! Link me in your site!

    Changelog

    Version 2.0.2 (19-12-2008)
    Some fixes
    Version 2.0 (16-12-2008)
    Background-color, overlay opacity, resize speed, auto-lightbox from settings.
    Version 1.8.2 (09-06-2008)
    Some fixes
    Version 1.8 (14-03-2008)

    Update Lightbox Js to version 2.04

    • v2.04 – 03/09/08
      • NEW – Upgraded Prototype from v1.4 to v1.6.0.2
      • NEW – Moved label text into configuration for easier localization
      • UPDATED – Code cleaned up. Respect for the global namespace and native javascript objects.
      • FIXED – Caption displays as “null” when viewing an uncaptioned image after viewing a captioned image.
      • FIXED – Clicking ‘close’ button shifts layout as link focus’ dotted line appears.

    Version 1.7 (12-06-2007)

    Update Lightbox Js to version 2.03.3

    • v2.03.3 – 5/21/07 – Support for horizontally scrolling pages. Added updateImageList method for ajax’y pages.

    Fixed xhtml validation

    Version 1.6 (05-05-2007)

    Update Lightbox Js to version 2.03.2

    • v2.03.2 – 4/30/07 – Fixed animated gif support in IE/Opera.
    • v2.03.1 – 4/18/07 – Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.
    • v2.03 – 4/10/07 – Improved keyboard navigation. Animation off toggle. HidesFlash movies under overlay. Imagemap support. Valid CSS.

    Fixed close and loading vars (Tnx to Anton Zhuchkov)
    Changed “get_settings(‘home’)” in “get_option(’siteurl’)”
    (Tnx to Luca Dentella)

    Version 1.5 (06-05-2006)

    Fixed close and loading vars.(see here if u have problem with close button)

    Version 1.4

    Fixed path’s problem

    Update Lightbox Js to version 2.0.2

    Centering in IE6 (any DOCTYPE) fixed.
    Smoothed out resize transition.
    Fixed layout issues caused by multiline captions.
    Added keyboard navigation: N for next, P for previous and X for close.

    Version 0.3

    Single Images and Image Set

    My plugin on wordpress page suddenly stopped working. I wrote several email to them but nothing…
    caffe

    If you appreciate this plugin or my support, please donate to me so I can but a cup of coffee. Thank you!
    caffe
    Thanks to the donors:

    • Per T Sovik
    • Hoa Hua
    • Spencer Harris
    • Jan Herrmann
    • Niels Emmer
    • Sahar Alarayedh

    Ricevi gli aggiornamenti di 4mj.it via Feed

    • Upnews
    • Digg
    • del.icio.us
    • Google Bookmarks
    • PDF
    Scritto da Peppe
    1,531 commentiLascia un commento
    30 Mar 06 , 3:15 pm Niklas

    Works brilliantly on my WP 2.0.2-installation. Thanks a lot!

    30 Mar 06 , 4:18 pm Koka

    hey
    i have some trouble with it:
    it did some changes (deleted a few slahes), now the overlay image and the real image appears, but as you can see, there’s no clase image… and my blog stylesheet doesnet work anymore oO
    have you got an idea?
    servus
    koka

    30 Mar 06 , 5:50 pm Peppe

    The link of your styles are wrong, don’t edit them.

    30 Mar 06 , 8:16 pm Koka

    hm, now i let everything original but now theres nothing :(

    30 Mar 06 , 11:00 pm Trackback: Hchicha’s BloG » Blog Archive » Haçade El Youm

    [...] Le second truc que je voulais mettre c’est ce plugin pour wordpress que je viens d’installer. Il permet de faire un tres bel effet sur l’affichage des photos sur le blog. Pour le tester il suffit de cliquer sur l’image en haut de ce post. … heu et si rien ne se passe pour vous ne pas hesiter à laisser un commentaire. Moi j’ai reussi mes tests sur ie et firefox. [...]

    31 Mar 06 , 12:35 am Ravin

    Any thoughts on why I can’t get this to work: http://www.parushni.com/blog/2005/10/14/112929348840251586/

    31 Mar 06 , 4:13 am Ravin

    Thanks for getting back to me.
    yeah, I know, that’s why I had commented out the part in your .php file that loaded prototype.js, so it wouldn’t be loaded twice… and only the style would load it… but anyway.
    But I’ve changed it now to the default style, which has no .js or anything, but now the images will load, but if I’m in Firefox, the little arrow and X graphics dont show up. In IE, the image placeholders show and work as the images should, but in FF 1.5.0.1… nothing… to get out of the screen I have to hit refresh.
    Any help is most appreciated.

    31 Mar 06 , 2:43 pm Ravin

    ah… I understand now… since my blog is not in the base directory… it’s in http://www.parushni.com/blog not, http://www.parushni.com I’m having problems.
    I’m not too sure how to fix this since I’m a pretty much new to all this stuff… but I look forward to your new plugin.

    31 Mar 06 , 2:51 pm Peppe

    Go to general options and check WordPress address and Blog address are http://www.parushni.com/blog

    1 Apr 06 , 10:02 am Mario

    Hi Peppe,

    thank you, sounds great for me!

    mario

    3 Apr 06 , 5:29 am Danny Foo

    Need a lil help wit the plugin. I seem to be having the same problem as ravin but I\’ve checked my options and both URLs are pointing to the correct path.

    Solution please?

    http://www.dannyfoo.com/blog/2006/04/wedding-website-of-susan-and-jason/

    Cheers.

    3 Apr 06 , 7:07 am Danny Foo

    Weird. I\’m also unsure why the problem is occuring but changing the path did the job. Thanks. :)

    Now I\’m going to see if I can tweak the caption to be on top.

    Cheers.

    3 Apr 06 , 2:12 pm Doggie

    It seems don’t work properly in my blog. But I don’t know what I’ve done wrong. Is there something wrong with my theme?

    http://doggie.madpage.com/WP/2006_04_03_55.html

    3 Apr 06 , 7:26 pm Peppe

    If possible continue to write on forum, i open a wordpress plugin category. Sorry for my english :)
    Bye

    4 Apr 06 , 2:45 am Doggie

    To Doggie: you have already prototype.js and scriptaculous.js styles in your code.

    I opened the duplicate files to see the code, and they’re absolute the same. Then I reduced the duplicate files, but it also doesn’t work.:(

    4 Apr 06 , 6:31 pm Peppe

    I update the plugin to version 1.4.

    6 Apr 06 , 7:13 am RixR

    Hi, can you please give me a hint how to define a folder for this image set thing?
    On my side i would like either have a folder or have the (roadtrip) feature show all pics tagged with saaya . Is that possible?

    6 Apr 06 , 3:28 pm Koka

    Hm, atm i‘ve put the files into the blog directory, it works, but it’s not very elegant, so – what’s new in v1.4?

    6 Apr 06 , 4:08 pm Koka

    ah great now it works! thanks a lot!

    8 Apr 06 , 2:00 pm Steffino

    uhh, shame above me. i deleted the very important function wp_head from the header.php – although the other plugins still worked, lightbox couldn’t – thank you very much for help, Peppe!

    16 Apr 06 , 5:54 am Xings

    there is a problem i found.
    For the same img (or a img link),
    this pulgin works perfect on my index page. but when i open into a single entry page, and chick the same img link, yes, the pulgin works, but the loading img would disappear.
    want the solution plz..

    17 Apr 06 , 12:21 am Peppe

    You have already some js styles. Look your code: prototype.js.php for k2.

    17 Apr 06 , 12:54 am Xings

    i found out, it is the problem that i have another element within the page has the id name “loading” which is the same as the loading img’s id.

    30 Apr 06 , 8:20 pm Rebecca

    I love this.
    I can get most of it to work but the close/next and loading images are not working. Any assistance would be appreciated!

    Blog is http://www.paintingmycanvas.com/blog

    30 Apr 06 , 8:37 pm Peppe

    I tested your blog and all works fine, but you have twice prototype.js, scriptaculous.js and lightbox.js in your header!

    2 May 06 , 6:11 pm Les KH

    Installed your lighbox plugin on a Wordpress 2.0.1 install, and it mostly works.
    The one problem I have is that the overlay doesn’t line up with the image, and thus I can’t see the bottom info or the close button. Is this because the blog stylesheet is interfering with the lightbox one? You can see an example of my problem at http://bitlink.ca/blog/2006/03/13/testing-lightbox/
    Can anyone help me solve this?

    Hint to others: I found the paths wrong. I had to create the lightbox directory beneath the plugins directory, unpack the archive there, then make an images directory beneath that and move all the gifs there.

    Thanks! Les…

    2 May 06 , 6:27 pm Les KH

    Responding to my own post:
    I solved the alignment problems by changing the blogs css for img which had 10px margins and padding. And I have Prev and Next buttons, but still no Close button. Permissions and paths all look right. Any thoughts?

    5 May 06 , 4:56 pm Pike

    First: I love the plugin!

    The strange thing is though that every time I write something new or edit something else on my weblog, the HTML of the lightbox pictures changes. It totally screwed up. It changes everything around in the HTML like this:


    You’ve got any idea what that is?

    6 May 06 , 3:42 am Peppe

    What changes?

    6 May 06 , 4:36 am Rusty

    You can see here: Lightbox Test Post that I almost have the lightbox plugin working – everything works fine, except the “close” button does not show up. any idea why?

    6 May 06 , 5:19 am Peppe

    Ok, i fix your problem, please download the new version and say me if it works fine.

    6 May 06 , 7:54 am Pike

    The code didn’t work. Next try:

    Only minus the _ everywhere

    6 May 06 , 7:56 am Pike

    rel=”lightbox” title=”This is image caption” href=”/images/kat.jpg”
    img width=”80″ height=”80″ alt=”This is image title” / href=”/images/kat.jpg”

    Just think the and in there

    6 May 06 , 8:53 am Peppe

    No image in http://www.inkling.nl/images/kat.jpg, i don’t understand, http://www.inkling.nl/?p=49 works.

    6 May 06 , 10:10 am Pike

    No, its the fact that the HTML-changes and then it doesn’t work. The picture is there now, but when I change something in another posting, then the html-on the posting with the lightbox used changes.

    6 May 06 , 1:21 pm janocjapun

    hi peppe,

    first, thanks a lot for the plugin!

    i had some problems with the lightbox.js because my wordpress installation was in a subdirectory, so the path-vars in line 63 / 64 were not correct and i had to adjust them manually for the images to be loaded. maybe there is a easy possibility to fix this, but i have no clue of js ;)

    greetings from vienna!

    6 May 06 , 2:07 pm Rusty

    Thanks for the speedy follow-up, Peppe! The fix did not work for me, but i did get it working. In lines 62 and 63 of lightbox.js I changed the relative links to absolute links to the image files and all works correctly now. FYI: My blog does not sit in my main directory so that is why the fix is needed. I also edited line 13 of lightbox2.php to use the correct path for my installation. This sounds like a similar fix as Janocjapun used above.

    Like everybody else says, thanks a million for the great plugin!

    10 May 06 , 6:30 pm stefhan

    Thank for the plugin !! It works great after changing the path in lighbox2.php :)

    19 May 06 , 4:46 am Adam

    The plugin doen’t seem to be working on any of the sites I’m finding it used on, including this page. I’ve checked in IE, FireFox and Opera. On all three the browser goes to the image itself on the server. JavaScript is enabled on all three of my browsers.

    19 May 06 , 5:12 am darren

    beautifully done… thank you for your work.

    20 May 06 , 10:01 pm PAX

    nice work. but it does not work in wordpress with a wysiwyg editor on. the rel=”lightbox” gets deleted with a wysiwyg editor which makes it a bit unhandy.

    24 May 06 , 12:25 am norbert

    First of all: thanks a lot for this nice work!
    I modified the lightbox2.php a little bit. Now you don’t have to enter the rel=”lightbox[roadtrip]” by your own, instead the plugin adds this tag:

    function lightbox_create($content){
    global $post;
    $pictureset = $post->ID;
    return preg_replace(‘//i’, ‘‘, $content);
    }

    add_filter(‘the_content’, ‘lightbox_create’, 2);

    Have fun and stay well

    24 May 06 , 12:31 am norbert

    Oops, the code in the preg_replace() function messed up a little bit! Here is just the piece of code you have to change in there:

    Instead of rel=”lightbox[roadtrip]” type rel=”lightbox['.$pictureset.']“

    30 May 06 , 10:29 pm LEMONed

    Great work, but the css file couldnt pass the W3C CSS Validation.

    31 May 06 , 11:16 pm Jan

    Hi,

    This plugin looks amazing when workng, however I am having the same problem that Christian h ad. I’ve installed the plugin and activated it and when I added the ref=”lightbox” attribute, then it doesn’t work. What happens is it just opens a new page with my image in it. Any suggestions. http://www.rat-tail.com

    1 Jun 06 , 12:53 am Peppe

    Yes,
    file not found on your server, check where you put the files!
    See your view-source and test the links
    http://www.rat-tail.com/wp-content/plugins/lightbox/lightbox.js

    1 Jun 06 , 12:57 am Peppe

    Jan, i found your problem, you have created a folder lightox and another folder lightbox inside.
    In fact the link http://www.rat-tail.com/wp-content/plugins/lightbox/lightbox/lightbox.css
    works. Move the files up.

    1 Jun 06 , 2:59 pm duncan

    i’m not sure how to create an ‘image set’, do i just put a reference to a folder in the rel=”lightbox[foldername]” ?

    1 Jun 06 , 6:29 pm eduo

    rat-tail: it’s REL, not REF:
    rel=”lightbox”

    Duncan: rel=”lightbox[setName]” for each photo. All the links with the same setName will be shown as a set.

    1 Jun 06 , 11:34 pm Rusty

    eduo:
    how exactly do I give links a “setName?”

    Pages: [1] 2 3 4 5 6 7 8 9 10 1131 » Show All