หน้าตา galleria

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

พูดมากก็เปลืองน้ำในปากมาก มาดู

Live Demo

หลังจากดู Live Demo แล้วก็เป็นธรรมเนียม ที่จะต้องบอกกล่าวกันว่า ถ้าถูกใจก็เดินตามหลังมาครับ ผมจะอธิบายวิธีใช้ให้

1. ดาวน์โหลดไฟล์ที่จำเป็น ก่อน แล้วแตกซิป ออก

2. เริ่มเขียนโค้ด include js เข้ามา

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>

3. include css เข้ามา

<link href="css/galleria.css" rel="stylesheet" type="text/css" >

4. โครงสร้าง html

<ul class="gallery">
  <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" ></li>
  <li class="active"><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" ></li>
  <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_x2ZnymlI/AAAAAAAACh0/VJrVGghd9HY/s800/WALLPAPER_1222.jpg" ></li>
</ul>

ใช้แท็ก ul class gallery แล้วก็เก็บภาพแต่ละภาพไว้ในแท็ก li ถ้าท่านต้องการจะให้มีคำอธิบายรายละเอียดภาพด้วยก็ให้ใส่ไว้ใน attribute title ของรูปภาพ

<img title="น่ารักจังเลย" src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_x2ZnymlI/AAAAAAAACh0/VJrVGghd9HY/s800/WALLPAPER_1222.jpg" >

และถ้าต้องการให้ภาพไหนเป็นภาพ default (แสดงก่อนคนอื่นเมื่อรันโค้ด) ให้ใส่ class=”active” ไว้ในแท็ก li ที่เก็บภาพ

5. โค้ด jquery ปั้น โครงสร้าง html เมื่อกี้ให้เป็นแกลเลอรี่อันสวยงาม

<script type="text/javascript"> 
	jQuery(function($) {
 
		$('ul.gallery').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
 
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
 
				// fetch the thumbnail container
				var _li = thumb.parents('li');
 
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
 
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
 
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
 
				// fetch the thumbnail container
				var _li = thumb.parents('li');
 
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
 
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
 
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
</script>

ผมจะไม่อธิบายว่า แต่ละคำสั่งหมายความว่าไง แต่จะบอกว่าเวลาใช้งานจริงไม่ต้องสนใจมันมากครับ ก้อปแล้วก็วางโลด ผมเองเวลาจะใช้ผมก็ก้อปครับ ไม่ได้ใช้มันบ่อยนัก ( อันที่จริงหลักการก้อปแล้ววางนี่คล้ายๆหลักการ OOP เชียวนะ ที่บอกว่าไม่ต้องสนใจว่าข้างในเขียนยังไง แต่ให้สนใจว่ามันใช้งานยังไง เท่านั้น)

โค้ดทั้งหมด :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>
 
<link href="css/galleria.css" rel="stylesheet" type="text/css" >
 
<script type="text/javascript"> 
	jQuery(function($) {
 
		$('ul.gallery').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
 
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
 
				// fetch the thumbnail container
				var _li = thumb.parents('li');
 
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
 
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
 
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
 
				// fetch the thumbnail container
				var _li = thumb.parents('li');
 
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
 
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
 
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
</script>
<title>Galleria</title>
</head>
<body>
 
<ul class="gallery">
  <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" ></li>
  <li class="active"><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" ></li>
  <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_x2ZnymlI/AAAAAAAACh0/VJrVGghd9HY/s800/WALLPAPER_1222.jpg" ></li>
</ul>
 
</body>
</html>

ข้อมูลเพิ่มเติม : http://devkick.com/lab/galleria/

class gallery image insert jQuery slide
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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