เจคิวลี่ สไลด์ คืออะไร ??
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 กับผู้ใช้บริการมากอีกด้วย
หรือสร้างจาก HTML code (ขออธิบายในการปรับเปลี่ยน HTML ครับ)สำหรับในที่นี้ผมขอแนะนำ www.slide.com เพราะว่ามีรูปแบบให้เลือกตามความต้องการมากมาย สามารถปรับแก้ในภายหลังได้ และให้ Bandwidth กับผู้ใช้บริการมากอีกด้วย
ขั้นตอนการสร้างสไลด์ในบล็อก
1. ไปที่ www.slide.com และทำการสมัครสมาชิก
2. เริ่มสร้างสไลด์โดยไปที่เมนูสร้าง ด้านซ้ายบน >> เลือก สร้างภาพสไลด์โชว์
3. เมื่อเข้ามาที่หน้าต่างการสร้างสไลด์ ก็ให้เริ่มตั้งค่าต่างๆ ตามขั้นตอนที่เห็นในรูปข้างล่างนี้ ซึ่งได้แก่ รูปแบบของสไลด์ และที่ตั้งของภาพที่จะนำมาสร้างสไลด์ซึ่งเลือกได้ว่าจะใช้จากที่อื่นๆ หรือ Browse เรียกจากเครื่องคอมพิวเตอร์ของเรา …และเมื่อตั้งค่าเป็นที่พอใจ และ upload ภาพเเสร็จสิ้นแล้ว ให้บันทึกสไลด์เพื่อรับรหัส HTML ครับ
4. เมื่อบันทึกเสร็จสิ้นแล้ว ยังสามารถกลับไปแก้ไขได้อีกด้วย แต่ถ้าเป็นที่พอใจแล้วให้คัดลอกรหัส HTML ไปวางในองค์ประกอบของหน้าที่เราต้องการได้เลยครับ
เทคนิคพิเศษเพิ่มเติม
เราสามารถทำให้แถบเมนูด้านล่างหายไปโดยการลบ รหัส HTML บางส่วนทิ้งไปโดย
มองหา code ที่ชื่อว่า <p style="white-space:nowrap">
ให้ลบ code ถัดจากนั้นทั้งหมดจนถึง code ที่ชื่อว่า </p></p> เท่านี้เมนูด้านล่างที่ดูรกตาก็จะหายไปแล้วครับ เมื่อลบแล้วผลเป็นดังนี้ค่ะ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น