Postingan gaya lagi mengenai jQuery plug-in yaitu jQuery Panel Gallery Plugin 2.0 \m/ Kita dapat menerapkan efek khusus pada gambar apapun, membuat sebuah array efek, dari membiarkan memilih plugin efek. Hal ini, dikombinasikan dengan plugin pilihan memberi kita jumlah yang tidak terbatas kombinasi yg akan digunakan. Versi 2.0 masih memiliki kemampuan untuk menghentikan sementara transisi hanya dengan menempatkan mouse diatas gambar. Memiliki 59 efek array yg dapat dipilih sesuai kemauan kita b-) Mau efek fade, boxSouthEast, boxRandom, panelZipperDown,true, panelZipperRight,true, panelTeethDown,true, panelTeethRightReveal, etc.
Happy jQuery plug-in :D<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="pg.min.js"></script>
<script type="text/javascript">
$(function(){
$('#YOUR-ID').panelGallery({
viewDuration: 2500,
transitionDuration: 500,
boxSize: 40,
boxFadeDuration: 500,
boxTransitionDuration: 50
});
});
</script>
<b:skin><![CDATA[/*
#YOUR-ID {
margin: 0;
-moz-box-shadow: 0px 0px 10px #333;
-webkit-box-shadow: 0px 0px 10px #333;
box-shadow: 0px 0px 10px #333;
}
]]></b:skin>
</head>
<body>
<div id="YOUR-ID">
<img alt="" src="/jquery/demo/1/image1.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image2.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image3.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image4.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image5.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image6.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image7.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image8.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image9.jpg" width="760" height="200" />
<img alt="" src="/jquery/demo/1/image10.jpg" width="760" height="200" />
</div>
</body>
</html>
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...