Instruction Cloud Zoom Is A Popular Fly-Out jQuery

Pada kesempatan subuh ini saya akan mencoba memberikan instruction bagaiman menggunakan/Memasang "Cloud Zoom Is A Popular Fly-Out jQuery" ini di blog anda, karena pada postingan saya sebelumnya pernah membahasa Cloud Zoom Is A Popular Fly-Out jQuery ini, karena dipostingan saya itu, saya belum sempat memberikan instruction secara details menggunakan efect ini. :D

Maka dari itu dipostingan saya sekarang, saya akan memberiakan tutorial menggunakan efect sperti ini diblog agan, karena kita akan bahasa keseluruhan sehingga anda dapat memahaminya.okey :D

Langsung saja jika sobat tertarik mencobanya, berikut ini penjelasannya !
Jadi yang pertama anda lakukan dengan memasang CSS & SCRIPT berikut ditemplate sobat:

1. Letakkan CSS berikut diatas kode ]]></b:skin> .

.image-wrap {border:1px solid #eee;display:inline-block;line-height:0;margin-top:10px;margin-bottom:5px;}

2. Selanjutnya letakkan script berikut diatas kode </head> .

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.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">
$(function(){
$('#zoom1').bind('click',function(){
var cloudZoom = $(this).data('CloudZoom');
cloudZoom.closeZoom();
$.fancybox.open(cloudZoom.getGalleryList());
return false;
});});
</script>

<script type="text/javascript">
StarZoom.quickStart();
JetZoom.quickStart();
CloudZoom.quickStart();
</script>

3. Setelah langkah diatas selesai, silahkan sobat save template.

4. Selanjutnya sobat perhatikan satu persatu efect dibawah ini, karena disetiap demo dibawah, saya akan memberikan kode CSS & HTML dibawahnya, jadi sobat tinggal memilih sesuai keingin masing-masing.

1. Gallery Images

Cloud Zoom has many configuration options to match the look and feel of your website. Cloud Zoom small image

Cloud Zoom has many configuration options to match the look and feel of your website.

CSS::

/*
Cloud Zoom CSS. (c)2013 Star Plugins.
This CSS can be altered to change the look and size of the lens.
*/
.cloudzoom-lens {border-radius:1%;-moz-border-radius:1%;-webkit-border-radius:1%;border:1px solid #eee;width:100px;height:100px;box-shadow:-0px -0px 10px rgba(0,0,0,0.15);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.15);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.15);cursor:crosshair;}
/* CSS for zoom window (not used for 'inside' position). */
.cloudzoom-zoom {border:1px solid #eee;box-shadow:-0px -0px 10px rgba(0,0,0,0.15);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.15);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.15);}
/* CSS for captions */
.cloudzoom-caption {display:none;text-align:center;background-color:#111;color:#eee;font-weight:bold;padding:10px;font-family:arial,sans-serif;font-size:12px;}
/* A blank image */
.cloudzoom-blank {}
/* The animated ajax loading image */
.cloudzoom-ajax-loader {width:32px;height:32px;}
.cloudzoom-gallery{width:75px;height:85px;}

HTML::

<div style="text-align:center">
<div class="image-wrap">
<span id="cap1" class="cloudzoom-caption">Cloud Zoom has many configuration options to match the look and feel of your website.</span>
<img class="cloudzoom" alt ="Cloud Zoom small image" 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" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg",
"zoomMatchSize":true,
"tintColor":"#000",
"tintOpacity":0.20,
"captionPosition":"bottom"}'>
<div class="cloudzoom-caption" style="">Cloud Zoom has many configuration options to match the look and feel of your website.</div>
</div>
<div style="margin-top:10px">
<a href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg" class="thumb-link">
<img class="cloudzoom-gallery" 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" alt ="Jet Zoom thumb image" 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"}'></a>

<a href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg" class="thumb-link">
<img class="cloudzoom-gallery" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" alt ="Jet Zoom thumb image" title="Works great with iPad and other touch-enabled devices" 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"}'></a>

<a href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg" class="thumb-link">
<img class="cloudzoom-gallery" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" alt ="Jet Zoom thumb image" title="Regular free updates and new features with technical support" data-cloudzoom='{"useZoom":"#zoom1",
"image":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg"}'></a>
</div>

</div>

2. Captions

This is an HTML type caption. You can include any type of content in here!

HTML::

<div style="text-align:left">
<div class="image-wrap">
<img class="cloudzoom" id ="zoom2" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg",
"captionSource":"#caption1",
"captionType":"html"}' alt="Jet Zoom small image">
</div>
<div id="caption1" class="cloudzoom-caption">
This is an <span style="color:#009EC3;font-weight:bold">HTML</span> type caption. You can include <i>any</i> type of content in here!</div>
</div>

