เจ๋ง..อ๊ะ..ทำแกลลอรี่แบบรวมเป็นอัลบัมๆ ด้วยปลั๊กอิน jQuery


ต่อเนื่องกับเรื่องของ jQuery กับการใช้ปลั๊กอิน jQuery ที่น่าสนใจครับวันนี้มาในแนวรูปแบบของแกลลอลี่ในการแสดงภาพอีกแบบครับโดยเราอาจจะเคยเห็นการสร้างแกลลอรี่หรือการแสดงผลรูปภาพแบบต่างๆมาหลายแบบกันบ้่างแล้วและรูปแบบของปลั๊กอิน jQuery วันนี้เป็นการสร้างกลุ่มหรืออัลบัมให้เป็นหมวดหมู่ก็ได้และเมื่อเราคลิกที่อัลบัมนั้นก็จะแสดงภาพต่างๆในส่วนที่เหลือที่อยู่ในหมวดหมู่ออกมาเรามาลองดูตัวอย่างและรุปแบบการทำงานกันดีกว่าครับรับลองว่าเด็ดแน่นอน



เรามาดูโค้ดสำหรับการใส่ข้อมูลและรูปภาพเข้าไปกันดูครับ

1
2
3
4
5
6
7
8
9
10
11
12
<ul class="tp-grid">
</ul><ul class="tp-grid">
<li data-pile="Group 1"><a href="#">
<span class="tp-info">
<span>Some title</span>
</span>
<img src="images/1.jpg" alt="" />
</a></li>
    <li data-pile="Group 2"><!-- .แบ่งอัลบัม.. --></li>
 <li data-pile="Group 1,Group 2"><!-- ... --></li>
</ul>
<!-- ..แบ่งอัลบัม.. -->


attribute id tp-grid เป็นการเรียกใช้ปลั๊กอินและสามารถใส่อัลบัมได้อีกเพียบ

1
$( '#tp-grid' ).stapel();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$.Stapel.defaults = {
/ / ช่องว่างระหว่างอัลบัมและภาพย่อยๆ
gutter : 40,
pileAngles : 2,
// ตั้งค่าการเคลื่อนไหวเมื่อคลิก
pileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 400,
closeEasing : 'ease-in-out'
},
/ / ตั้งค่าการเคลื่อนไหวสำหรับอัลบัม
otherPileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 350,
closeEasing : 'ease-in-out'
},
/ / ความสมูลสำหรับเวลาเราคลิกให้ภาพมารวมอัลบัมกัน
delay : 0,
//หมุน สุ่ม หรือ รายการเดียว
// random rotation for single items
randomAngle : false,
onLoad : function() { return false; },
onBeforeOpen : function( pileName ) { return false; },
onAfterOpen : function( pileName, totalItems ) { return false; },
onBeforeClose : function( pileName ) { return false; },
onAfterClose : function( pileName, totalItems ) { return false; }
};

ดาวน์โหลดโค้ด…..!!!

ขอบคุณข้อมูลจาก http://tympanus.net

Comments

comments

Powered by Facebook Comments