Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with OpenID Sign In with Google

Sign In Apply for Membership

Categories

image viewing
  • Anthony February 2011
    It would be nice to be able to have a slide show of all the images in a folder/directory.

    Would it be possible to use one of the many lightbox  (eg http://www.huddletogether.com/projects/lightbox2/)
    JavaScript plugins instead of a iBox?




  • betso February 2011
    Here we go...

    How to use Lightbox2 with XODA


    Lightbox2 is a widespread JavaScript *box using prototype and scriptaculo.us. It is increadibly stable (last change was 2008!) and works out of the "box" :).
    The reason I am using iBox by default is just the license compatibility (besides the fact that it is very lightweight and fast). iBox is licensed under the very liberal MIT license, whereas Lightbox2 is licensed under the Creative Commons Attribution 2.5 License, which is incompatible with the BSD License I insist on using for XODA. Of course I could pack software with another license together with XODA and make the note in the README about it (like I did for the icons in the recent releases) but it is better to have the complete code released under one license.
    Anyway... the suggestion by Anthony made me try to implement Lightbox2 and I have to admit that it was amazingly easy. Here I would like to share with you how I did it.

    First make a directory in the one you unpacked XODA in, e.g. lightbox2. Then go there, download Lightbox2 and unzip it:
    mkdir lightbox2
    cd lightbox2
    unzip lightbox2.04.zip

    Next you should make the changes in js/lightbox.js which are necessary for the script to find the required images. For this purpose find the following lines (somewhere in the beginning):
    fileLoadingImage: 'images/loading.gif',
    fileBottomNavCloseImage: 'images/closelabel.gif',
    and change them to:
    fileLoadingImage: 'MAIN_DIRECTORY/images/loading.gif',
    fileBottomNavCloseImage: 'MAIN_DIRECTORY/images/closelabel.gif',
    For MAIN_DIRECTORY use '/' (simple slash) if XODA is not in a subdirectory (for example when installed in the directory called by e.g. xoda.example.net). If XODA is installed in a subdirectory, you should use it for MAIN_DIRECTORY in the above example, e.g. "/xoda/" if XODA is in example.net/xoda.

    Now go back to the XODA directory ("cd ..") and place the following lines in the file index.php just after the line "<script language="JavaScript" type="text/javascript" src="<?php echo PHPSELF; ?>js/sorttable.js"></script>":
    <script type="text/javascript" src="<?php echo PHPSELF; ?>lightbox2/js/prototype.js"></script>
    <script type="text/javascript" src="<?php echo PHPSELF; ?>lightbox2/js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="<?php echo PHPSELF; ?>lightbox2/js/lightbox.js"></script>
    <link rel="stylesheet" href="<?php echo PHPSELF; ?>lightbox2/css/lightbox.css" type="text/css" media="screen">

    Open the file functions.php and replace the line:
    $dl = '<a href="' . PHPSELF . '?download=' . urlencode ($filename) . '" rel="ibox">' . $base_name . '</a>';
    with the following:
    $dl = '<a href="' . PHPSELF . '?download=' . urlencode ($filename) . '" rel="lightbox[' . xd_basename (dirname ($filename)) . ']">' . $base_name . '</a>';

    That's it!
    Now you have a slideshow in a directory with multiple images. Just click on a filename of an image and enjoy! :)
  • rolders April 12
    I just tried this, hoping that it would allow all images, anywhere in XODA to be viewed with Lightbox. However... by making the changes above, not only all images but all directories are handled by XODA and I cannot navigate the folder structure I have in XODA anymore. Back to iBox :)
Add a Comment