วิธีสร้าง Draggable & Lightbox Image Garelly บน blogger

Draggable and Lightbox เป็น Image Garelly อีกชนิดหนึ่งที่สามารถใช้การ drag mouse ลากเปลี่ยนตำแหน่งของรูปได้อย่างอิสระ

สอนทำ blogger

และเมื่อคลิกที่รูปใด ๆ ใน garelly แล้วก็จะปรากฎ Pop up หรือ Light box ของภาพขนาดใหญ่ปรากฎขึ้นมาทันที ทำให้ garelly ของภาพในบล็อกของคุณมีความน่าสนใจมากขึ้น โดยการทำงานทั้งหมดนี้จะต้องอาศัยการทำงานของ jQuery เข้ามาช่วย

สอน blogger

เทคนิคนี้จึงเหมาะสำหรับ ท่านที่ทำบล็อกเกี่ยวกับการถ่ายภาพ ภาพศิลป์ สถานที่ท่องเที่ยว หรือต้องการสร้างไว้เพื่ออวดรูปสวย ๆ ของคุณเองก็ได้


ตัวอย่างของ jQuery Image Cube สามารถคลิกชมได้จาก Link ด้านล่าง



วิธีติดตั้ง

Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ

ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด  ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว



/* Draggable and Lightbox Image Garelly Edit by Hackublog */

