ปลั๊กอินตัวนี้ชื่อก็บอกชัดเจนอยู่แล้วว่าใช้สำหรับ ซูม ซึ่งสามารถใช้งานได้ทั้ง รูปภาพ ข้อความ และไฟล์แฟลช หลักการทำงานก็คือ ซ่อนส่วนที่เป็นรายละเอียดไว้ก่อน จนกว่าผู้ใช้คลิกตรงลิ้งก์ที่เตรียมไว้ มันก็จะแสดงเนื้อหาที่ซ่อนไว้ ด้วยเอนิเมชั่นซูม อย่างมีชั้นเชิง การซูมรูปภาพ ก็คือซ่อนภาพใหญ่ไว้ก่อน แสดงภาพเล็กให้คลิก พอคลิกภาพเล็ก ภาพใหญ่ก็ค่อยๆ วาบ ซูม เข้ามา หรือการซูมเท็ก ก็เป็นในลักษณะเดียวกัน เตรียมคำสั้นๆไว้ให้คลิก ซ่อนรายละเอียดไว้ก่อน (กรณีนี้เหมาะมาก กับหน้าเพจที่มีเนื้อที่จำกัด หรือ หน้าเพจที่อยากให้ดูใช้ง่าย ) อย่างเช่น ฟอร์มลงทะเบียนเป็นต้น เราเตรียม ? ไว้ให้ผู้ใช้คลิก หลังช่องป้อนข้อมูล พอเขาคลิก เราก็แสดงตัวอย่าง การป้อนข้อมูลที่ถูกต้องขึ้นมา (เช่น เบอร์โทรศัพท์ ต้องอยู่ในรูปแบบ 000-0000-000)

Download | Demo

 

วิธีการใช้งาน

1. include Jquery และ fancyzoom.js เข้ามาในส่วน <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>

 

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

<a class="fancy-zoom" href="#image1">ภาพที่1</a>
<a class="fancy-zoom" href="#image2">ภาพที่2</a>
<a class="fancy-zoom" href="#image3">ภาพที่3</a>
 
<div id="image1"><img src="images/moon_love-larg.jpg" /></div>
<div id="image2"><img src="images/plugs_and_coke-larg.jpg" /></div>
<div id="image3"><img src="images/Unique_Wallpaper-larg.jpg" /></div>

 

href (#image1) ของแท็ก a ให้ใส่ # ตามด้วย id ของ div ที่เราจะให้แสดง เมื่อลิ้งก์ถูกคลิก

ใส่ class="fancy-zoom"

 

3.เขียนโค้ด javascript ในส่วน <head>

<script type="text/javascript">
$(document).ready(function(){
 
	$(".fancy-zoom").fancyZoom();
 
})
</script>

 

 

โค้ดทั้งหมด จะเป็นดังนี้

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

<html>
<head>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
	$(".fancy-zoom").fancyZoom();
 
})
</script>
 
<body>
 
    <a class="fancy-zoom" href="#image1">ภาพที่1</a>
    <a class="fancy-zoom" href="#image2">ภาพที่2</a>
    <a class="fancy-zoom" href="#image3">ภาพที่3</a>
 
    <div id="image1"><img src="images/moon_love-larg.jpg" /></div>
    <div id="image2"><img src="images/plugs_and_coke-larg.jpg" /></div>
    <div id="image3"><img src="images/Unique_Wallpaper-larg.jpg" /></div>
 
</body>
</html>

 

แหล่งความรู้เพิ่มเติม

  1. http://orderedlist.com/articles/fancyzoom-meet-jquery
class jQuery plugin
Avatar

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

Programmer, Blogger

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