Member
I've been trying to add an EXIF info section (similar to the lightbox-style EXIF window in the "Zenpage-default" theme) to the "cimi" theme. I've edited the image.php file, adding:
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
AND
<?php
if (getImageEXIFData()) { echo "<div id=\"exif_link\"><a>".gettext("Image Info")."</a></div>";
printImageMetadata('', false);
}
?>
However, the EXIF data shows up just fine, but it is never hidden, as in the zenpage-default theme. I know I'm doing something wrong, but I'm not sure what. Can anyone help me determine how to add this EXIF info link functionality to the "cimi" theme. Thanks!
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
AND
<?php
if (getImageEXIFData()) { echo "<div id=\"exif_link\"><a>".gettext("Image Info")."</a></div>";
printImageMetadata('', false);
}
?>
However, the EXIF data shows up just fine, but it is never hidden, as in the zenpage-default theme. I know I'm doing something wrong, but I'm not sure what. Can anyone help me determine how to add this EXIF info link functionality to the "cimi" theme. Thanks!
Member
Member
I believe you're missing the JavaScript for the toggle that is present in other themes. You can either look at an existing theme or take a look at the theming tutorial that has the code: http://www.zenphoto.org/2009/03/theming-tutorial/#image.php
Member
Thanks, guys, for pointing me in the right direction. I guess I exhausted all my brain cells in my Town Council meeting last night, because I still can't get this to work. The output seems almost identical to another theme I've tried that correctly shows the EXIF data hiding/unhiding. I'm fairly competent with PHP, but I'm still a marked amateur with javascript. I thought maybe the link to my css was invalid, but it seems to be parsing correctly. I feel really dumb, here! Here's what I'm working with:
`
<?php if (!defined('WEBPATH')) die(); ?>
<?php include ('theme-functions.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php printGalleryTitle(); ?> | <?=getAlbumTitle();?> | <?=getImageTitle();?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href="<?= $_zp_themeroot ?>/zen.css" type="text/css" />
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var ie = !opera && /msie [56789]/i.test(ua);
var moz = !opera && /mozilla\/[56789]/i.test(ua);
function toggle(obj) {document.getElementById(obj).style.display=(document.getElementById(obj).style.display!="block")? "block" : "none";}
<?php if (hasNextImage()) { ?>var nextURL="<?=getNextImageURL();?>";<?php } ?>
<?php if (hasPrevImage()) { ?>var prevURL="<?=getPrevImageURL();?>";<?php } ?>
function keyDown(e){
if (!ie) {var keyCode=e.which;}
if (ie) {var keyCode=event.keyCode;}
if(keyCode==39){<?php if (hasNextImage()) { ?>window.location=nextURL<?php } ?>};
if(keyCode==37){<?php if (hasPrevImage()) { ?>window.location=prevURL<?php } ?>};}
document.onkeydown = keyDown;
if (!ie)document.captureEvents(Event.KEYDOWN);
document.oncontextmenu=new Function("return false");
//document.onselectstart=new Function ("return false");
document.ondragstart=new Function ("return false") ;
function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++){
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function toggleComments() {
var commentDiv = document.getElementById("comments");
if (commentDiv.style.display == "block") {
commentDiv.style.display = "none";
} else {
commentDiv.style.display = "block";
}
}
-->
</script>
<?php printPreloadScript(); ?>
<?php zenJavascript(); ?>
</head>
<body>
<?php printAdminToolbox(); ?>
<div id="main">
<div id="gallerytitle">
<a>" title="Gallery Index"><?=getGalleryTitle();?></a>
<div class="left"><a title="Home">">home</a> > <a>"> <?php printAlbumTitle(false);?></a> > <?php printImageTitle(true); ?>use arrow keys to navigate
</div>
<?php if (hasNextImage()) { ?>
<a>" title="Next Image">Next Image</a>
<?php } else { ?>
<div class="block">Next Image
<?php } ?>
<?php if (hasPrevImage()) { ?>
<a>" title="Previous Image">Previous Image</a>
<?php } else { ?>
Previous Image
<?php } ?>
<a>" title="<?=getImageTitle();?>">full size</a>
</div>
<a>" title="<?=getImageTitle();?>"> <?php printDefaultSizedImageAlt(getImageTitle()); ?></a>
<?php if (getImageDesc() !='') { ?>
<div id="desc">
<?printImageDesc(true); ?>
<?}?>
<!-- exif -->
<?php
if (getImageEXIFData()) {
echo "<a>".gettext("Image Info")."</a>";
printImageMetadata('', false);
}
?>
<?php $num = getCommentCount(); echo ($num == 0) ? "[i]No Comments[/i]" : ("[i]Comments ($num)[/i]"); ?>, Add comment
<? if (isset($error)) { ?>
<div class="error">There was an error submitting your comment. Name, a valid e-mail address, and a comment are required.
<? } else { ?>
<? }?>
<!-- If comments are on for this image AND album... -->
<form id="commentform" action="#" method="post">
<div><input type="hidden" name="comment" value="1" />
<input type="hidden" name="remember" value="1" />
<label for="name">Name:</label><input type="text" id="name" name="name" size="20" value="<?=$stored[0];?>" />
<label for="email">E-Mail:</label><input type="text" id="email" name="email" size="20" value="<?=$stored[1];?>" />
<!-- <label for="website">Site:</label><input type="text" id="website" name="website" size="40" value="<?=$stored[2];?>" />
-->
<textarea name="comment" rows="6"></textarea>
<input type="submit" value="Add Comment" onmouseover="this.className = 'pushbuttonl'" onmouseout="this.className = 'pushbutton'" class="pushbutton" />
</form>
</div>
</div>
<?php while (next_comment()): ?>
<div class="comment">
<div class="commentmeta">
<?php printCommentAuthorEmail(); ?>
<?=getCommentDate();?>, <?=getCommentTime();?> <?php printEditCommentLink('Edit', ' | ', ''); ?>
<?=getCommentBody();?>
</div>
<?php endwhile; ?>
</div>
</div>
Powered by zenphoto | theme by cimi
</div>
</body>
</html>
`
I appreciate the help you've both given thus far. Hopefully you can tell me what I'm doing wrong? THANKS!!!
`
<?php if (!defined('WEBPATH')) die(); ?>
<?php include ('theme-functions.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php printGalleryTitle(); ?> | <?=getAlbumTitle();?> | <?=getImageTitle();?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href="<?= $_zp_themeroot ?>/zen.css" type="text/css" />
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var ie = !opera && /msie [56789]/i.test(ua);
var moz = !opera && /mozilla\/[56789]/i.test(ua);
function toggle(obj) {document.getElementById(obj).style.display=(document.getElementById(obj).style.display!="block")? "block" : "none";}
<?php if (hasNextImage()) { ?>var nextURL="<?=getNextImageURL();?>";<?php } ?>
<?php if (hasPrevImage()) { ?>var prevURL="<?=getPrevImageURL();?>";<?php } ?>
function keyDown(e){
if (!ie) {var keyCode=e.which;}
if (ie) {var keyCode=event.keyCode;}
if(keyCode==39){<?php if (hasNextImage()) { ?>window.location=nextURL<?php } ?>};
if(keyCode==37){<?php if (hasPrevImage()) { ?>window.location=prevURL<?php } ?>};}
document.onkeydown = keyDown;
if (!ie)document.captureEvents(Event.KEYDOWN);
document.oncontextmenu=new Function("return false");
//document.onselectstart=new Function ("return false");
document.ondragstart=new Function ("return false") ;
function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++){
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function toggleComments() {
var commentDiv = document.getElementById("comments");
if (commentDiv.style.display == "block") {
commentDiv.style.display = "none";
} else {
commentDiv.style.display = "block";
}
}
-->
</script>
<?php printPreloadScript(); ?>
<?php zenJavascript(); ?>
</head>
<body>
<?php printAdminToolbox(); ?>
<div id="main">
<div id="gallerytitle">
<a>" title="Gallery Index"><?=getGalleryTitle();?></a>
<div class="left"><a title="Home">">home</a> > <a>"> <?php printAlbumTitle(false);?></a> > <?php printImageTitle(true); ?>use arrow keys to navigate
</div>
<?php if (hasNextImage()) { ?>
<a>" title="Next Image">Next Image</a>
<?php } else { ?>
<div class="block">Next Image
<?php } ?>
<?php if (hasPrevImage()) { ?>
<a>" title="Previous Image">Previous Image</a>
<?php } else { ?>
Previous Image
<?php } ?>
<a>" title="<?=getImageTitle();?>">full size</a>
</div>
<a>" title="<?=getImageTitle();?>"> <?php printDefaultSizedImageAlt(getImageTitle()); ?></a>
<?php if (getImageDesc() !='') { ?>
<div id="desc">
<?printImageDesc(true); ?>
<?}?>
<!-- exif -->
<?php
if (getImageEXIFData()) {
echo "<a>".gettext("Image Info")."</a>";
printImageMetadata('', false);
}
?>
<?php $num = getCommentCount(); echo ($num == 0) ? "[i]No Comments[/i]" : ("[i]Comments ($num)[/i]"); ?>, Add comment
<? if (isset($error)) { ?>
<div class="error">There was an error submitting your comment. Name, a valid e-mail address, and a comment are required.
<? } else { ?>
<? }?>
<!-- If comments are on for this image AND album... -->
<form id="commentform" action="#" method="post">
<div><input type="hidden" name="comment" value="1" />
<input type="hidden" name="remember" value="1" />
<label for="name">Name:</label><input type="text" id="name" name="name" size="20" value="<?=$stored[0];?>" />
<label for="email">E-Mail:</label><input type="text" id="email" name="email" size="20" value="<?=$stored[1];?>" />
<!-- <label for="website">Site:</label><input type="text" id="website" name="website" size="40" value="<?=$stored[2];?>" />
-->
<textarea name="comment" rows="6"></textarea>
<input type="submit" value="Add Comment" onmouseover="this.className = 'pushbuttonl'" onmouseout="this.className = 'pushbutton'" class="pushbutton" />
</form>
</div>
</div>
<?php while (next_comment()): ?>
<div class="comment">
<div class="commentmeta">
<?php printCommentAuthorEmail(); ?>
<?=getCommentDate();?>, <?=getCommentTime();?> <?php printEditCommentLink('Edit', ' | ', ''); ?>
<?=getCommentBody();?>
</div>
<?php endwhile; ?>
</div>
</div>
Powered by zenphoto | theme by cimi
</div>
</body>
</html>
`
I appreciate the help you've both given thus far. Hopefully you can tell me what I'm doing wrong? THANKS!!!
Member
I'm confident the link itself is not the culprit, because the link is parsed identically in both my non-working and working versions:
`
<aa href="#TB_inline?height=345&width=400&inlineId=imagemetadata" title="Image Info">Image Info</a>
`
Note: I had to put "aa href" in the code above so you could see my full link code. I wasn't sure how to do it otherwise so this forum didn't parse it as an actual link...
`
<aa href="#TB_inline?height=345&width=400&inlineId=imagemetadata" title="Image Info">Image Info</a>
`
Note: I had to put "aa href" in the code above so you could see my full link code. I wasn't sure how to do it otherwise so this forum didn't parse it as an actual link...
Administrator
That link is a thickbox script link. You will have to add the scripts for that, too:
`
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
`
This is found on top of the default theme's image.php for example.
`
<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
`
This is found on top of the default theme's image.php for example.
Member
Thanks, but I already have those lines you suggested toward the top of the code above. I was just trying to narrow down the possibilities for where my error is. It's a little more difficult, as the "cimi" theme's code is in a slightly different order than the "default" theme's code, for which I was comparing it against.
Still searching as to why I can never display my EXIF data in the hidden state...
Still searching as to why I can never display my EXIF data in the hidden state...
Administrator
Member
Looks like it was a problem in my css file. Now, everything displays just fine hidden, but I can't get it to show the EXIF data when I press the link! At least I'm getting somewhere. I'm betting that the display problem now is in the css file as well. Thanks for trying to help. I love this software!
Member