Blogger: สไลเดอร์รูปภาพแบบหีบเพลงยืดหด

วิธีสร้างสไลเดอร์รูปภาพแบบยืดหด (jQuery accordion slider) ซึ่งสามารถปรับการจัดเรียงได้ทั้งเป็นแนวตั้ง (Vertical) และ แนวนอน (Horizontal) สามารถสร่างได้ดังนี้

Step 1.
เข้าสู่เมนูจัดการบล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'

---

Step 2.
กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
  </head>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>

<script type="text/javascript">
   $().ready(function() {
         $('#example .kwicks').kwicks({
      max : 300,
      spacing : 3,
      isVertical : true
     });
       });
</script>
  </head>

---

Step 3.
สั่งค้นหา
]]></b:skin>

แล้วแทนที่โค้ดที่หาเจอนั้นด้วยโค้ดด้านล่างนี้
.kwicks {
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}

.kwicks li{
 display: block;
 overflow: hidden;
 padding: 0;
 cursor: pointer;
}

#example .kwicks li{
 width: 240px;
 height: 120px;
 margin-bottom: 3px;
}

]]></b:skin>

---

Step 4.
จากนั้นกดปุ่ม 'บันทึกเทมเพลต' ก็จะทำให้ javascript และ CSS codes ถูกบันทึกลงในเทมเพลท

---

Step 5.
เข้าสู่บล็อกของคุณจากนั้นไปที่
'รูปแบบ'
โดยให้กดเลือก
'เพิ่ม Gadget'
แบบ
'HTML/จาวาสคริปต์'

---

Step 6.
นำโค้ดแบบใดแบบหนึ่งด้านล่างนี้แล้วคัดลอกใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

แบบที่ 1. โชว์ภาพที่ดูได้อย่างเดียว
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick2"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick3"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
<li id="kwick4"><img alt="IMAGE_Title" src="IMAGE_URL"/></li>
</ul></div>

แบบที่ 2. โชว์ภาพที่กดลงไปแล้วเป็นลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick2"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title" src="IMAGE_URL"/></li></a>
<li id="kwick3"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title"  src="IMAGE_URL"/></li></a>
<li id="kwick4"><a href="LINK_URL" title="LINK_Title"><img alt="IMAGE_Title"  src="IMAGE_URL"/></li></a>
</ul></div>

ซึ่งตั้งค่าได้ดังนี้
LINK_URL คือ ลิงก์ปลายทางของรูปภาพ
LINK_Title คือ คำอธิบายลิงก์
IMAGE_Title คือ คำอธิบายรูปภาพ
IMAGE_URL คือ ที่ตั้งของรูปภาพ

เพิ่มหรือลดจำนวนลิงก์
ถ้าต้องการเพิ่มลิงก์ก็ทำโดยคัดลอกรูปแบบของลิงก์เดิมแล้วใส่ตัวเลขเพิ่มลงไป
เช่นสร้างเป็น
<li id="kwick5">...
<li id="kwick6">...
<li id="kwick7">...
เขียนเพิ่มต่อไปเรื่อยๆ
แต่ถ้าจะลดจำนวนก็ลบลิงก์ทิ้งไป

---

ตัวอย่าง

นี่คือตัวอย่างวิธีสร้างเมนูภาพในขั้นตอนที่ 6 ซึ่งต้องผ่านการทำขั้นตอนที่ 1-5 ก่อนจึงจะใทำงานได้ครับ

