Galeri Untuk di website menggunakan Fancy box
Ass.wr,wb
Update lagi ni Belajar di Perantauan 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">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</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 :
PROGRAM INVENTARIS SEKOLAH (CONTOH) WITH PHP MYSQLI
PROGRAM WEB PROFIL SEKOLAH (CONTOH)
PEMAHAMAN FUNCTION PADA PHP MSQLI
0 Response to "Galeri Untuk di website menggunakan Fancy box"
Post a Comment