มาสร้างเมนูรูปภาพเจ๋งๆ Infinite jQuery Carousel – carouFredSel

คราวนี้เรามาสร้างเมนูรูปภาพสวยๆกันโดยเราจะใช้ javascript framework ที่ชืี่อ Jquery
โดยจะใช้ Plugin ที่ชื่อ jQuery.carouFredSel กันนะ

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

ตัวอย่าง JavaScript

01	$("#foo2").carouFredSel({

02	auto : false,

03

prev : {

04	button  : "#foo2_prev",

05	key     : "left"

06

},

07

next : {

08	button  : "#foo2_next",

09	key     : "right"

10

},

11	pagination  : "#foo2_pag"

12

});

อันนี้เป็น HTML

01	<div class="image_carousel">

02	<div id="foo2">

03	<img src="examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />

04	<img src="examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />

05	<img src="examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />

06	<img src="examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />

07	<img src="examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />

08	<img src="examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />

09	<img src="examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />

10	<img src="examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />

11	<img src="examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />

12	<img src="examples/images/small/paris.jpg" alt="paris" width="140" height="140" />

13	<img src="examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />

14	<img src="examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />

15

</div>

16	<div class="clearfix"></div>

17	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>

18	<a class="next" id="foo2_next" href="#"><span>next</span></a>

19	<div class="pagination" id="foo2_pag"></div>

20

</div>

ตัวอย่าง CSS

01	.image_carousel {

02	padding: 15px 0 15px 40px;

03	position: relative;

04

}

05	.image_carousel img {

06	border: 1px solid #ccc;

07	background-color: white;

08	padding: 9px;

09	margin: 7px;

10	display: block;

11	float: left;

12

}

13	a.prev, a.next {

14	background: url(../images/miscellaneous_sprite.png) 0 0 no-repeat transparent;

15	width: 45px;

16	height: 45px;

17	display: block;

18	position: absolute;

19	top: 85px;

20

}

21	a.prev {        left: -22px; }

22	a.prev:hover {  background-position: 0 -50px; }

23	a.next {        right: -22px;

24	background-position: -50px 0; }

25	a.next:hover {  background-position: -50px -50px; }

26	a.prev span, a.next span {

27	display: none;

28

}

29	.pagination {

30	text-align: center;

31

}

32	.pagination a {

33	background: url(../images/miscellaneous_sprite.png) 0 -100px no-repeat transparent;

34	width: 15px;

35	height: 15px;

36	margin: 0 5px 0 0;

37	display: inline-block;

38

}

39	.pagination a.selected {

40	background-position: -25px -100px;

41	cursor: default;

42

}

43	.pagination a span {

44	display: none;

45

}

46	.clearfix {

47	float: none;

48	clear: both;

49

}

ดูต่อได้ที่ 

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://caroufredsel.frebsite.nl/