WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox JS Plugin (46 posts)

  1. Ment0r
    Member
    Posted 8 years ago #

    Hi all.. just made a new plugin, i have disabled comments on pages at my blog so here goes the content:

    Description:
    Plugin that turns posted images into neat Javascript-powered overlay popups instead of just linking to the fullsize image. This plugin is based on the cool javascript done by Lokesh Dhakar and transformed by to a plugin for WordPress by me, inspired by Frank from 2d-sign. Enjoy!

    What is it good for?
    It scans your posts for linked images and makes a nice overlay popup out of them. This is much better then linking to a new window oder even open a fullblown javascript popup. This is a neat little thing and shows a small preloader animation before showing the full image. Before i continue to talk about what it is, i better put on some example.

    Example Linked Image
    (( check out at my blog ))

    How to Install?
    1. Just download the zip-file and unpack it into your wordpress plugins-folder.
    2. There is only one thing you need to take care of: Open the “lightbox.js? and change the absolute path to the loading image and close image. If you don’t do this, then you will get an javascript error and your computer explodes into a million pieces, but then again.. nothin but nothin will happen. So better watch out for this path if you use permalinks. Defaults to “/blog/? ..
    3. Activate it and you’re done. Browse to a post of yours with an linked image to see if it’s working.

    Download:
    Click here to download version 0.1 (zip)

  2. jwurster
    Member
    Posted 8 years ago #

    I use the Zap_ImgPop plugin. Could you contrast yours and his?
    Thanks, jim

  3. Ment0r
    Member
    Posted 8 years ago #

    Hi.

    I just tried Zaps over on his blog and it gave me an Javascript Error and also it just looked like a normal linked image. With my plugin you have no errors and also it looks smooth (centered, with border and closebutton, while background blurs) and you dont have to write anything into your image-tag by hand.

    The plugin i wrote "scans" for linked images in your posts and applies its magic to them. Furthermore it can have "captions" which are based on the image title-attribute and it is compatible with any image upload script you might use on your blog including the one from WP2.0.

    To have popups like this you dont need any html skills at all and the script is very light written. nearly no overhead and the necessary HTML for the popup is madeup clientside with some DOM-Magic.

    I am really not into the Zap_ImgPop and only went to developers blog to see his demo and as far as i can say Lightbox is easier to use and better looking. If there are any styling options or even an adminpanel on Zap_ImgPop i have to say that you will miss a configuration panel on the wp-lightbox, even though i think you really won't need any. If you want to change something then exchange the images provided or tweak the CSS.

    It is completly dynamic and compatible to all major browsers.

    EDIT: i just tried Zaps again and seen it in full effect. Looks like the error only appears on first visit. However.. there is one error. His looks cool too and is draggable.. It is hard to contrast them now except for that error. I like his too. Cant tell. The Lightbox PopUp is pretty much straight forward compared.

  4. nli
    Member
    Posted 8 years ago #

    I had same kind of error at your site: the plugin didn't work on first visit. The page just became dark-coloured but no error was given. However, it worked when I returned to your site.

    I'm using Opera 8.51 and Mandrakelinux 10.1.

  5. digitalfrog
    Member
    Posted 8 years ago #

    YES !!!
    That is such a great work, many thanks !

    It only works for me if I hardcode the <a rel="lightbox" href="http:XXX into my post.

    I assumed the plugin was a wrapper that would insert it automaticaly for me ?

    If that's indeed the case then something wrong somewhere as it does not work without manualy inserting the tag.

    http://www.digitalfrog.nl

    Ralph

  6. courtneyelizabeth
    Member
    Posted 8 years ago #

    This seems great! BUT...i cant get it to work on my site...I can see by the source view that it adds the js...but...it's not loading the image in the new window still...

  7. courtneyelizabeth
    Member
    Posted 8 years ago #

    *sigh* should we add the rel tag in the img tag or the link tag?

  8. Ment0r
    Member
    Posted 8 years ago #

    there is now a version 0.2 available, checking if an image is linked or if it is a link to a normal website.

    the plugin adds the rel automatically.. it,s like.. you drop it in and it works. theres not much to it. it should work straight away.

    if you have trouble, post your website and ill check what the problem could be. actually i couldnt think of anything. i am just matching and replacing .. :/

    <a[anything]href="[anything].(jpg|gif|png)"[anything]><img[anything]

    Here is my checklist:

    - begins with A,
    - has href,
    - last part of link ends with an image extension,
    - IMG follows the closing A-tag

    If all is okay:
    -> append "rel=lightbox" to the end of the A-tag.

    thats it... it must work, if not .. there is something in the HTML written where my pattern fails upon OR there are errors within other Javascripts OR you havent setup the path-vars within the lightbox.js

    hope that helps..

  9. digitalfrog
    Member
    Posted 8 years ago #

    still no luck, still http://killerfrog.demon.nl/blog

    I assume the path-vars is not the issue as it works when I hard code the lightbox in the tag

    Ralph

  10. Ment0r
    Member
    Posted 8 years ago #

    the latest entry cant be found by my script because there is a space between the link an the image-tag

    ...> <img ..

    that's very uncommon and so i don't check for things like that. maybe that's the issue? as for the other pictures i can hardly tell what is working and what's not. the other ones look good and should be replaced properly.

  11. Sphagnum
    Member
    Posted 8 years ago #

    This is a very cool plugin; however, I can't for the life of me get it working. I've got a thumbnail linked to the full image and the plugin is activated. I've even tried adding the rel="lightbox" but no avail. Any ideas?

    My blog

    Or take a look at this post in particular. Thanks

  12. Sphagnum
    Member
    Posted 8 years ago #

    Ah, nevermind. I followed the instructions and downloaded the version on this site and it's working fine. Thanks anyway

  13. jabash
    Member
    Posted 8 years ago #

    Would love to get this plugin to work on my blog. According to my instructions there is no need to add tags. It will just convert all links as needed. Some people discussed the rel tag, I tried adding that as a test and it still didn't work.

    I look at the code for my links and none of them have a rel tag. Does the plugin insert these tags? I did contact the author also.

  14. Magma
    Member
    Posted 8 years ago #

    It does automatic. The reason why it isn't working at your site is because it tries to look te plugine in "motorcycleramblings.com/wp-content/..." instead of "motorcycleramblings.com/blog/wp-content/...". Maybe something is wrong in your wordpress settings (weblog address ?)

  15. jabash
    Member
    Posted 8 years ago #

    My blog address is different from my wordpress address b/c I installed wp in a subdirectory. Wouldn't the plug recognize this basic setting or am I missing something?

    Thanks for the help.

  16. Magma
    Member
    Posted 8 years ago #

    In your WordPress options you can define 2 URIs. One for wordpress and one for the blog. For the WordPress URI you should use "motorcycleramblings.com/blog/" because there is your wordpress installation (right?). The other URI should be "motorcycleramblings.com/", I think...

  17. jabash
    Member
    Posted 8 years ago #

    That is how I have it set up. motorcycleramblings.com take you to my blog although it is installed in /blog

    No what :(

  18. Magma
    Member
    Posted 8 years ago #

    But did you put "motorcycleramblings.com/blog/" in the wordpress options?

    Otherwise edit the lightbox-plugin.php and change the

    $lightbox_pluginpath = get_settings('siteurl')."/wp-content/plugins/lightbox-plugin";

    to

    $lightbox_pluginpath = get_settings('siteurl')."/blog/wp-content/plugins/lightbox-plugin";

  19. jabash
    Member
    Posted 8 years ago #

    Yes, they are entered in my options as described.

    I looked into get_settings and it seems to me that when you call 'home' you get the blog url i.e. motorcyclerablings.com instead of the wp home directory motorcyclerambling.com/blog.

    I searched the codex and tried changing 'home' to 'siteurl' and it the pluging seems to work now.

  20. Rok
    Member
    Posted 8 years ago #

    Hi Ment0r,

    I had downloaded lightbox-pluginplus from your site. And after unzipping, uploaded "ligtbox-plugin" directory & "lightbox-plugin.php", after making following changes in PHP file,

    ( $ lightbox_pluginpath = get_settings('siteurl')."/blog/wp-content/plugins/lightbox-plugin"; ).

    But to no avail. I had then made an additional manual reference in my index.php file for the ".js & .css" files of lightbox.

    But still nothing happen.

    Could you please advice me, my URL: http://www.roks.xmgfree.com/blog

  21. Rok
    Member
    Posted 8 years ago #

    Hi there,

    Eagerly waiting for reply.

  22. jabash
    Member
    Posted 8 years ago #

    Are your blog and wordpress directories different like mine.

    Your lightbox is pointing to the blog directory.
    <link rel="stylesheet" href="/blog/wp-content/plugins/lightbox-plugin/lightbox.css" type="text/css" media="screen" />

  23. Rok
    Member
    Posted 8 years ago #

    jabash,

    My blog is installed into "/blog" directory. Thus the complete URL is http://www.roks.xmgfree.com/blog

    This is how the blog starts.

    Waiting to hear some positive reply soon.

  24. Rok
    Member
    Posted 8 years ago #

    Need help to run this fantastic plugin. Still waiting for response.

  25. allotherplaces
    Member
    Posted 8 years ago #

    I'm surprised I found this via del.icio.us and not these forums but LightBox 2.0 has been added to this plugin.

    check out:

    http://www.4mj.it/lightbox-js-v20-wordpress/

    I havent tried it yet - I'll wait until others suffer the bleeding edge ;-)

    Hope this plugin works well.

  26. Rok
    Member
    Posted 8 years ago #

    Hello!

    anybody listening, still waiting for the solution to run this fantastic plugin. My URL is http://www.roks.xmgfree.com/blog

  27. jabash
    Member
    Posted 8 years ago #

    I'm not an expert but I have the same set up and I just changed get_settings parameter. Try reinstalling and just changing that paramenter and nothing else. You might also try the plugin author's website.

  28. Rok
    Member
    Posted 8 years ago #

    jabash,

    Thanks for taking out time to reply. Now I have got this beauty into working now. And surprisingly, I did not do anything, not even changes in "lightbox-plugin.php".

    Just removed the previously uploaded. And re-downloaded Lightbox JS Plus0.5 from Mentor's site and re-uploaded again.

    And this time I got the plugin listed under Plugin's section. So, just activated this plugin. And there's the Lightbox JS Plus v05 rocking.

  29. jabash
    Member
    Posted 8 years ago #

    Excellent. BTW, when I have problems I only make one change at a time.

  30. Rok
    Member
    Posted 8 years ago #

    Yes, that's the way. But right now, I am installing some nicer plugins before starting customization.

    And, don't know, why the plugin was not listed in dashboard/plugins section.

    But as said, all is well, when end is well.

Topic Closed

This topic has been closed to new replies.

About this Topic