ตัวอย่างแบบที่ 1 ภาพไม่มีลิงก์
<div id="example"><ul class="kwicks">
<li id="kwick1"><img alt="Singha Myanmar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMANpClxEPKDN70cyXgHWHhpNGSZsvB8PrY-wT1jfnGefmu1wbvhjN4FXkboNSAF6BKRgvOQbilBuwzuenciutzbQ7SjY3aVdDp-uvs2BfhpzbPV3h2mW-COZSz73EzJObDQY8TKWs7SQ/"/></li>
<li id="kwick2"><img alt="Otaru Orgel Museum" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIH5yhP3n9uHtkGCXfNed1AGh4VqJ7ve6LlyzscG_Ykl8vMC5T89RF0Kdwkyx0msIkrZSDpb5BTm6QmpI4cmdDah3KOc3EAd1mEWwjCucqiu9H4n9zPfutf4_gkeAeoon4bZC6lUF8ijE/s400/photoshop-distort-ripple-frame-008.png"/></li>
<li id="kwick3"><img alt="Uni"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqwzinlV0Sd-oS5fTfMkYXFrqUFwKbzKaet2ooEL_Kg_PbmG7S_mUbAkJrC0nlqwOyJDH09VzF1dszIt_L5_RwgSdxNDP3OUceDncyqSubVdoTUA2_f-hyU1Pv3Q3mZ3Wm35iADByH1c/s400/photoshop-feather-frame-contract-selection-006.png"/></li>
<li id="kwick4">"><img alt="Otaru Canal"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEine7nwMkqwTqERBK3P25TuM956DcAtQrUr_Kp3P4S_J7JzHAAjMAbK6L7tOSfwwEHCAcAYDXKWIj2ggBNvCaQmJcMUWnAIiy8OqhOThPeZ7aJW7J0Jp7oIjX6MiU5y7xLeX-4MeZP-Swk/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li>
</ul></div>

ตัวอย่างแบบที่ 2 ภาพมีลิงก์ด้วย
<div id="example"><ul class="kwicks">
<li id="kwick1"><a href="http://tip.maxlayout.com/2010/07/page-curl-in-photoshop.html" title="สิงห์พม่า"><img alt="Singha Myanmar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMANpClxEPKDN70cyXgHWHhpNGSZsvB8PrY-wT1jfnGefmu1wbvhjN4FXkboNSAF6BKRgvOQbilBuwzuenciutzbQ7SjY3aVdDp-uvs2BfhpzbPV3h2mW-COZSz73EzJObDQY8TKWs7SQ/"/></li></a>
<li id="kwick2"><a href="http://tip.maxlayout.com/2010/08/photoshop-distort-ripple-frame.html" title="พิพิธภัณฑ์กล่องดนตรีโอตารุ"><img alt="Otaru Orgel Museum" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIH5yhP3n9uHtkGCXfNed1AGh4VqJ7ve6LlyzscG_Ykl8vMC5T89RF0Kdwkyx0msIkrZSDpb5BTm6QmpI4cmdDah3KOc3EAd1mEWwjCucqiu9H4n9zPfutf4_gkeAeoon4bZC6lUF8ijE/s400/photoshop-distort-ripple-frame-008.png"/></li></a>
<li id="kwick3"><a href="http://tip.maxlayout.com/2010/08/photoshop-feather-frame-contract.html" title="ไข่หอยเม่น"><img alt="Uni"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqwzinlV0Sd-oS5fTfMkYXFrqUFwKbzKaet2ooEL_Kg_PbmG7S_mUbAkJrC0nlqwOyJDH09VzF1dszIt_L5_RwgSdxNDP3OUceDncyqSubVdoTUA2_f-hyU1Pv3Q3mZ3Wm35iADByH1c/s400/photoshop-feather-frame-contract-selection-006.png"/></li></a>
<li id="kwick4"><a href="http://tip.maxlayout.com/2010/08/photoshop-change-canvas-size.html" title="คลองโอตารุ"><img alt="Otaru Canal"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEine7nwMkqwTqERBK3P25TuM956DcAtQrUr_Kp3P4S_J7JzHAAjMAbK6L7tOSfwwEHCAcAYDXKWIj2ggBNvCaQmJcMUWnAIiy8OqhOThPeZ7aJW7J0Jp7oIjX6MiU5y7xLeX-4MeZP-Swk/s430/photoshop-change-canvas-size-otaru-canal-004.png"/></li></a>
</ul></div>

---

อธิบายเพิ่มเติม

เกี่ยวกับ Step 2
ขนาดของภาพเมื่อขยายออกมาขณะเอาเมาส์วางไว้เหนือรูปคือ
      max : 300

เปลี่ยนการจัดเรียงของสไลด์รูปภาพจากแนวตั้งให้กลายเป็นแนวนอนได้โดยเปลี่ยนจาก
      isVertical : true
ให้เป็น
      isVertical : false

เกี่ยวกับ Step 3
ขนาดของภาพที่ยังไม่ขยายออกมาคือ
 width: 360px;
 height: 120px;

---

Credit: http://www.itechcolumn.com/2012/01/jquery-accordion-vertical-image-slider.html