Using javascript/jquery scripts inside a colorbox window

Question

I'm using colorbox to preview products in a popup window but I'd also like to use Cloud Zoom inside the colorbox. For some reason that I cant figure out, cloudzoom fails to work when inside the colorbox, works fine when it's called in a regular browser window. I searched a bit before posting but there's not much on those two scripts together. PERHAPS, I need to use onComplete:function() after the call to colorbox but I'm not sure how to do that.

This is my code for the test page I've created where cloud zoom works fine on the page but not when loaded to colorbox. Here's a link with all the files (js, css) in case you want to try it out yourselves.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="./js/cloud-zoom.1.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a.items').colorbox({ width:"80%", height:"90%", href:function(){ return this.href + " #prodpreview"; }});
});
</script>
<link rel="stylesheet" type="text/css" href="./css/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="./css/colorbox.css" />
</head>
<body>

<a href="test.php" class="items">Test</a>

<div id="prodpreview" style="margin-top:20px;">
<a href="https://www.google.com/images/srpr/logo3w.png" class="cloud-zoom" id="zoom1" rel="position:'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position:relative; display:block;">
<img src="https://www.google.com/images/srpr/logo3w.png" width="150"/>
</a>
</div>
</body>
</html>

Kundan Singh Chouhan · Accepted Answer · 2012-06-28 16:32:46Z

1

Try this:

In the html replace the anchor tag with

<a href="#" class="items">Test</a>

and in script write the jquery colorbox code like this

$(document).ready(function() {
    $('a.items').colorbox({ 
         width:"80%", 
         height:"90%", 
         href:"#prodpreview",
         inline:true,
         onComplete:function(){
            $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
         }
    });
});

Hope this will fix your issue.

answered Jun 28, 2012 at 16:32

Kundan Singh Chouhan

14.4k4 gold badges30 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CSSian · Accepted Answer · 2012-06-29 15:42:22Z

0

An alternative approach would be to use ColorBox's iFrame option which essentially opens a new html environment in the ColorBox. Things should be fine in there.

Note this method would require you to work out how to get the appropriate image into the iframed content, sized, etc.

Something to think about.

Regards, KJM

answered Jun 29, 2012 at 15:42

CSSian

1,66113 silver badges19 bronze badges

1 Comment

bikey77 Over a year ago

Thanks for the idea but for several reasons, I can't use the iframe approach.

Collectives™ on Stack Overflow

Using javascript/jquery scripts inside a colorbox window

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related