Member
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:
<a rel="lightbox">" 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</a>
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:
<a rel="lightbox">" 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</a>
Administrator
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.
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.
Member
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?
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?
Administrator
Member
Administrator
Member
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"><a>" title="<?php echo gettext("Previous Image"); ?>">« <?php echo gettext("prev"); ?></a>
<?php } if (hasNextImage()) { ?>
<a>" title="<?php echo gettext("Next Image"); ?>"><?php echo gettext("next"); ?> »</a></div>
<?php } ?>
</div>
</div>
<div id="content">
<div id="breadcrumb">
<h2><a>" title="<?php gettext('Index'); ?>"><?php echo gettext("Index"); ?></a> » <?php echo gettext("Gallery"); ?><?php printParentBreadcrumb(" » "," » "," » "); printAlbumBreadcrumb(" ", " » "); ?>
[b]<?php printImageTitle(true); ?>[/b] (<?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)) {
?>
<a>"<?php echo $boxclass; ?> title="<?php echo getBareImageTitle();?>">
<?php
}
printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
<?php
if (!empty($tburl)) {
?>
</a>
<?php
}
?>
</div>
<div id="narrow">
<div id="imagedesc"><?php printImageDesc(true); ?></div>
<?php printTags('links', gettext('[b]Tags:[/b]').' ', '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\"><a>".gettext("Image Info")."</a></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]
[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"><a>" title="<?php echo gettext("Previous Image"); ?>">« <?php echo gettext("prev"); ?></a>
<?php } if (hasNextImage()) { ?>
<a>" title="<?php echo gettext("Next Image"); ?>"><?php echo gettext("next"); ?> »</a></div>
<?php } ?>
</div>
</div>
<div id="content">
<div id="breadcrumb">
<h2><a>" title="<?php gettext('Index'); ?>"><?php echo gettext("Index"); ?></a> » <?php echo gettext("Gallery"); ?><?php printParentBreadcrumb(" » "," » "," » "); printAlbumBreadcrumb(" ", " » "); ?>
[b]<?php printImageTitle(true); ?>[/b] (<?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)) {
?>
<a>"<?php echo $boxclass; ?> title="<?php echo getBareImageTitle();?>">
<?php
}
printCustomSizedImageMaxSpace(getBareImageTitle(),580,580); ?>
<?php
if (!empty($tburl)) {
?>
</a>
<?php
}
?>
</div>
<div id="narrow">
<div id="imagedesc"><?php printImageDesc(true); ?></div>
<?php printTags('links', gettext('[b]Tags:[/b]').' ', '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\"><a>".gettext("Image Info")."</a></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]