#gallery{width:100%;height:580px;position:relative}    
.pic,.pic a{width:100px;height:100px;overflow:hidden}    
.pic{position:absolute;border:5px solid #EEEEEE;border-bottom:18px solid #eeeeee;-moz-box-shadow:2px 2px 3px #333333;-webkit-box-shadow:2px 2px 3px #333333;box-shadow:2px 2px 3px #333333}    
.pic a{text-indent:-999px;display:block}    
div#fancy_overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:30}    
div#fancy_loading{position:absolute;height:40px;width:40px;cursor:pointer;display:none;overflow:hidden;background:transparent;z-index:100}    
div#fancy_loading div{position:absolute;top:0;left:0;width:40px;height:480px;background:transparent url('http://upic.me/i/ly/fancy_progress.png') no-repeat}    
div#fancy_outer{position:absolute;top:0;left:0;z-index:90;padding:20px 20px 40px 20px;margin:0;background:transparent;display:none}    
div#fancy_inner{position:relative;width:100%;height:100%;background:#FFF}    
div#fancy_content{margin:0;z-index:100;position:absolute}    
div#fancy_div{background:#000;color:#FFF;height:100%;width:100%;z-index:100}    
img#fancy_img{position:absolute;top:0;left:0;border:0;padding:0;margin:0;z-index:100;width:100%;height:100%}    
div#fancy_close{position:absolute;top:-12px;right:-15px;height:30px;width:30px;background:url('http://upic.me/i/f9/fancy_closebox.png') top left no-repeat;cursor:pointer;z-index:181;display:none}    
#fancy_frame{position:relative;width:100%;height:100%;display:none}    
#fancy_ajax{width:100%;height:100%;overflow:auto}    
a#fancy_left,a#fancy_right{position:absolute;bottom:0px;height:100%;width:35%;cursor:pointer;z-index:111;display:none;background-image:url("data:image/gif;base64,AAAA");outline:none;overflow:hidden}    
a#fancy_left{left:0px}    
a#fancy_right{right:0px}    
span.fancy_ico{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;z-index:112;cursor:pointer;display:block}    
span#fancy_left_ico{left:-9999px;background:transparent url('http://upic.me/i/5d/fancy_left.png') no-repeat}    
span#fancy_right_ico{right:-9999px;background:transparent url('http://upic.me/i/t2/fancy_right.png') no-repeat}    
a#fancy_left:hover,a#fancy_right:hover{visibility:visible;background-color:transparent}    
a#fancy_left:hover span{left:20px}    
a#fancy_right:hover span{right:20px}    
#fancy_bigIframe{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}    
div#fancy_bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:70;border:0;padding:0;margin:0}    
div.fancy_bg{position:absolute;display:block;z-index:70;border:0;padding:0;margin:0}    
div#fancy_bg_n{top:-20px;left:0;width:100%;height:20px;background:transparent url('http://upic.me/i/3k/fancy_shadow_n.png') repeat-x}    
div#fancy_bg_ne{top:-20px;right:-20px;width:20px;height:20px;background:transparent url('http://upic.me/i/g3/fancy_shadow_ne.png') no-repeat}    
div#fancy_bg_e{right:-20px;height:100%;width:20px;background:transparent url('http://upic.me/i/gb/fancy_shadow_e.png') repeat-y}    
div#fancy_bg_se{bottom:-20px;right:-20px;width:20px;height:20px;background:transparent url('http://upic.me/i/au/fancy_shadow_se.png') no-repeat}    
div#fancy_bg_s{bottom:-20px;left:0;width:100%;height:20px;background:transparent url('http://upic.me/i/y1/fancy_shadow_s.png') repeat-x}    
div#fancy_bg_sw{bottom:-20px;left:-20px;width:20px;height:20px;background:transparent url('http://upic.me/i/gb/fancy_shadow_sw.png') no-repeat}    
div#fancy_bg_w{left:-20px;height:100%;width:20px;background:transparent url('http://upic.me/i/69/fancy_shadow_w.png') repeat-y}    
div#fancy_bg_nw{top:-20px;left:-20px;width:20px;height:20px;background:transparent url('http://upic.me/i/33/fancy_shadow_nw.png') no-repeat}    
div#fancy_title{position:absolute;z-index:100;display:none}    
div#fancy_title div{color:#FFF;font:bold 12px Arial;padding-bottom:3px;white-space:nowrap}    
div#fancy_title table{margin:0 auto}    
div#fancy_title table td{padding:0;vertical-align:middle}    
td#fancy_title_left{height:32px;width:15px;background:transparent url('http://upic.me/i/bq/fancy_title_left.png') repeat-x}    
td#fancy_title_main{height:32px;background:transparent url('http://upic.me/i/j9/fancy_title_main.png') repeat-x}    
td#fancy_title_right{height:32px;width:15px;background:transparent url('http://upic.me/i/fa/fancy_title_right.png') repeat-x}



ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>   
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js' type='text/javascript'/>    
<script src='http://siiam.bravehost.com/jquery.fancybox-1.2.6.pack.js' type='text/javascript'/>    
<script src='http://siiam.bravehost.com/script.js' type='text/javascript'/>


ขั้นที่ 3 ในขั้นนี้เป็นการวางตำแหน่งของ Garelly ด้วย HTML ซึ่งวางได้หลายตำแหน่งแล้วแต่ความต้องการ เช่น

3.1 ถ้าต้องการให้ Garelly อยู่ถัดจากส่วนหัวของหน้าและอยู่ด้านล่าง Menu bar (Navigation bar) ก็ให้ค้นหาโค้ด <div id='content'> แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว หรือ

3.2 ถ้าต้องการให้ Garelly ปรากฎอยู่ด้านล่างสุดข้องหน้า ก็ให้ค้นหาโค้ด </body> แล้ววางโค้ดต่อไปนี้ ก่อนหน้าโค้ดดังกล่าว


<div id="gallery">
<div id="pic-1" class="pic" style="top:98px;left:521px;background:url(http://upic.me/i/hx/colosseum.jpg) no-repeat 50% 50%; -moz-transform:rotate(18deg); -webkit-transform:rotate(18deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/q5/colosseum.jpg" target="_blank">colosseum</a>    
</div>    
<div id="pic-2" class="pic" style="top:82px;left:538px;background:url(http://upic.me/i/v6/industrialmech.jpg) no-repeat 50% 50%; -moz-transform:rotate(6deg); -webkit-transform:rotate(6deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/9v/industrialmech.jpg" target="_blank">industrial-mech</a>    
</div>    
<div id="pic-3" class="pic" style="top:388px;left:64px;background:url(http://upic.me/i/6o/4greenbeach.jpg) no-repeat 50% 50%; -moz-transform:rotate(-27deg); -webkit-transform:rotate(-27deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/or/4greenbeach.jpg" target="_blank">4-green-beach</a>    
</div>    
<div id="pic-4" class="pic" style="top:186px;left:277px;background:url(http://upic.me/i/rk/2breaststroke.jpg) no-repeat 50% 50%; -moz-transform:rotate(32deg); -webkit-transform:rotate(32deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/k9/2breaststroke.jpg" target="_blank">2-breast-stroke</a>    
</div>    
<div id="pic-5" class="pic" style="top:242px;left:317px;background:url(http://upic.me/i/07/sandsoflife.jpg) no-repeat 50% 50%; -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/vu/sandsoflife.jpg" target="_blank">sands-of-life</a>    
</div>    
<div id="pic-6" class="pic" style="top:69px;left:400px;background:url(http://upic.me/i/3x/sahalewa.jpg) no-repeat 50% 50%; -moz-transform:rotate(39deg); -webkit-transform:rotate(39deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/ht/sahalewa.jpg" target="_blank">sahale-wa</a>    
</div>    
<div id="pic-7" class="pic" style="top:52px;left:597px;background:url(http://upic.me/i/qz/bamboo.jpg) no-repeat 50% 50%; -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/y9/bamboo.jpg" target="_blank">bamboo</a>    
        </div>    
<div id="pic-8" class="pic" style="top:398px;left:96px;background:url(http://upic.me/i/y6/1californiasurfing.jpg) no-repeat 50% 50%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/n5/1californiasurfing.jpg" target="_blank">1-california-surfing</a>    
</div>    
<div id="pic-9" class="pic" style="top:110px;left:286px;background:url(http://upic.me/i/go/3farm.jpg) no-repeat 50% 50%; -moz-transform:rotate(-11deg); -webkit-transform:rotate(-11deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/8b/pfarm.jpg" target="_blank">farm</a>    
</div>    
<div id="pic-10" class="pic" style="top:174px;left:461px;background:url(http://upic.me/i/nn/spice.jpg) no-repeat 50% 50%; -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/xt/spice.jpg" target="_blank">spice</a>    
</div>    
<div id="pic-11" class="pic" style="top:121px;left:28px;background:url(http://upic.me/i/6p/sportscar.jpg) no-repeat 50% 50%; -moz-transform:rotate(16deg); -webkit-transform:rotate(16deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/a5/sportscar.jpg" target="_blank">sports-car</a>    
</div>    
<div id="pic-12" class="pic" style="top:79px;left:464px;background:url(http://upic.me/i/pv/endurance.jpg) no-repeat 50% 50%; -moz-transform:rotate(33deg); -webkit-transform:rotate(33deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/ne/endurance.jpg" target="_blank">endurance</a>    
</div>    
<div id="pic-13" class="pic" style="top:122px;left:205px;background:url(http://upic.me/i/oy/bahnhoff.jpg) no-repeat 50% 50%; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/7n/bahnhoff.jpg" target="_blank">bahnhoff</a>    
</div>    
<div id="pic-14" class="pic" style="top:308px;left:303px;background:url(http://upic.me/i/rb/bluegreennature.jpg) no-repeat 50% 50%; -moz-transform:rotate(-13deg); -webkit-transform:rotate(-13deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/yw/bluegreennature.jpg" target="_blank">blue-green-nature</a>    
</div>    
<div id="pic-15" class="pic" style="top:119px;left:241px;background:url(http://upic.me/i/n8/tonemapped.jpg) no-repeat 50% 50%; -moz-transform:rotate(36deg); -webkit-transform:rotate(36deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/lz/tonemapped.jpg" target="_blank">tonemapped</a>    
</div>    
<div id="pic-16" class="pic" style="top:386px;left:92px;background:url(http://upic.me/i/10/whoooosh.jpg) no-repeat 50% 50%; -moz-transform:rotate(-31deg); -webkit-transform:rotate(-31deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/r7/whoooosh.jpg" target="_blank">whoooosh</a>    
</div>  
  
</div>

เมื่อวางโค้ดในขั้นที่ 3 ลงไปแล้วทำการบันทึกแม่แบบ ก็จบขั้นตอนการติดตั้งครับ




แนวทางการปรับแต่งโค้ดในขั้นที่ 3

1. URL สีแดงคือ URL ของรูปขนาดเล็กมีขนาด 150 x 100 px คุณสามารถเปลี่ยนเป็นรูปของคุณเองได้ตามต้องการ
2. URL สีน้ำเงิน เป็น URL ของภาพเดียวกับ URL สีแดง แต่เป็นรูปที่มีขนาดใหญ่ 800 x 535 px
3. ตอนนี้ผมได้ใส่รูปไว้ใน Garelly จำนวน 16 รูป หากต้องการเพิ่มหรือลดจำนวนรูป ก็ให้เพิ่มหรือ ลดโค้ด

<div id="pic-รูปที่ ? " class="pic" style="top:386px;left:92px;background:url(ใส่ URL ของภาพขนาด 150 x 100 ) no-repeat 50% 50%; -moz-transform:rotate(-31deg); -webkit-transform:rotate(-31deg);">  
<a class="fancybox" rel="fncbx" href="ใส่ URL ของภาพขนาดเล็ก 800 x 535" target="_blank">whoooosh</a>  
</div> 


4.  โค้ดในขั้นตอนที่ 3 ยังสามารถปรับแต่งตำแหน่งของภาพที่จะปรากฎครั้งแรกเมื่อ load หน้า Garelly ได้ซึ่งทำได้โดยปรับค่าตัวเลขสีเขียวในโค้ดของขั้นตอนที่ 3 (ควรปรับให้ค่าของแต่ละรูปต่างกันเพื่อจะได้ไม่ทับตำแหน่งกัน)


สอนวิธีทำ blogspot

เช่น ถ้าต้องการปรับตำแหน่งของภาพที่ 10 ก็ปรับตำแหน่งที่โค้ดสีเขียวที่แสดงให้เห็นตัวอย่างในโค้ดด้านล่าง เป็นต้น

<div id="pic-10" class="pic" style="top:174px;left:461px;background:url(http://upic.me/i/nn/spice.jpg) no-repeat 50% 50%; -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg);">  
<a class="fancybox" rel="fncbx" href="http://upic.me/i/xt/spice.jpg" target="_blank">spice</a>  
</div>


5. ถ้าต้องการปรับองศาการหมุนของแต่ละภาพก็สามารถปรับแต่งที่โค้ด -webkit-transform:rotate หรือโค้ดสีม่วงโดยถ้าใส่ค่าเป็นลบรูปจะหมุนทวนเข็มนาฬิกา และถ้าใส่ค่าเป็นบวกภาพก็จะหมุนตามเข็มนาฬิกา


เช่น ถ้าต้องการปรับค่าการหมุนของรูปที่ 10 หมุนตามเข็มนาฬิกา 45 องศา ก็ปรับแต่งได้ที่โค้ดสีม่วงเป็น 45 deg ดังแสดงในตัวอย่างด้านล่าง เป็นต้น

<div id="pic-10" class="pic" style="top:174px;left:461px;background:url(http://upic.me/i/nn/spice.jpg) no-repeat 50% 50%; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);">    
<a class="fancybox" rel="fncbx" href="http://upic.me/i/xt/spice.jpg" target="_blank">spice</a>    
</div>


สอนสร้าง blogger

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

เครดิต : tutorialzine.com
Hack to Blogger : Hackublog

หมายเหตุ : คุณควรดาวน์โหลดจาวาสคริปต์ต่อไปนี้เพื่อสำรองไฟล์ และหากเป็นไปได้ควร upload จาวาสคริปต์ใช้งานด้วยตนเอง
http://siiam.bravehost.com/jquery.fancybox-1.2.6.pack.js
http://siiam.bravehost.com/script.js

ตอนนี้มีความคิดเห็น : 12 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. แหล่มคับ

  1. คุนครับๆ สีแดง มัน url รูปเล็กครับ ผมเทสดูแล้วโค๊ดใช้ได้ครับ สลับกันอยูหน่อยหนึ่งครับ ขอบคุนมาก

  1. ตอบคุณ champ_za4:

    ขอคุณมากครับที่แจ้งมา เบลอๆไปหน่อย แก้ให้แล้วครับผม

  1. พี่่ค่ะ ถ้าเราจะทำแกลอรี่ใน รูปแบบที่พี่สอนอะ แต่จะไปใส่ในอีกpage ของเรา ที่ตั้งชื่อว่า PHOTO แล้วถ้านู๋ทามตามด้านบน มันจะปัยขึ้นที่ Page PHOTO ยังไงอะคะ

  1. @ tee-prang : ตอนนี้จาวาสคริปต์ยังใช้ไม่ได้ครับ ยังไงฝาก email ไว้ก่อน ถ้าพี่แก้แล้วจะเมลไปบอกครับ

  1. พีค่ะรบกวนหน่อยค่ะ เด๋วนู๋จะทิ้งเมล์ไว้ แต่ตอนนี้มีปัญหาคือ เว๊บที่นู๋ทามมันต้องการโชว์หน้าแกลลอลี่อะค่ะ นู๋ลองใส่โค๊ดด้านบนนี้ แต่เวลาชี้ไปที่รูป มันไม่ขยายเป็น POP up แบบที่พี่โชว์ในรูปเรยอะค่ะ ยังไงช่วยหน่อยนะคะ จะรอค่ะ



    ขอบคุณสำหรับคำตอบ เว๊บพี่นู๋ติดตามและอัพเดตตลอด มีประโยชน์สำหรับมือใหม่มากค่ะ

  1. tee-prang@hotmail.com

    ขอบคุนค่ะ

  1. ไม่เข้าใจเลยอ่ะคับ

  1. พี่คับ
    ผมจะทิ้งเมล์ไว้พี่ช่วย อธิบายให้เห็นภาพหน่อยได้ไหมอ่ะ
    ไม่เข้าใจจริงๆๆคับ
    ขอบคุณล่วงหน้านะคับ
    satawat_off@hotmail.com

  1. งง ใช่ได้เลยครับ สำหรับมือใหม่อย่างผม
    ขอแบบว่า ทำง่ายได้ป่าวครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ผมลองทำแล้วครับ ดีมากๆครับ แต่ใน Blogspot หาโค้ด div id='content' ไม่เจอ เจอแต่ /bodyพอวางไปก็จะอยู่ตำแหน่งล่างบทความและอยู่ชิดซ้ายมาก ทำได้แล้วผมเลยลองทำผสมกับ Beautiful jQuery Slider on Blogger (ซึ่ง jQuery Slider ผมใช้ทำ blog หลายๆ blog ที่ผมทำเยี่ยมมากเลยครับ) คำถามคือผมจะหาตำแหน่งรูปทั้ง 16 รูปอยู่ใต้ กรอบ Query Slider หรือที่ตำแหน่งอื่นๆเราต้องการครับ......ขอบพระคุณ...อาจารย์ที่มอบวิทยาทานที่มีประโยชน์

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel