Home » » Membuat Galeri Foto Melingkar Dengan Jquery

Membuat Galeri Foto Melingkar Dengan Jquery

Bagaimana cara membuat galeri foto melingkar, Nah disini kami akan menerapkan langsung dengan kode JQuery anda dapat copy paste kode yang ada dibawa nanti. Ketika saya menemukan plugin keren ini, baru saya berhenti sejenak dalam penelusuran Mbah Google.

Plugin ini benar-benar keren Anda dapat membuat lingkaran dari elemen html banyak yang Anda didefinisikan, yang berarti Anda tidak harus membuat formula untuk mengatur semua posisi elemen untuk membuat bentuk lingkaran.


Mari kita langsung Ke TKP :

Langkah 1
Anda Cukup Copy Paste Kode dibawah ini, Terserah anda mau ditaru dimana di postingan juga bisa di widget (HTML/JavaScript) juga bisa.


<!DOCTYPE html>
<html>
<head>
<title>JQuery Circle Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jQuery.radmenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

var posc = $("#radial_container").position();
var left = $(window).width() / 2;

if ($.browser.opera) {
$("#big").css({"left": left - 122, "top": posc.top - 13});
} else {
$("#big").css({"left": left - 122, "top": posc.top + 3});
}

jQuery("#radial_container").radmenu({
listClass: 'list',
itemClass: 'item',
radius: 220,
animSpeed:800,
centerX: 0,
centerY: 150,
selectEvent: "click",
onSelect: function($selected) {
var imgindex = $selected.index() + 1;
$(".my_class").removeClass("selected");
$(".img"+imgindex).addClass("selected");
$("#big").css("background-image", "url('images/"+imgindex+".jpg')");
},
angleOffset: 0
});

jQuery("#radial_container").radmenu("show");
});
</script>
<style>
body{
background: #f3f3f3;
}
#radial_container {
position:relative;
margin: 0 auto;
top: 80px;
height: 20px;
width: 20px;
}
.radial_div_item {
}
.radial_div_item.active {
z-index: 100;
}
.my_class {
cursor: pointer;
height: 75px;
width: 75px;
border: 5px solid #333;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
position: relative;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: "Arial";
}
.my_class:hover {
border-color: #0066cc;
}
.my_class:active {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 5px 1px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
top: 2px;
border-color: #e3e3e3;
}
.img1 { background-image: url("images/thumbs/1.jpg"); }
.img2 { background-image: url("images/thumbs/2.jpg"); }
.img3 { background-image: url("images/thumbs/3.jpg"); }
.img4 { background-image: url("images/thumbs/4.jpg"); }
.img5 { background-image: url("images/thumbs/5.jpg"); }
.img6 { background-image: url("images/thumbs/6.jpg"); }
.img7 { background-image: url("images/thumbs/7.jpg"); }
.img8 { background-image: url("images/thumbs/8.jpg"); }
.img9 { background-image: url("images/thumbs/9.jpg"); }
.img10 { background-image: url("images/thumbs/10.jpg"); }
.selected {
border-color: #0066cc;
}

#big {
position: relative;
border: 5px solid #0066cc;
width: 300px;
height: 300px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

</style>
</head>
<body>
<div id="radial_container">
<ul class="list">
<li class="item"><div class="my_class img1"></div></li>
<li class="item"><div class="my_class img2"></div></li>
<li class="item"><div class="my_class img3"></div></li>
<li class="item"><div class="my_class img4"></div></li>
<li class="item"><div class="my_class img5"></div></li>
<li class="item"><div class="my_class img6"></div></li>
<li class="item"><div class="my_class img7"></div></li>
<li class="item"><div class="my_class img8"></div></li>
<li class="item"><div class="my_class img9"></div></li>
<li class="item"><div class="my_class img10"></div></li>
</ul>
</div>

<div id="big"></div>

</body>
</html>


Langkah 2
Cukup sampai disini dulu Tip and Triknya, Dah capek muter-muter di Mbah Google.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 4 komentar

30 Oktober 2011 20.59

Mantap nih tutorialnya
coba aq praktekin dech
salam kenal Sobat
Thanks Info Kreatif nya

Terimakasih (Aku Bukan) Bang Thoyib atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquery
31 Oktober 2011 12.53

efek jquery emang keren yaaCh .... :)

Terimakasih Error Shinobi atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquery
1 November 2011 17.16

tutorial yang sangat menarik untuk gallery foto :) terimakasih sudah berbagi kawan

Terimakasih BlogS of Hariyanto atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquery
16 Mei 2012 18.49

6 BULAN AKU KELILING DI MBH GOOGLE....
AKHIRNYA AKU DAPATKAN JUGA APA YANG AKU CARI
DAN DISINI http://lora-malunk.blogspot.com
-----------------------------------------------
TERIMA KASIH SHOBAT,,,,,,

Terimakasih Suprayitno atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquery

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger