CODEWITHSUNDEEP
jquerycolorbox
bikey77
bikey77

Reputation: 6672

Using javascript/jquery scripts inside a colorbox window

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>

Upvotes: 2

Views: 4238

Answers (2)

CSSian
CSSian

Reputation: 1661

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

Upvotes: 0

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14302

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.

Upvotes: 1

Related Questions