Kali ini kita akan belajar membuat "JETZOOM IMAGE dengan Fancybox jQuery Plugin" baiklah dan dibawah ini adalah contoh dari tutorial yang sedang kita bahas sekarang.!
DEMO JETZOOM IMAGES (and please click to view features fancybox).
Gimana,, tertarik untuk memasangnya?? jika begitu disini saya sudah memberikan kode yang akan kita butuhkan untuk memasangnya..
CSS ::
/*
Jet Zoom CSS. (c)2013 Star Plugins.
This CSS can be altered to change the look and size of the lens.
*/
.jetzoom-lens {border:1px solid #fff;width:50%;height:50%;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;box-shadow:-0px -0px 10px rgba(0,0,0,0.30);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.30);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.30);cursor:crosshair;}
#myFancyJetZoom{width:500px;height:350px;}
.image-wrap {border:1px solid #eee; display:inline-block;line-height:0;margin-top:10px;margin-bottom:10px;}
Ket::
- Angkat 500 adalah lebar gambar, sedangkan angka 350 itu tinggi gambar, jadi silahkan dirubah sesuai ukuran gambar anda.
SCRIPT ::
<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/jetzoom/jetzoom.js?v=3"></script>
<script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.js?v=1"></script>
<link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.css??v=1" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
$('#myFancyJetZoom').bind('click',function(){
var jetZoom = $(this).data('JetZoom');
$.fancybox.open(jetZoom.getGalleryList());
return false;
});});
</script>
HTML::
<div style="text-align:center">
<div class="image-wrap">
<img class="jetzoom" id ="myFancyJetZoom" src="small-image.jpg"
title="The image title will also be passed to Fancy Box"
data-jetzoom='{"zoomImage":"Large-image.jpg","zoomPosition":"inside","tintOpacity":"0.40","tintColor":"#00EDDD"}'alt="Elisha Cuthbert"/>
</div>
</div>
<script type="text/javascript">
JetZoom.quickStart();
</script>
Ket::
- Silahkan anda ganti teks yang berwarna merah dengan alamat url gambar yang ingin dipasang!
- Sedangkan teks yang berwarna biru, adalah warna gambar saat hover, silahkan diganti.
Selamat mencoba, dan semoga tutorial ini bermanfaat bagi kita semua :D
Posting Komentar