Home› Plugins

jQuery lightbox used with Default theme

VeeUniT Member
in Plugins
Since I'm not really familiar with coding, I would like to know the exact procedure to integrate this http://leandrovieira.com/projects/jquery/lightbox/ with the "default" theme on zenphoto.

My plan would be to use lightbox as soon as you click the thumbnail...

Any help would be really appreciated... I really don't want to f*cked up my website...

P.S. this is for www.joallard.com

thanks :)

Comments

  • VeeUniT Member
    I've got the latest version (1.2.5) of Zenphoto btw.
  • benchfrooser Member
    Error 403 - Forbidden
    Strato-Webspace?

    Ah you mean http://joallard.com/zenphoto/

    You have to edit the /zenphoto/themes/default/album.php file. But you should have knowledge of HTML and PHP.
    The "How to use" on the lightbox page is selfexplane.
  • VeeUniT Member
    yeah sorry I've changed the location since then to merge the root of joallard.com with autoviewer instead.

    Some explanations on the lightbox page are a bit mixed up in my head...

    "So, include just these two javascript files in your header.

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

    This is okay.

    "Include the CSS file responsible to style the jQuery lightBox plugin.

    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />"

    Do I have to add this to the header section as well ? or replace this line

    <link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />

    with the one posted above ?

    and finally,

    "Part 2 - Activate"

    I'm really not sure about this one.

    Any help would be appreciated.

    and yeah my zen is now hosted @ www.joallard.com/zenphoto

    thanks!!
  • acrylian Administrator, Developer
    You can skip the line `` as Zenphoto features jQuery aas default libary anyway in all standard themes.

    Leave the line `" type="text/css" />` alone, that is for styling the theme... You need to add the line with the lightbox css additionally. Place the lightbox css file within the css folder of your theme and then use
    `/css/jquery.lightbox-0.4.css" media="screen" />`

    Of course you also have to address the image you wnat hte lightbox on. Follow the examples and read our theming tutorial, too.
  • VeeUniT Member
    thank you very much :)
  • VeeUniT Member
    okay now my header looks like :

    <head>
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo $_zp_themeroot; ?>/css/jquery.lightbox-0.4.css" media="screen" />
    <?php zenJavascript(); ?>
    <title><?php echo getBareGalleryTitle(); ?> | <?php echo getBareAlbumTitle();?></title>
    <link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
    <?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
    </head>

    I've also put the "jquery.lightbox-0.5.css" into the theme/Styles on my site.

    Now, what's the procedure to activate the lightbox only when clicking the thumbnails of my pictures ?
  • acrylian Administrator, Developer
    You should call the lightbox jquery js after `<?php zenJavascript(); ?>` because this will load the main jquery file.

    Regarding enabling you need to follow the instructions on the lightbox site. Please also do a forum search as all these lightbox work similar and we have already lots of threads about that.
  • VeeUniT Member
    Okay, done.

    I've searched over the forum to find out some slimbox and thickbox input, I'm a bit more advanced right now...

    Since I want the lightbox to be effective when clicking thumbnail, I modified the album.php file as this ->

    I replaced the

    <div class="image">
    <div class="imagethumb">" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></div>

    With

    <div class="image">
    <div class="imagethumb">" rel="jquery.lightbox-0.5[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></div>

    This is my present header:

    <head>
    <?php zenJavascript(); ?>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <title><?php echo getBareGalleryTitle(); ?> | <?php echo getBareAlbumTitle();?></title>
    <link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $_zp_themeroot; ?>/css/jquery.lightbox-0.5.css" media="screen" />
    <?php printRSSHeaderLink('Album',getAlbumTitle()); ?>
    </head>

    Now when clicking on the thumbnail, it opens the image in a new window, and that's it.

    Any input ?

    I'm a newbie when it comes to programing, I'm doing my best to understand how it's done..

    thanks for the help
  • acrylian Administrator, Developer
    You really should look at the examples on their site carefully. Under part 2 of the examples you see some jquery code to call the lightbox plugin.
  • VeeUniT Member
    I've checked the examples... I also check the source code on some pages that has thickbox and lightbox working... can't make it work.

    www.joallard.com/zenphoto if someone wants to check it out...
Sign In or Register to comment.