Member
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
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
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.
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.
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!!
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!!
Administrator
You can skip the line `<script type="text/javascript" src="js/jquery.js"></script>` as Zenphoto features jQuery aas default libary anyway in all standard themes.
Leave the line `<link rel="stylesheet" href="<?php echo $zenCSS ?>" 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
`<link rel="stylesheet" type="text/css" href="<?php echo $_zp_themeroot; ?>/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.
Leave the line `<link rel="stylesheet" href="<?php echo $zenCSS ?>" 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
`<link rel="stylesheet" type="text/css" href="<?php echo $_zp_themeroot; ?>/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.
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 ?
<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 ?
Administrator
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.
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.
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"><a>" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></a></div>
With
<div class="image">
<div class="imagethumb"><a>" rel="jquery.lightbox-0.5[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></a></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
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"><a>" title="<?php echo getBareImageTitle();?>"><?php printImageThumb(getAnnotatedImageTitle()); ?></a></div>
With
<div class="image">
<div class="imagethumb"><a>" rel="jquery.lightbox-0.5[<? echo getAlbumTitle();?>]" title="<? echo getImageTitle();?>"><?php printImageThumb(getImageTitle()); ?></a></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
Administrator