3. Lens and Zoom CSS

CSS::

/*
Cloud Zoom Lens-thick. (c)2013 Star Plugins.
This CSS can be altered to change the look and size of the lens.
*/
.cloudzoom-lens-thick {border:4px solid #eee;width:120px;height:120px;
border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;
box-shadow:-0px -0px 15px rgba(0,0,0,0.10);-moz-box-shadow:-0px -0px 15px rgba(0,0,0,0.10);-webkit-box-shadow:-0px -0px 15px rgba(0,0,0,0.10);cursor:crosshair;}
.cloudzoom-zoom-thick {border:4px solid #fff;border-radius:1%;-moz-border-radius:1%;-webkit-border-radius:1%;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;}

HTML::

<div style="text-align:left">
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg",
"lensClass":"cloudzoom-lens-thick",
"zoomClass":"cloudzoom-zoom-thick"
}' alt="Jet Zoom small image">
</div>
</div>

4. Gallery Elements

HTML ATAS ::

<div style="text-align:right">
<div class="image-wrap">
<img class="cloudzoom" id ="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" data-cloudzoom="
zoomImage: 'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg', zoomPosition: 12, zoomSizeMode: 'image', zoomOffsetX: -15" alt="Cloud Zoom small image">
</div>
</div>

HTML BAWAH ::

<div style="text-align:left">
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',zoomSizeMode: 'image'" alt="Cloud Zoom small image">
</div>
</div>

5. Tints

HTML::

<div style="text-align:left">
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg",
"tintColor":"#009ec3"}'
alt="Cloud Zoom small image">
</div>
</div>

6. Inner Zoom

HTML::

<div style="text-align:center">
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg", "zoomPosition":"inside"}' alt="Jet Zoom small image">
</div>
</div>

7. Modal Pop-up Window (e.g. Fancy Box)

HTML::

<div style="text-align:center">
<div class="image-wrap">
<img class="cloudzoom" 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" data-cloudzoom='{
"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image9.jpg", "zoomPosition":"inside"}' alt="Cloud Zoom small image">
</div>
</div>

8. Large Zoom Inside

HTML::

<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" width="150" data-cloudzoom="
zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg', zoomPosition:4" alt="Cloud Zoom small image">
</div>
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" width="150" data-cloudzoom=" zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg', zoomPosition:4" alt="Cloud Zoom small image">
</div>
<div class="image-wrap">
<img class="cloudzoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" width="150" data-cloudzoom=" zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg', zoomPosition:4" alt="Cloud Zoom small image">
</div>

9. Full Size Zoom

Cloud Zoom can be configured to display the entire zoom image. This is useful for a 'quick look' feature for multiple thumbnail images.

The zoom image will appear below this paragraph (using the zoomPosition) option.

CSS::

.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;}

HMTL ::

<div class="section" id="fullsize">
<div class="left-half">
<div class="left-in">
<p>Cloud Zoom can be configured to display the entire zoom image. This is useful for a 'quick look' feature for multiple thumbnail images.</p>
<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image1.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image2.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image3.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>
<br/>
<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image4.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image5.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image5.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image6.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>
<br/>
<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image7.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image8.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image8.jpg", "zoomSizeMode":"full", "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

<img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image9.jpg" class="cloudzoom" data-cloudzoom='{"zoomImage":"http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg", "zoomFullSize":true, "zoomPosition":"#fullsize-pos", "zoomFlyOut":false}'>

</div>
</div>

<div class="right-half">
<div class="right-in">
<p >The zoom image will appear below this paragraph (using the <code>zoomPosition)</code> option.</p>
<span id="fullsize-pos"></span>
</div>
</div>
</div>

Mungkin cukup sekian dari tutorial saya hari ini, silahkan rubah sendri kode HTML & CSS yang diperlukan saja. semoga bermanfaat yaaa... Wassalam :D