วิธีติดตั้ง jQuery image cube บน blogger

สอนทำบล็อก

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

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



วิธีติดตั้ง

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

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

#dice { width: 230px; height: 200px; } /* ปรับความกว้างและความสูงให้พอดีกับตำแหน่งที่ติดตั้ง */
#linksCube img { width: 100%; height: 100%; }




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://hackublog.googlecode.com/files/jquery.imagecube.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
$('#dice').imagecube({imagePath: 'http://hackublog.googlecode.com/files/',
direction: 'random', // Direction of rotation: random|up|down|left|right
randomSelection: ['up', 'down', 'left', 'right'],
// If direction is random, select one of these
speed: 3000, // Time taken (milliseconds) to transition
easing: 'linear', // Name of the easing to use during transitions
repeat: true, // True to automatically trigger a new transition after a pause
pause: 500, // Time (milliseconds) between transitions
selection: 'forward', // How to choose the next item to show:
// 'forward', 'backward', 'random'
shading: true, // True to add shading effects, false for no effects
opacity: 0.8, // Maximum opacity (0.0 - 1.0) for highlights and shadows
imagePath: 'includes/jquery.imagecube.package-1.2.0/',
// Any extra path to locate the highlight/shadow images
full3D: true, // True to add cubic perspective, false for 2D rotation
segments: 20, // The number of segments that make up each 3D face
reduction: 30, // The amount (pixels) of reduction for far edges of the cube
expansion: 10, // The amount (pixels) of expansion for the near edge of the cube
// lineHeight: [0.0, 1.25], // Hidden and normal line height (em) for text
// letterSpacing: [-0.4, 0.0], // Hidden and normal letter spacing (em) for text
beforeRotate: null, // Callback before rotating
afterRotate: null // Callback after rotating
});
});
</script>


เมื่อจบขั้นที่ 2 แล้วให้บันทึกแม่แบบ


หมายเหตุ หาก Template ของคุณเคยติดตั้ง jquery 1.3.2 แล้ว ก็ไม่ต้องติดตั้งซ้ำอีก หมายความว่า คุณสามารถลบโค้ด

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

ในขั้นที่ 2 ทิ้งไปได้เลย



3. ขั้นนี้เป็นการติดตั้ง HTML ซึ่งทำได้ 2 วิธี คือ

3.1 ติดตั้งลงไปใน Templates วิธีนี้เหมาะสำหรับคนที่มีความชำนาญในการแก้ไข HTML (ขอละไว้ ไม่อธิบาย)

3.2 ทำโดยการ เพิ่ม Gadget


สอน blogger 

ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์ ในตำแหน่งที่ต้องการ แล้ววางโค้ดต่อไปนี้ลงไป

<div id="dice">
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
</div>


แก้ไขโค้ดตามที่ได้แนะนำไว้แล้วทำการบันทึก Gadget โดยไม่ต้องตั้งชื่อ Gadget นั้น


สำหรับผู้ที่ต้องการทดสอบโค้ด อาจจะทดลองโดยใช้ตัวอย่างต่อไปนี้ครับ

<div id="dice">
    <img src="http://upic.me/i/rx/uluru.jpg" alt="dice1" title="dice1" />
    <img src="http://upic.me/i/bh/islands.jpg" alt="dice2" title="dice2" />
    <img src="http://upic.me/i/vp/gorge.jpg" alt="dice3" title="dice3" />
</div>



ถ้าต้องการใส่ Link ให้กับภาพก็จะต่้องใส่ tag <a> ให้กับภาพ ซึ่งจะได้โค้ดดังต่อไปนี้


<div id="dice">
    <a id="linksCube" href="ใส่ Link"><img src="http://upic.me/i/rx/uluru.jpg" alt="dice1" title="dice1" /></a>
    <a id="linksCube" href="ใส่ Link"><img src="http://upic.me/i/bh/islands.jpg" alt="dice2" title="dice2" /></a> 
    <a id="linksCube" href="ใส่ Link"><img src="http://upic.me/i/vp/gorge.jpg" alt="dice3" title="dice3" /></a> 
</div>



ถ้าต้องการใส่ปุ่ม Start และ Stop ก็เพิ่มโค้ดด้านล่างนี้ต่อจากโค้ดเดิม


<!-- hackublog start/stop buttons -->
<div id="controls">       
         <p><button type="button" id="startG" onclick="$('#dice').imagecube('start');" >Start</button>
           <button type="button" id="stopG"  onclick="$('#dice').imagecube('stop');"  >Stop</button></p>
</div>           
<!-- end hackublog buttons -->



ซึ่งจะทำให้ได้โค้ด


<div id="dice">
    <img src="http://upic.me/i/rx/uluru.jpg" alt="dice1" title="dice1" />
    <img src="http://upic.me/i/bh/islands.jpg" alt="dice2" title="dice2" />
    <img src="http://upic.me/i/vp/gorge.jpg" alt="dice3" title="dice3" />
</div>
<!-- hackublog start/stop buttons -->
<div id="controls">       
         <p><button type="button" id="startG" onclick="$('#dice').imagecube('start');" >Start</button>
           <button type="button" id="stopG"  onclick="$('#dice').imagecube('stop');"  >Stop</button></p>
</div>           
<!-- end hackublog buttons –>




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

<img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
 

ซึ่งถ้าเพิ่มภาพเข้าไปอีก 3 ภาพก็จะได้โค้ดดังนี้

<div id="dice">
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" /> 
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
    <img src="ใส่ที่ตั้งของภาพ" alt="ใส่ Keyword" title="ใส่ข้อความโต้ตอบ" />
</div>


หากมีปัญหาในการติดตั้งสามารถสอบถามที่บทความนี้ได้เลยครับ ผมขอจบบทความสอนเทคนิคการทำบล็อกอีกหนึ่งบทความเพียงเท่านี้ครับ

เครดิต : keith-wood.name
Hack & Edit to Blogger : Hackublog    

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

  1. ครับ...สไลด์นี่มีปัญหาครับ
    ยังไงส่งข่าวด้วยครับ..ชื่นชอบสไลด์นี่นะครับ...มีวิธีแก้ไหมครับ

  1. ให้แทนสคริปต์ในข้อ 2 ตรง

    <script src='http://hackublog.googlecode.com/files/jquery.imagecube.pack.js' type='text/javascript'/>

    ด้วย
    <script src='http://sites.google.com/site/hackublogcodex/home/code/jquery.imagecube.min.txt' type='text/javascript'/>

    ------------------------------------------------------------------------------
    หากไม่ได้ผลให้ดาวน์โหลด
    http://sites.google.com/site/hackublogcodex/home/code/jquery.imagecube.min.txt

    แล้วอ่านวิธีในบทความเพื่อแก้ปัญหาครับ
    http://www.hackublog.com/2010/10/javascript-hackublog.html

  1. พี่ค่ะมีเรื่องขอรบกวนหน่อยค่ะ คือหนูเอา jquery slideshow แปะไว้ รวมถึง css และ scirpt ตอนเเรกที่ยังไม่ได้ทำการลิ้งค์ ไปยัง css รูปก็ขึ้น เเต่พอลิ้ง css แล้วจะเห็นเป็นกล่องสไลนเเต่ไม่มีรูปค่ะ กล่องนั้นก็สไลน์ได้นะค่ะ พอดียังไม่ได้เอาเวปขึ้นโฮสอ่ะค่ะ เลยเอามาแปะไม่เป็น เเต่รัน appsever ค่ะ

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

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

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