Plug In Galeri Untuk di website menggunakan Fancy box

Ass.wr,wb

Update lagi ni Gudang-IT kali ini kita akan membuat sebuah program untuk ketika klik gambar di galeri gambar itu bisa zoom dan memperbesar menggunakan fancybox.

Dulu waktu saya pertama kali membuat program saya bingung juga teman-teman , bagaimana sich caranya supaya ketika orang mengklik gambar di galeri kita gambar tersebut memperperbesar, samapi suatu saat sayang terus mencari dan berusaha , dan akhirnya saya mentok saya tanya lah ke SUHU saya, oh iya suhu saya namanya Yandi Hajrudin , dia orang yang selalu oven ketika saya mentok belajar , dia yang kasih arahan , ciee curhat ane ni hehe .

Fokus lagi kita , ini interface awal nya :

ini scipt nya :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Galeri</title>
<link rel="stylesheet" href="master.css" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/icon.css">
<script type="text/javascript" src="assets/js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./fancy/jquery-1.4.3.min.js"></script>
<script>!window.jQuery && document.write('<script src="./fancy/jquery-1.4.3.min.js"><\/script>');</script>
<script type="text/javascript" src="./fancy/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancy/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancy/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/

$("a#example1").fancybox();

$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});

$("a#example5").fancybox();

$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});

$("a#example7").fancybox({
'titlePosition' : 'inside'
});

$("a#example8").fancybox({
'titlePosition' : 'over'
});

$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
}
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox();

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>

</head>
<body>

<div class="container">

<div class="col-md-12" style="margin-top:50px;">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>

<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<a rel="example_group" href="img/1.jpg" class="thumbnail siku">
<img src="img/1.jpg" width="100%" id="tinggi" alt="...">
</a>
<i>Ketua Pelaksana iPteK CLUB</i>
</div>

<div class="col-md-3">
<a rel="example_group" href="img/2.jpg" class="thumbnail siku">
<img src="img/2.jpg" width="100%" id="tinggi" alt="...">
</a>
<i>Ketua Pelaksana iPteK CLUB</i>
</div>

<div class="col-md-3">
<a rel="example_group" href="img/3.jpg" class="thumbnail siku">
<img src="img/3.jpg" width="100%" id="tinggi" alt="...">
</a>
<i>Ketua Pelaksana iPteK CLUB</i>
</div>

<div class="col-md-3">
<a rel="example_group" href="img/4.jpg" class="thumbnail siku">
<img src="img/4.jpg" width="100%" id="tinggi" alt="...">
</a>
<i>Ketua Pelaksana iPteK CLUB</i>
</div>

</div>
</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});
//]]>
</script>

</body>

</html>

untuk lebih lengkapnya teman-teman bisa download program saya ini di dalam nya sudah saya masukkan fancy :
Galeri Untuk di website menggunakan Fancy box || Zippy Share

Na bagaimana teman-teman udah ngerti blom ,semoga aja ngerti ya , ada mamfaat buat teman-teman.
Makasih udah mampir di blog ane gan .jangan lupa command + klik iklan ya hehe. demi menjalin hubungan yang baik eakkkkk ;)

baca juga ni :

Baca juga, Keterkaitan Mysql dan Sql
Baca Juga, PHP insert data into Mysqli
Baca Juga, Cara Mengatasi Error Pada PHP
Baca Juga, Kreasi mebuat tombol cantik
Baca Juga Tutorial CSS tenttang Padding dan Margin
Baca Juga, CSSS horthand !
Baca Juga, Cara membuat tampil, edit, update dan hapus pada pemograman php
Baca Juga, Memahami Perintah SQL
Baca Juga Tutorial Membuat nabvar sederhana menggunakan css
Baca Juga, Cara menggunakan Query Inner Join
Baca Juga, Cara membuat form login dengan PHP, Mudah !
Baca Juga, Tutorial Sederhana Menggunakan Cetak data di PHP
Baca Juga, Cara Mudah mengupload foto menggunakan PHP
Baca Juga, Pondasi Dasar PHP
Baca Juga, Teknik atau Aturan penulisan Script PHP
Baca Juga, Teknik download menggunakan PHP MySqli
Baca Juga, Teknik Upload FIle Menggunakan PHP
Baca Juga, Mempercantik Pagging dengan Style
Baca Juga, Galery menggunakan Fanci Box
Baca Juga, Pemahaman Function pada php Mysqli
Baca Juga, Pemahaman Array di PHP
Baca Juga, Logika Perulangan Looping menggukana PHP MySqli
Baca Juga, Tutorial Belajar CSS untuk Pemula