CSS: <style type="text/css">
.section {min-width:100%;max-width:100%;
_width:100%;}
.cloudzoom-lens-thick {border:5px solid #eee;width:125px;height:125px;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-moz-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-webkit-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);cursor:crosshair;}
.cloudzoom-zoom-thick {border:7px solid #fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);}
.cloudzoom-zoom-inside {cursor:pointer;}
.image-wrap {border:1px solid #eee;display:inline-block;line-height:0;margin-top:20px;margin-bottom:10px;}
#fullsize img {border:1px solid #eee;}
.left-half {
width:50%;
float:left;
padding:0;
display:inline-block;
}
.left-in {
margin-left:5px;
margin-right:5px;
}
.right-in {
margin-right:5px;
margin-left:5px;
}
.right-half {
width:50%;
float:right;
padding:0;
display:inline-block;
}
.middle-in {
margin-left:5px;
margin-right:5px;
}
a.starzoom-gallery img {
border:1px solid #ccc;
margin-right:5px;
width:70px;
}
a.starzoom-gallery img:hover {
border:1px solid #f60;
}
.starzoom {
cursor:pointer;
cursor:-moz-zoom-in;
cursor:-webkit-zoom-in;
background-image:url('http://www.starplugins.com/sites/starplugins/images/viewport-bg.png');
}
#ipadzoom.starzoom {
background:none;
}
fieldset {
border:1px solid #ccc;
border-radius: 5px;
margin-bottom:20px;
}
#addthis-wrap {
position:absolute;
top:-41px;
right:190px;
width:140px;
height:32px;
padding:3px;
}
.highlight {
border-radius:5px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
background-color:#f60;
color:#fff;
padding:15px 15px 15px 15px;
font-size:16px;
}
/*************** TABS ******************/
/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:1px solid #666;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
}
/* link inside the tab. uses a background image */
ul.tabs a {
background: url(http://www.starplugins.com/sites/starplugins/images/tabs.png) no-repeat -420px 0;
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
background-position: -420px -31px;
color:#fff;
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor:default !important;
color:#000 !important;
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }
/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }
/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }
/* initially all panes are hidden */
.panes .pane {
display:none;
}
</style>
<link href="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<link href="http://www.starplugins.com/sites/starplugins/js/starzoom.css" type="text/css" rel="stylesheet" />
<link href="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.css" type="text/css" rel="stylesheet" />
<link href="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.css?v=1" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.css??v=1" type="text/css" media="screen" />
SCRIPT: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) -->
<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/starzoom.js?v=1"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.js?v=3"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.js?v=20"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.js"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.js?v=1"></script>
<script type="text/javascript">
$(function(){
$('#zoom1').bind('click',function(){
var jetZoom = $(this).data('JetZoom');
$.fancybox.open(jetZoom.getGalleryList());
return false;
})
})
</script>
<script type="text/javascript">
$(function(){
$('pre').addClass('prettyprint'); // Add pretty print to pre elements.
prettyPrint();
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
StarZoom.quickStart();
JetZoom.quickStart();
CloudZoom.quickStart();
</script>
HTML:<br />
<div class="left-half">
<div class="left-in">
<div style="text-align: center;">
<div style="border: 1px solid #ccc; display: inline-block; line-height: 0;">
<span class="cloudzoom-caption" id="cap1">.</span>
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg",
"zoomMatchSize":true,
"tintColor":"#000",
"tintOpacity":0.25,
"captionPosition":"bottom"
}" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" />
<br />
<div class="cloudzoom-caption">
<br /></div>
</div>
<div style="margin-top: 10px;">
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg">
<img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
"useZoom":"#zoom1",
"image":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg",
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg"}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" width="64" />
</a>
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg">
<img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
"useZoom":"#zoom1",
"image":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg",
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg"}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" title="Works great with iPad and other touch-enabled devices" width="64" />
</a>
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg">
<img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
"useZoom":"#zoom1",
"image":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg"
}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" title="Regular free updates and new features with technical support" width="64" />
</a>
</div>
</div>
</div>
</div>
<br />
<div class="left-in">
<h2>
Gallery Elements</h2>
<br />
<div style="text-align: right;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
zoomImage: 'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',
zoomPosition: 12,
zoomSizeMode: 'image',
zoomOffsetX: -15" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />
</div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Lens and Zoom CSS</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg",
"lensClass":"cloudzoom-lens-thick",
"zoomClass":"cloudzoom-zoom-thick"
}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Single Image Mode</h2>
<br />
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="zoomPosition:12, zoomOffsetX:0, uriEscapeMethod:'encodeURI'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg" width="300" />
</div>
</div>
</div>
</div>
=========
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Tints</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg",
"tintColor":"#f90"
}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Inner Zoom</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg",
"zoomPosition":"inside"
}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Captions</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg",
"captionSource":"#caption1",
"captionType":"html"
}" id="zoom2" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
</div>
<div class="cloudzoom-caption" id="caption1">
This is an <span style="color: #ffcc00; font-weight: bold;">HTML</span> type caption. You can include <i>any</i> type of content in here!</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Position</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg",
"zoomPosition":"#zoom2",
"captionPosition":"bottom"
}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" title="This position was defined by a selector." />
</div>
</div>
</div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Modal Pop-up Window (e.g. Fancy Box)</h2>
<br />
<div class="right-in">
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image9.jpg",
"zoomPosition":"inside"
}" id="myFancyCloudZoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg" title="The image title will also be passed to Fancy Box" />
</div>
</div>
</div>
</div>
</div>
</div>
=========
<br />
<div class="section" style="width: 100%;">
<!-- div class="left-half" -->
<br />
<div class="middle-in">
<h2>
Cloud Zoom in Tabbed Content</h2>
<br />
<div class="panes">
<div style="width: 100%;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',zoomSizeMode: 'image'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />
</div>
</div>
<div>
<br />
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" width="150" />
</div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" width="150" />
</div>
</div>
<div>
<div style="width: 100%;">
<br /></div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg',
zoomPosition: 'inside', zoomFlyOut:false" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
</div>
</div>
</div>
</div>
</div>
<br />
<div class="section" id="fullsize">
<div class="left-half">
<div class="left-in">
<h2>
Full Size Zoom</h2>
<br />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image1.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image2.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image3.jpg" />
<br />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image4.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image5.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image5.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image6.jpg" />
<br />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image7.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image8.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image8.jpg" />
<img class="cloudzoom" data-cloudzoom="{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg", "zoomFullSize":true, "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image9.jpg" />
</div>
</div>
</div>
