jQuery Slider

jQuery Slider

 เจคิวลี่ สไลด์ คืออะไร ??     
jQuery เป็นห้องสมุด JavaScript รวดเร็วขนาดเล็กและคุณลักษณะที่อุดมด้วย มันทำให้สิ่งที่ต้องการสำรวจเอกสารและการจัดการการจัดการเหตุการณ์ภาพเคลื่อนไหวและอาแจ็กซ์ที่เรียบง่ายมากกับที่ง่ายต่อการใช้ API ที่ทำงานในหลากหลายของเบราว์เซอร์ ด้วยการรวมกันของความคล่องตัวและการขยาย, jQuery มีการเปลี่ยนแปลงวิธีที่ผู้คนนับล้านเขียน JavaScript

        ขั้นตอนติดตั้ง  jQuery  Slider  

1 เข้าสู่ระบบในแผงควบคุม Blogger ของคุณ 

2 ไปที่แม่แบบ> การสำรองข้อมูล

3 ตอนนี้คลิก "แก้ไข HTML." 

 4 ภายใน "HTML EDITOR" กด CTRL + F และค้นหา </ head> แท็ก 

5 ขณะนี้คัดลอกและวางรหัส jQuery (บันทึกไว้ในไฟล์ NOTEPAD) เพียงข้างต้น </ head> แท็ก 

6 คลิก "บันทึกแม่แบบ

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

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

*{ margin: 0; padding: 0;} 
.anythingSlider{ width: 760px; height: 360px; position: relative; margin: 0 auto 15px;} 
.anythingSlider .wrapper1{ width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; } 
.anythingSlider .wrapper1 ul{ width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; } 
.anythingSlider ul li{ display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; } 
.anythingSlider .arrow{ display: block; height: 200px; width: 67px; background: url(http://upic.me/i/pv/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; } 
.anythingSlider .forward { background-position: 0 0; right: -20px; } 
.anythingSlider .back { background-position: -67px 0; left: -20px; } 
.anythingSlider .forward:hover{ background-position: 0 -200px; } 
.anythingSlider .back:hover { background-position: -67px -200px; } 
/* For Specific Slides */ 
#textSlide { padding: 10px 30px; } 
#textSlide h3 { font: 20px Georgia, Serif; } 
#textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; } 
#textSlide ul { list-style: disc; margin: 0 0 0 25px; } 
#textSlide ul li { display: list-item; } 
#quoteSlide{ padding: 30px; } 
#quoteSlide blockquote { font: 16px Georgia, Serif; /*text-align: center;*/ color: #444; margin: 0 0 10px 0; } 
/*#quoteSlide p{ text-align: center; }*/ 
#thumbNav { position: relative; top: 323px; text-align: center; } 
#thumbNav a{ color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://upic.me/i/0b/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } 
#thumbNav a:hover { background-image: none; } 
#thumbNav a.cur { background: #e0a213; } 
#start-stop{ background: green; background-image: url(http://upic.me/i/0b/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } 
#start-stop.playing { background-color: red; } 
#start-stop:hover { background-image: none; } 
/* Prevents*/ 
.anythingSlider .wrapper1 ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; } 
.anythingSlider .wrapper1 ul ul li { float: none; height: auto; width: auto; background: none; }



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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://hackublox.googlecode.com/files/jquery.easing.1.2.js"></script> 
<script src="http://hackublox.googlecode.com/files/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function formatText(index, panel) {
return index + "";
}

$(function () {

$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});

$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6); 
});
});

</script>




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


ถ้าต้องการให้ Anything Slider อยู่ถัดจากส่วนหัวของหน้าและอยู่ด้านล่าง Menu bar (Navigation bar) ก็ให้ค้นหาโค้ด 

<div id='content'>

แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว



<Div class="anythingSlider"> 
<div class='wrapper1'> 
<ul> 

<li><img src="http://upic.me/i/2z/slidecivil1.jpg" alt="" height='317' width='680'/></li> 

<li><div id="textSlide"> 
                   <img src="http://upic.me/i/m8/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/> 
                   <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li>

<li><img src="http://upic.me/i/ns/slideenv1.jpg" alt="" height='317' width='680'/></li> 

<li><img src="http://upic.me/i/0t/slidecivil2.jpg" alt=""  height='317' width='680'/></li> 

<li><div id="quoteSlide"> 
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote> 
                    <p> - <a id='perma' href='http://hackublog.blogspot.com '>Hackublog</a></p> 
</div></li>

<li><img src="http://upic.me/i/bi/slideenv2.jpg" alt="" height='317' width='680'/></li>

</ul> 
</div>         
</Div>


ให้แก้โค้ดสีน้ำเงินเป็นข้อความหรือภาพที่คุณต้องการและบันทึกแม่แบบ ถือว่าจบขั้นตอน



หมายเหตุ หากต้องการเพิ่มจำนวนภาพ(หรือข้อความ) ให้มากกว่า 6 ภาพ ก็แก้ค่าตัวเลข (6) ในขั้นที่ 2 แล้วเพิ่มโค้ดต่อไปนี้ลงไปอีกให้เท่ากับจำนวนที่เพิ่มขึ้น

ตัวอย่างโค้ดภาพ
<li><img alt=''  src='ใส่URLของรูป' height='317' width='680'/></li>


