Lightbox problem

I've manually installed a lightbox so the foto's are more user friendly.

As you can see here, it kinda works:

http://www.iendracht-archief.be/foto/2010-2011/koksijde-eendracht-aalst/

But, i'm still having some problems:
- The "Next" and "Last" button doesn't work. How could i fix that?
- I would like to display the description under the foto (now, it's the title that is displayed). I succeeded to display the title by adding this to the link:

" title="<?php echo getImageTitle();?>" >

When i change that to getImageDescription, it doesn't work...
- What about google. Will my images be indexed if I display them this way (so only with lightbox, no page for every image) ...

Thanks in advance

Comments

  • acrylian Administrator, Developer
    1. Well, regarding user friendly: keep in mind that if someone disables Javascript in his browser he can't access them at all. Additionally no one can point some one to a image he likes since he can't link it. He has describe it like the 6th image in the 10th row.

    2. Regarding next/prev consult the documentation of the lightbox scripts used (it is not hte colorbox that comes with Zenphoto as far as I can see) and set the proper defines on your theme.

    3. Regarding the description it does really help to read our documentation as well. Start with the theming tutorial and possibly the functions documentation for the correct names.

    4. The full images probably are indexed directly based on the other settings of your site (htaccess, permissions, robot.txt). Since there is no image page of course title, description etc. are not.
  • Thanks for your quick response acrylian.

    I think you're right that the lightbox should only be placed on the image page itself, but i fear that i have a too limited knowledge of PHP to do this correctly, and i can't find a manual that explains it clearly.

    I would like to have the normal resolution on the image page, but when you click on the photo, you should get the full size image in a lightbox effect. And you should be able to browse to the next image in the lightbox...

    Do you think you could explain me briefly how to do this?
  • acrylian Administrator, Developer
    Look at the standard Zenpage theme for example which does exactly this.
  • I tried to do that, but what part do I have to copy? When i copy the whole script, it works, but when I copy some parts, it doesn't work...
  • acrylian Administrator, Developer
    Look at the source code and see how the lightbox script you use needs to be set up (there are tons of derivates).
  • Could you tell me what I have to copy from image.php in Zenpage? I tried a hundred things, but it's not working...

    [code]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <?php zp_apply_filter('theme_head'); ?>
    <title><?php echo getBareImageTitle();?> | <?php echo getBareAlbumTitle();?> | <?php echo getBareGalleryTitle(); ?></title>
    <meta http-equiv="content-type" content="text/html; charset=<?php echo getOption('charset'); ?>" />
    <link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/style.css" type="text/css" />
    <script type="text/javascript">
    // <!-- <![CDATA[
    $(document).ready(function(){
    $(".colorbox").colorbox({inline:true, href:"#imagemetadata"});
    $("a.thickbox").colorbox({maxWidth:"98%", maxHeight:"98%"});
    });
    // ]]> -->
    </script>
    <?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
    </head>
    <body>
    <?php zp_apply_filter('theme_body_open'); ?>

    <div style="margin-top: 16px;"><!-- somehow the thickbox.css kills the top margin here that all other pages have... -->
    </div>
    <div id="main">
    <div id="header">
    <h1><?php echo getGalleryTitle();?></h1>
    <div class="imgnav">
    <?php if (hasPrevImage()) { ?>
    <div class="imgprevious">" title="<?php echo gettext("Previous Image"); ?>">« <?php echo gettext("prev"); ?>
    <?php } if (hasNextImage()) { ?>
    " title="<?php echo gettext("Next Image"); ?>"><?php echo gettext("next"); ?> »</div>
    <?php } ?>
    </div>
    </div>

    <div id="content">

    <div id="breadcrumb">
    <h2>" title="<?php gettext('Index'); ?>"><?php echo gettext("Index"); ?> » <?php echo gettext("Gallery"); ?><?php printParentBreadcrumb(" » "," » "," » "); printAlbumBreadcrumb(" ", " » "); ?>
    <?php printImageTitle(true); ?> (<?php echo imageNumber()."/".getNumImages(); ?>)
    </h2>
    </div>
    <div id="content-left">

    <!-- The Image -->
    <?php
    //
    if (function_exists('printjCarouselThumbNav')) {
    printjCarouselThumbNav(6,50,50,50,50,FALSE);
    }
    else {
    if (function_exists("printPagedThumbsNav")) {
    printPagedThumbsNav(6, FALSE, gettext('« prev thumbs'), gettext('next thumbs »'), 40, 40);
    }
    }

    ?>
    <div id="image">
    <?php if(getOption("Use_thickbox") && !isImageVideo()) {
    $boxclass = " class=\"thickbox\"";
    $tburl = getUnprotectedImageURL();
    } else {
    $boxclass = "";
    $tburl = getFullImageURL();
    }
    if (!empty($tburl)) {
    ?>
    "<?php echo $boxclass; ?> title="<?php echo getBareImageTitle();?>">
    <?php
    }
    printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
    <?php
    if (!empty($tburl)) {
    ?>

    <?php
    }
    ?>
    </div>
    <div id="narrow">
    <div id="imagedesc"><?php printImageDesc(true); ?></div>
    <?php printTags('links', gettext('Tags:').' ', 'taglist', ', '); ?>
    <br style="clear:both;" />
    <?php if (function_exists('printSlideShowLink')) {
    echo '<span id="slideshowlink">';
    printSlideShowLink(gettext('View Slideshow'));
    echo '</span>';
    }
    ?>

    <?php
    if (getImageMetaData()) {echo "<div id=\"exif_link\">".gettext("Image Info")."</div>";
    echo "<div style='display:none'>"; printImageMetadata('', false); echo "</div>";
    }
    ?>

    <br style="clear:both" />
    <?php if (function_exists('printRating')) printRating(); ?>
    <?php if (function_exists('printGoogleMap')) printGoogleMap(); ?>
    <?php if (function_exists('printShutterfly')) printShutterfly(); ?>

    </div>
    <?php if (function_exists('printCommentForm')) {
    printCommentForm();
    } ?>

    </div><!-- content-left -->

    <div id="footer">
    <?php include("footer.php"); ?>
    </div>

    </div><!-- content -->

    </div><!-- main -->
    <?php
    printAdminToolbox();
    zp_apply_filter('theme_body_close');
    ?>
    </body>
    </html>

    [/code]
  • acrylian Administrator, Developer
    The full image part and the colorbox JS define. Please read the theming tutorial to learn the basics of Zenphoto theming. Also review the Colorbox website about how to set that up.
Sign In or Register to comment.