[jQuery] มาเรียน jQuery แบบฟรี ๆ กัน

ทาง Tutsplus เปิดรายการสอนฟรีอีกแล้ว คราวนี้เป็นตาของ jQuery บ้าง ซึ่งการสมัครเรียนไม่ยากเลย ก็แค่กรอก Email ลงไป แล้วในทุก ๆ วันจะมี Email ส่งบทเรียนมาให้เราเรียน ว่าแล้วอย่ารอช้า ไปสมัครกันเลยดีกว่า

ตาม Link นี้ไปเลยครับ Learn jQuery in 30 Days

อยากเรียน Web Design ฟรี ดูใน iTunes ดิ

ใน iTunes นั้นจะมีส่วนของ Podcasts ซึ่งมีหลายเรื่องที่เราสนใจไว้ให้ได้ดู ได้ฟังแบบฟรีบ้าง เสียเงินบ้าง แต่เรามาหาแบบฟรีกันดีกว่า ลองไปดูว่ามีอันไหนบ้าง

Think Vitamin Radio

View in iTunes : Think Vitamin Radio

Web Designer Podcast

View in iTunes : Web Designer Podcast

Web Design TV

View in iTunes : Web Design TV

Sitepoint

View in iTunes : Sitepoint

This Week in Photography

View in iTunes : This Week in Photography

Web Design Tuts+

View in iTunes : Web Design Tuts+

Photoshop Webdesign.de

View in iTunes : Photoshop Webdesign.de

WebDevDesign

View in iTunes : WebDevDesign

Freelance Radio

View in iTunes : Freelance Radio

Mac Tips and Tricks

View in iTunes : Mac Tips and Tricks

MailChimp Academy

View in iTunes : MailChimp Academy

37signals Podcast

View in iTunes : 37signals Podcast

AppClinic – graphic design tutorials

View in iTunes : AppClinic – graphic design tutorials

Founders Talk

View in iTunes : Founders Talk

Web Design 101

View in iTunes : Web Design 101

CreativeXpert Design Interviews

View in iTunes : CreativeXpert Design Interviews

Voices of Design

View in iTunes : Voices of Design

Xcode Quick Tips

View in iTunes : Xcode Quick Tips

jQuery for Designers

View in iTunes : jQuery for Designers

Facebook 101

View in iTunes : Facebook 101

CSS-Tricks Screencast

View in iTunes : CSS-Tricks Screencast

Pragmatic Podcasts

View in iTunes : Pragmatic Podcasts

[jQuery] Cheat Sheet สำหรับ jQuery 1.7

ทางเว็บ Woorkup ได้ทำ Cheat Sheet ตัวนี้ขึ้นมา เลยเอามาแบ่งปันให้ได้นำไปใช้กันนะครับ ดาวน์โหลดเป็นไฟล์ PDF ไปได้เลยครับ

[jQuery] Cheat Sheet สำหรับ jQuery 1.7
คลิ๊กที่รูปเพื่อขยาย
ดาวน์โหลดไฟล์ PDF : jQuery 1.7 Visual Cheat Sheet

หรือจะไปดูที่เว็บเจ้าของได้เลยครับ

เว็บต้นฉบับ : jQuery 1.7 Visual Cheat Sheet

PhotoSwipe : Image Gallery ใช้กับ Touch Screen

วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

PhotoSwipe

ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

What is it?

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Who is it for?

Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.

Why use it?

PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

ใช้กับมือถือ platform ไหนได้บ้าง

PhotoSwipe : Image Gallery สำหรับ Touch Screeen [1]

สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

วิธีการใช้งาน PhotoSwipe

ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

[html]
<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
[/html]

และเรียกใช้งานโดย

[javascript]
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener(‘DOMContentLoaded’, function(){

var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll(‘#Gallery a’), { enableMouseWheel: false , enableKeyboard: false } );

}, false);
[/javascript]

แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

[javascript]
//jQuery version
$(document).ready(function(){

var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});
[/javascript]

และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

[html]
<ul id="Gallery">
<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>
[/html]

ซึ่งตัว PhotoSwipe นั้น เราสามารถจะปรับแต่งลูกเล่นมันได้หลากหลายพอสมควร รายละเอียดเพิ่มเติมและตัวอย่างการใช้งาน PhotoSwipe นั้น ให้ไปดูที่เว็บของ PhotoSwipe เลยครับ

ที่มา : PhotoSwipe

jQuery : Plugins ที่ใช้สำหรับแต่ง Checkbox และ Radio Button

จากหลาย ๆ ครั้งที่ได้รับงานมา ตัวเว็บที่ design จะมีการปรับเปลี่ยนลักษณะของตัว form ไปในรูปแบบต่าง ๆ ซึ่ง jQuery ก็มี Plugins อยู่หลายตัวที่สามารถช่วยในการปรับเปลี่ยนได้

jQuery : Plugins

คลิ๊กตามไปดู