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

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

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

Please rate this article: