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.
+ komentar + 4 komentar
Mantap nih tutorialnya
Terimakasih Unknown atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquerycoba aq praktekin dech
salam kenal Sobat
Thanks Info Kreatif nya
efek jquery emang keren yaaCh .... :)
Terimakasih Error Shinobi atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquerytutorial yang sangat menarik untuk gallery foto :) terimakasih sudah berbagi kawan
Terimakasih Hariyanto Wijoyo atas Komentarnya di Membuat Galeri Foto Melingkar Dengan Jquery6 BULAN AKU KELILING DI MBH GOOGLE....
Terimakasih Suprayitno atas Komentarnya di Membuat Galeri Foto Melingkar Dengan JqueryAKHIRNYA AKU DAPATKAN JUGA APA YANG AKU CARI
DAN DISINI http://lora-malunk.blogspot.com
-----------------------------------------------
TERIMA KASIH SHOBAT,,,,,,
Posting 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