ตัวอย่างโค้ดข้อความ
<li><div id="quoteSlide"> 
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote> 
</div></li>



ตัวอย่างโค้ดข้อความและภาพ
<li><div id="textSlide"> 
                   <img src="ใส่URLของรูป" alt="" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/> 
                   <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li>



ตัวอย่างโค้ดที่ผมใช้ใน DEMO

<Div class='anythingSlider'> 
<div class='wrapper1'> 
<ul> 
<li><img alt='' height='317' src='http://upic.me/i/st/buenos_aires.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/8g/3402757021_45a780d660.jpg' width='680'/></li> 
<li><div id='textSlide'> 
                   <img alt='tomato sandwich' height='250' src='http://upic.me/i/m8/251356.jpg' style='float: right; margin: 0 0 2px 10px;' width='250'/> 

                    <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li> 
           
<li><img alt='' height='317' src='http://upic.me/i/hs/3403568620_cf6cf793b7.jpg' width='680'/></li>              
<li><img alt='' height='317' src='http://upic.me/i/93/beatifulmollusc.jpg' width='680'/></li> 
<li><div id='quoteSlide'> 
                    <h4>ไอน์สไตน์</h4> 
                    <blockquote>ไอน์สไตน์ เกิดเมื่อวันที่ 14 มีนาคม ปี คศ. 1879 ที่เมืองอูล์ม ทางตอนใต้ของประเทศเยอรมันนี บิดาของไอน์สไตน์เป็นชาวยิว มีชีวิตในวัยเด็กเหมือนเด็กทั่วไป มีการกล่าวกันว่าจุดที่ทำให้ไอ น์สไตน์มาสนใจวิทยาศาสตร์อย่างมากคือเข็มทิศ ในขณะนั้นเขามีอายุได้ 5 ปี และกำลังนอนป่วยอยู่บนเตียง บิดาได้นำเข็มทิศมาให้เล่น เขาใส่ใจและสนใจอยากรู้ว่าทำไมเข็มทิศจึงชี้ไปทาง ทิศเหนือ และตั้งแต่นั้นมาเขาเริ่มสนใจทาง คณิตศาสตร์และฟิสิกส์</blockquote> 
                    <a href='http://www.pccpl.ac.th/~tech/Obec/digital_library/snet2/mathematicians/einstein.htm' id='perma'>อ่านต่อ</a> 
</div></li>               
<li><img alt='' height='317' src='http://upic.me/i/qc/ben_beatiful.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/mx/columbia.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/ok/mostbeatiful.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/j7/premier.jpg' width='680'/></li> 
</ul> 
</div>         
</Div>

การใส่สไลด์ในองค์ประกอบของหน้านั้นทำได้หลายวิธี เช่น การ เพิ่ม Gadget ที่ชื่อว่า “สไลด์โชว์” สไลด์โชว์    หรือสร้างจาก HTML code (ขออธิบายในการปรับเปลี่ยน HTML ครับ)


สำหรับในที่นี้ผมขอแนะนำ www.slide.com เพราะว่ามีรูปแบบให้เลือกตามความต้องการมากมาย สามารถปรับแก้ในภายหลังได้ และให้ Bandwidth กับผู้ใช้บริการมากอีกด้วย

ขั้นตอนการสร้างสไลด์ในบล็อก

1. ไปที่ www.slide.com และทำการสมัครสมาชิก 

2. เริ่มสร้างสไลด์โดยไปที่เมนูสร้าง ด้านซ้ายบน  >> เลือก สร้างภาพสไลด์โชว์ 

3. เมื่อเข้ามาที่หน้าต่างการสร้างสไลด์ ก็ให้เริ่มตั้งค่าต่างๆ ตามขั้นตอนที่เห็นในรูปข้างล่างนี้ ซึ่งได้แก่ รูปแบบของสไลด์ และที่ตั้งของภาพที่จะนำมาสร้างสไลด์ซึ่งเลือกได้ว่าจะใช้จากที่อื่นๆ หรือ Browse เรียกจากเครื่องคอมพิวเตอร์ของเรา  …และเมื่อตั้งค่าเป็นที่พอใจ และ upload ภาพเเสร็จสิ้นแล้ว ให้บันทึกสไลด์เพื่อรับรหัส HTML ครับ





 


4. เมื่อบันทึกเสร็จสิ้นแล้ว ยังสามารถกลับไปแก้ไขได้อีกด้วย แต่ถ้าเป็นที่พอใจแล้วให้คัดลอกรหัส HTML ไปวางในองค์ประกอบของหน้าที่เราต้องการได้เลยครับ

เทคนิคพิเศษเพิ่มเติม

เราสังเกตว่า รหัส HTML ที่ได้มานั้นเมื่อนำมาแปะที่บล็อกแล้วจะดูรกหูรกตาไปนิด แบบนี้ครับ

  

เราสามารถทำให้แถบเมนูด้านล่างหายไปโดยการลบ รหัส HTML บางส่วนทิ้งไปโดย

มองหา code ที่ชื่อว่า <p style="white-space:nowrap"> 

ให้ลบ code ถัดจากนั้นทั้งหมดจนถึง code ที่ชื่อว่า  </p></p> เท่านี้เมนูด้านล่างที่ดูรกตาก็จะหายไปแล้วครับ เมื่อลบแล้วผลเป็นดังนี้ค่ะ