Colorbox Not Loading Images Until Refresh

I am using an edited version of the default them with colorbox enabled in albums.

When a thumbnail is clicked on colorbox kicks in, but it doesn't load the image (in Chrome is shows text-script). When I hit refresh and try again the images shows up properly, but the next one won't.

I'm using this script to call colorbox in header.php:

<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/zp-extensions/colorbox/jquery.colorbox.js" type="text/javascript"></script>

<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/zp-extensions/colorbox/jquery.colorbox-min.js" type="text/javascript"></script>

<link rel="stylesheet" href="<?php echo $_zp_themeroot; ?>/colorbox/<?php echo $zpgal_cbstyle; ?>colorbox.css" type="text/css" media="screen"/>

An this script in album.php:

<script type="text/javascript">
// <!-- <![CDATA[
$(document).ready(function(){
$(".colorbox").colorbox({inline:true, href:"#imagemetadata"});
$("a[rel='gallery']").colorbox({transition:"fade"});});
// ]]> -->
</script>

Colorbox works fine when using different template, but not the one I'm working on. Any advise on how to fix this would be appreciated.

Comments

  • Probably the image cache for the image you are loading has not been generated. So the link will not "appear" to be a photo for colorbox and it must be told it is. You need to add `photo:true` to the colorbox parameters.

    As well (I am presuming you are using Zenphoto v1.4.1.6 or later, you did not say) the way you are loading colorbox might be a problem. Colorbox should be enabld as a plugin and its options should be set to enable it on the album script. The way you are doing it may well load it twice which could be the source of your problem.
  • I'm using Zenphoto v1.4.1.6.

    I have colorbox enabled on my album page from with ZenPhoto, so I've taken the scripts out of the header.php.

    Is this the correct place to put photo:true within the album.php page, as it still doesn't work:

    $(".colorbox").colorbox({inline:true, photo:true, href:"#imagemetadata"});

    Any advise most appreciated!
  • acrylian Administrator, Developer
    Please take a look at the standard themes to see how colorbox is setup.
  • I was seeing the same issue with my theme based on zenpage but realised I was putting the `photo:true` in the wrong part of the colorbox code. It needs to be in the `a.thickbox` section like this:

    `

    //

    `

    This will now correctly display a full image when it has not been cached.
  • acrylian Administrator, Developer
    Yes, the "thick box" was the script, which is now abandoned, we used before Colorbox so for backward compatibility we kept the class name.
Sign In or Register to comment.