image slide - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์ Sun, 18 Jan 2015 13:32:59 +0000 th hourly 1 https://wordpress.org/?v=6.8.3 https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png image slide - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี https://www.itoffside.com 32 32 รูปภาพสไลด์ด้วย Nivo Slider jQuery Plugin https://www.itoffside.com/nivo-slider-jquery-plugin/ https://www.itoffside.com/nivo-slider-jquery-plugin/#respond Sun, 18 Jan 2015 13:32:44 +0000 https://www.itoffside.com/?p=2442 การทำรูปภาพสไลด์เป็นที่นิยมเนื่องจากมีความสวยงามแล้วยังประหยัดพื้นที่การแสดงผลรูปภาพอีกด้วย โดยในบทความนี้ผมแนะนำการใช้งาน Nivo Slider Jquery Plugin ซึ่งการนำมาประยุกต์ใช้งานได้ง่ายไม่ซ้ำซ้อนและตรงตามความต้องการ อีกทั้งยังมีการปรับแต่งได้มากมาย เว็บผู้พัฒนา : http://docs.dev7studios.com/jquery-plugi...

The post รูปภาพสไลด์ด้วย Nivo Slider jQuery Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> การทำรูปภาพสไลด์เป็นที่นิยมเนื่องจากมีความสวยงามแล้วยังประหยัดพื้นที่การแสดงผลรูปภาพอีกด้วย โดยในบทความนี้ผมแนะนำการใช้งาน Nivo Slider Jquery Plugin ซึ่งการนำมาประยุกต์ใช้งานได้ง่ายไม่ซ้ำซ้อนและตรงตามความต้องการ อีกทั้งยังมีการปรับแต่งได้มากมาย

เว็บผู้พัฒนา : http://docs.dev7studios.com/jquery-plugins/nivo-slider

ตัวอย่าง (demo)

http://sysapp.itoffside.com/slide/

การติดตั้ง
1. ดาวน์โหลด Nivo Slider jQuery Plugin ได้ที่ คลิกที่นี้เพื่อดาวน์โหลด
2. include ไฟล์ css และไฟล์ js ไว้ใน <head> ของเว็บไซต์คุณ ตามโค๊ดตัวอย่างด้านล่าง
nivo-slider

<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

หากคุณมี jquery.min.js อยู่แล้วคุณไม่จำเป็นต้อง include จาก googleapis.com คุณสามารถ include จากไฟล์ที่มีอยู่แล้วได้โดยไฟล์ jQuery ต้องมีเวอร์ชั่น 1.7 หรือมากว่าขึ้นไป

การใช้งาน
1. ติดตั้งสคริปต์ javascript ไว้ใน <head>

<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider({
pauseTime: 10000
});
});
</script>

2. เพิ่ม html รูปภาพ

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<a href="https://www.itoffside.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
</div>

แล้วจะได้ผลลัพธ์ตามรูปภาพด้านล่าง
slide_jquery

สำหรับบทความนี้เป็นเพียงตัวอย่างการใช้งานง่ายๆ สำหรับรูปภาพ slide สวยๆหวังว่าคงเป็นประโยชน์สำหรับหลายๆคน ถ้าหากมีคำถาม comment ด้านล่างได้เลยครับ

The post รูปภาพสไลด์ด้วย Nivo Slider jQuery Plugin first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

]]> https://www.itoffside.com/nivo-slider-jquery-plugin/feed/ 0