Jendela popup dengan jQuery

Selain menggunakan animasi back to top pada program prakerin, saya juga menggunakan fancy box untuk featurenya.

Untuk library-nya bisa langsung anda unduh di target=”_blank”>fancybox.net ini cara menggunakannya :

  • Masukan alamat librarynya

<link rel=”stylesheet” type=”text/css” href=”jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css” media=”screen” />
<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript” src=”jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.js”></script>
<script type=”text/javascript” src=”jquery.fancybox-1.3.1/fancybox/jquery.mousewheel-3.0.2.pack.js”></script>

  • Masukan skrip fungsinya

<script type=”text/javascript”>
$(document).ready(function(){
$(“a[rel=img]“).fancybox({
‘transitionIn’        : ‘none’,
‘transitionOut’        : ‘none’,
‘titlePosition’     : ‘over’,
‘titleFormat’        : function(title, currentArray, currentIndex, currentOpts) {
return ‘Rekap ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ”) + ‘‘;
}
});
});
</script>

  • Untuk text yang berwarna merah anda sesuaikan dengan rel’a..

<a href=”24752_1241569567109_1465434397_30515094_8228283_n.jpg” rel=”img” />

Kalo da kekurangan tolong di komen yaaaa😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s