• Hi guys,

    I’m really just after some advice – I just need a simple image gallery or viewer – one that displays images as thumbnails and uses the lighbox effect to display them larger when clicked. I’ve googled for the past hour and tried about four plugins but none seem to really fulfill this simple role.

    Can anyone suggest a good plugin?

    Cheers!

Viewing 1 replies (of 1 total)
  • Thread Starter MeltingDog

    (@meltingdog)

    Ok so I basically did it myself. Could not find a good enough plugin. Perhaps the standard is Lightbox comes with themes now?

    Anyway, for those trying to get hold of a simple lightbox plugin (lightbox effect only, no gallery) for integration to you theme, heres what I did:

    1.Downloaded JQuery lightbox from here:
    http://leandrovieira.com/projects/jquery/lightbox/

    make sure its a JQUERY lightbox, not Prototype.

    2. Unzip and FTP to your themes root directory. You can either drop all the files and folders directly in there or put them in their own folder. To keep things neat, I did the latter and called it jquerylightbox.

    3. In your header file, between the <head> tags, paste this code:

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

    BUT, append the php to the folder path so WP knows your starting from your themes folder. This php looks like:

    <?php echo bloginfo('template_directory') ?>

    and you probably already have that somewhere in your header file. So, your code in the header should look like this:

    <script type="text/javascript" src="<?php echo bloginfo('template_directory') ?>/jquerylightbox/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo bloginfo('template_directory') ?>/jquerylightbox/js/jquery.lightbox-0.5.js"></script>

    4. Add the link to lightboxes external css. Same deal with adding the php in the directory path

    <link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory') ?>/jquerylightbox/css/jquery.lightbox-0.5.css" media="screen" />

    A FEW THINGS TO NOTE:
    a) Dont forget to add a / after the php bit
    b) Make sure the version number of lightbox (e.g. 0.5, 0.5, etc) is the same as the version you have downloaded.
    c) if youve put you lightbox files in their own directory dont forget to include its name in the path (e.g. jquerylightbox with mine).

    5. Save the header file and re-upload to your theme directory.

    6. One the page you want the effect to be on upload your image, or if you already have an image in there surround it by a div with the id my_images or whatever you want. e.g:

    <div id="my_images">
    <a href="http://www.yourdomain.com./wp-content/uploads/2011/09/pic.jpg"><img src="http://www.yourdomain.com.au/wp-content/uploads/2011/09/pic.jpg" alt="" title="nicepic" width="72" height="72" alt=""  />Enlarge</a>
    </div>

    Then under that div paste this code:

    <script type="text/javascript">
      $(document).ready(function() {
       $('#my_images a').lightBox();
      });
    </script>

    That should be it.

    Remember you can alter the thumbnail size by adjusting the inline css in the img html.

    If anyone has a better way to do this or has actually found a properly working plug in I would love to hear from you. I am a WP noob so I wouldnt be surprised if I missed something here

Viewing 1 replies (of 1 total)
  • The topic ‘Need help finding a simple image gallery plugin’ is closed to new replies.