Home› General support

Zenphoto & Lightbox 2.04

AlkaSeltxer Member
in General support
I'm trying to get lightbox working, I've searched these forums and google and could not find an answer that works.

In the image.php file I've added:
`
/lightbox/js/prototype.js">
/lightbox/js/scriptaculous.js?load=effects,builder">
/lightbox/js/lightbox.js">
`
to the header.

Then changed the a href for lightbox:
`
" rel="lightbox[<?php printAlbumTitle();?>]" title="<?=getImageTitle();?>"><?php printCustomSizedImage(getImageTitle(), null, 400); ?>`

Then I added the lightbox css to the master css of my theme.

But it doesn't work. It still just loads the image in the same window on a blank page.

I'm using Zenphoto 1.2.1
Thinkdreams Theme 1.1
Trying to use Lightbox 2.04

Could really use some help.

Comments

  • acrylian Administrator, Developer
    You should update to the latest version which is currently 1.2.5 RC2. (The Thinkdreams theme also is not supported at all). Zenphoto's current default js libary is jQuery (1.2.6) that may cause conflicts with other libaries like prototype.

    The general issue may be that you set full images with protection. These lightbox scripts generally need the unprotected images.
  • AlkaSeltxer Member
    Aw well hell. Thanks.
  • slyt Member
    Is it possible to add Lightbox v2.04 to Default Theme ? If yes can anyone write short how-to ?

    Regards,
  • acrylian Administrator, Developer
    jQuery is the Zenphoto default javascript libary, so since Lightbox is based on other JavaScript framework there may be conflicts. Tgere is also a Jquery Lightbox variant. Also we have a similar solution named Thickbox already on board.

    The the how-to is decribed on the lightbox page. Of course you will need to get familiar with Zenphoto themes in general by reading our theming tutorial for example as you will have to change your theme.
  • slyt Member
    OK. Thickbox is already on board but it opens (in default theme) only EXIF infos, not full-size picture (which is opened on blank raw page). Besides Lightbox2 or jQuery lightBox looks much better.
    I am not programmer and it is a little bit troublesome to study all Theming Tutorial and Function Tutorial to add that feature.
  • slyt Member
    I try to add jQuery lightBox to default theme. Therefore I add these three lines to <head> image.php:

    <script type="text/javascript" src="<?= $_zp_themeroot ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $_zp_themeroot ?>/js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="<?= $_zp_themeroot ?>/styles/jquery.lightbox-0.5.css" media="screen" />

    Then I am little confused 'cause I have no idea what function use.

    Any help is appreciated.
  • stef404 Member
    I fiddled many hours with the Lightview integration and finally got it, so I'm trying to give you some hints :)
    First of all you should decide on which page you would like to have the effect. For myself the album page was the best choice. In this case you should modify the album.php of the default theme. Insert your Lightbox code AFTER the call of zenJavascript in line 5 (regarding to ZP 1.2.6 RC1 code).
    To prevent any mistakes with notation I worked with absolute pathes at first.
    Finally you should change line 43 "getImageLinkURL()" into "getFullImageURL()" as
    AlkaSeltxer mentioned in the intitial post.
    Good luck :)
  • slyt Member
    I choose lightBox due to Acrylian recommendation because of potential conflict between jQuery and Prototype. In my case edit image.php was conscious choice - I want lightbox effect after click on resized picture not thumbnail. I added above lines after the call of zenJavascript (I use ZP 1.2.6 RC1 :) ). Now I have to include in the file function calling lightBox plugin and maybe do some modifications of 'The image' section, but I have no idea what form. I did some tests studying lightBox example file but no success.
  • stef404 Member
    I can only guess, but finally you need a customised link to the full image, adding the `rel="lightbox"` attribute between href and title in line 50 of image.php.
    Sorry, but I have no chance to test or simulate your constellation.
  • slyt Member
    Almost done :). Thx stef404 for your advice.

    Changes in header image.php:
    `

    /js/jquery.js">

    /js/jquery.lightbox-0.5.js">

    /styles/jquery.lightbox-0.5.css" media="screen" />



    $(function() {

    $('a[@rel*=lightbox]').lightBox();

    });

    '

    `

    Change in "The Image" section:
    `

    " ... getBareImageTitle();?>" rel="lightbox">

    `

    Last problem is that no images "next" "prev" etc. are attached to displayed picture. I checked jquery.lightbox-0.5.js content and found:
    `

    // Configuration related to images

    imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon

    ...

    `

    Now I dont know why. Should I parse php variable ($_zp_themeroot) to javascript ?
  • stef404 Member
    There's no next image to show, unless you tell lightbox that you want to display a set of images ;)
    You could try adding this one `rel="lightbox[<?php echo getAlbumTitle();?>]"`.
    But I'm not sure if this will work.
    In my opinion next image does not make a sense when you call the function from a single image page.
  • slyt Member
    Something is still wrong. I've just applied lightBox to album.php and there is not images "next" "prev". Besides trick with rel doesnt work this time.
  • slyt Member
    For now I give up. It is not working as I expected. Anyway I'll try to fix it (I need to run an experimental enviroment on my NAS) in the spare time.
    If anyone wants to use modified files - it can downloaded from http://photos.troyniak.com/default.7z. Feel free to visit my photo gallery under http://photos.troyniak.com .

    Regards,
  • acrylian Administrator, Developer
    The only way to get next/prev is to use the lightbox script on album.php as an replacement of the bigger image on the image.php page to show the full size image directly.

    EDIT: Forgot you already tried that...
  • slyt Member
    Previously I didnt enunciate. Except lack of "next" and "prev" images there is no rest of required images like "close" etc. It would suggest that path to images is wrong ...
  • slyt Member
    I changed image path in jquery.lightbox-0.5.js to http://my_site/path_to_images and images appeared BUT only in IE (!!), FF 3.5.1 doesnt show it at all.
Sign In or Register to comment.