ชื่อเรียก Anything Slider นั้นมาจากสาเหตุที่ Slide ชนิดนี้สามารถแสดงผลได้ทั้งรูปภาพ ข้อความ หรือทั้งข้อความและรูปภาพผสมกัน
จุดเด่นของ Slide ชนิดนี้ นอกจากจะแสดงผลได้หลากหลายแล้ว ยังมี Control bar สำหรับเลือกแสดงภาพได้เอง และยังสามารถสั่งให้การทำงานหยุดลงและเริ่มต้นขึ้นได้ด้วย
ตัวอย่างการทำงานของ Anything Slider สามารถคลิกชมได้จาก Link ด้านล่าง
วิธีติดตั้ง 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>
