Usage of colorbox plugin with default theme

muelli

Hello,

I'm pretty new with zenphoto and have problems with the colorbox plugin. I've activated it and selcted it for "album" and "image" on the settings page of the plugin, but it has no effect. Only the exif-info is shown in a colorbox window.
I have uploaded my images with a resolution of 1024 x 764 and would like to show the original images with colorbox, maybe the "595"-images too.

Thanks and best regards,
Christoph

acrylian

The default theme has no built in support for full image display via Color box. I cite the plugin comment:

Loads Colorbox JS and CSS scripts for selected theme page scripts. Note that this plugin does not attach Colorbox to any element. You need to do this on your theme yourself. Visit the Colorbox website about that.

So you have to modify your theme to add that js configuration.

muelli

Thank you for your answer! I've read the passage but thought the plugin-configuration was meant. I know a little bit of how to modify css, but have no idea where to insert which code. So I'll read a little bit an try to figure it out. Also it would be great If you have any ideas or suggestions. I need a first step or inpulse and think that I'll learn the rest ;-)!

Best regards and thanks for that great piece of software,#
Christoph

acrylian

Just look at the theme's image.php (there is already a call for the exif stuff) and the Colorbox website that also has some examples. All info is there. The colorbox can be configured in many ways so we choose not to add any predefined JS setup for it with the plugin.

Also I recommended to read our theming tutorial.

muelli

Hallo again,

I think I've got it so far. I looked at some other themes and read a bit. It would be nice if you'd have a look at my result. I functions like intended, but I don't know if i have messed up something important.
In the header i included following lines:

//<![CDATA[
$(document).ready(function(){
$("a[rel='zoom']").colorbox();
});
//]]>

The "image"-section looks like this:

<div id="image">

<?php
$fullimage = getFullImageURL();
if (!empty($fullimage)) {
?>
" title="<?php echo getBareImageTitle();?>"><?php printDefaultSizedImage(getImageTitle()); ?>
<?php
}
?>

<?php
if (function_exists('printUserSizeImage') && isImagePhoto()) printUserSizeSelector(); ?>
</div>

Best regards,
Christoph

Laurent

If your image code is in a `

`

you have to put something like that in your header

`
//
`