cloud_zoom


Vai ai contenuti

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(&quot;.&quot;); 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>


Torna ai contenuti | Torna al menu