cloud_zoom
Tints
Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in red at 50%.
In this example, the movement smoothness is set to a higher value for a gentle drifting effect.
proprietà della pagina
<link href="files/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="files/jquery.min.js"></script>
<script type="text/JavaScript" src="files/cloud-zoom.1.0.2.js"></script>
css
/* Feature section in ZoomEngine page */
.zoom-desc h3 {
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#333;
letter-spacing:1px;
margin-top:10px;
margin-bottom:10px;
}
.zoom-section {
clear:both;
}
.zoom-desc p {
margin-bottom:10px;
margin-top:10px;
line-height:140%;
font-size:13px;
}
.zoom-desc {
float:left;
margin-left:10px;
width:310px;
margin-bottom:20px;
}
.zoom-small-image {
border:4px solid #CCC;
float:left;
margin-bottom:20px;
}
.zoom-tiny-image {
border:1px solid #CCC;
margin:0px;
}
.zoom-tiny-image:hover {
border:1px solid #C00;
}
HTML
<div class="zoom-section">
<div class="zoom-small-image">
<div style="top: 0px; z-index: 9999; position: relative;" id="wrap">
<a rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10" class="cloud-zoom" href="files/bigimage03.jpg" style="position: relative; display: block;">
<img alt="" title="Optional Title Text" src="files/smallimage-3.jpg" style="display: block; border: 0;" /></a>
<div style="position: absolute; left: 0px; top: 0px; width: 240px; height: 320px; background-color: rgb(255, 0, 0); opacity: 0.5; display: none;">
</div>
<div style="background-image: url("."); z-index: 999; position: absolute; width: 240px; height: 320px; left: 0px; top: 0px; cursor: move;" class="mousetrap">
</div>
</div>
</div>
<div class="zoom-desc">
<h3>Tints</h3>
<p>Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in red at 50%.</p>
<p>In this example, the movement smoothness is set to a higher value for a gentle drifting effect.</p> </div>
</div>