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="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></li>
<li id="kwick2"><img alt="Otaru Orgel Museum" src="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/s400/photoshop-distort-ripple-frame-008.png"/></li>
<li id="kwick3"><img alt="Uni"  src="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/s400/photoshop-feather-frame-contract-selection-006.png"/></li>
<li id="kwick4">"><img alt="Otaru Canal"  src="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/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="http://4.bp.blogspot.com/-0Wd_XVrQgBM/TiZLFN9FHYI/AAAAAAAADAc/dYXo2xhRY_o/photoshop-page-curl-018.png"/></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="http://3.bp.blogspot.com/-b21lbzhOpDM/T3hg0ulfKaI/AAAAAAAAEZI/l9qT5f1MIHA/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="http://2.bp.blogspot.com/-xg09jRqgJS4/T3bYO_aMIkI/AAAAAAAAEX4/xBlxATpd6CM/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="http://2.bp.blogspot.com/-Ysa1JClu1HQ/T3Z_0-1SNdI/AAAAAAAAEWU/ZXGgtRBGlRc/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

Post Status




3 ความคิดเห็น:

Athlons Thunderbird กล่าวว่า...

รออยู่เลยครับคุณ max

Athlons Thunderbird กล่าวว่า...

Demo เข้าไปดูไม่ได้ครับ file not found
http://demo1.itechcolumn.com/2012/01/jquery-accordion-image-slider-demo.html

Max กล่าวว่า...

ดูได้ที่นี่ครับ
http://test.maxlayout.com/

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