วันนี้เราจะมาดูกัน ปลั๊กอิน jQuery Flipping Gallery ซึ่งช่วยให้คุณสามารถสร้างแกลเลอรีภาพเจ๋งๆ พร้อมการเปลี่ยนภาพแบบดั้งเดิมได้ ในตัวอย่างมีการเปลี่ยน 5 ประเภทโดยใช้ปลั๊กอินนี้ ปลั๊กอินนี้ใช้งานง่ายมาก ดังนั้นใครๆ ก็สามารถใช้งานได้อย่างเต็มที่

สามารถดูตัวอย่างได้ที่นี่:

ดาวน์โหลด

เราจะดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีสร้างเมนูจากการสาธิต 2 โดยเมนูจะปรากฏที่ด้านซ้ายบน

ส่วน HTML

ขั้นแรก คุณต้องเชื่อมต่อไลบรารี jQuery ซึ่งคุณสามารถดาวน์โหลดได้ และปลั๊กอิน Flipping Gallery ระหว่างแท็กต่างๆ :

จากนั้นเราก็จัดเรียงภาพ คุณสามารถเพิ่มรูปภาพได้มากเท่าที่คุณต้องการ:

1 2 3 4 5 6 7 8

<คลาส div = "แกลเลอรี" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

และหากต้องการเพิ่มคำอธิบายสำหรับรูปภาพ (เช่นในการสาธิต 4 และ 5) คุณต้องใช้แอตทริบิวต์ ข้อมูลคำอธิบายภาพ:

1 2 3 4 5 6 7 8

<คลาส div = "แกลเลอรี" > <a href = "#" data-caption = "มาก" > <a href = "#" data-caption = "เจ๋ง" > <a href = "#" data-caption = "แกลเลอรี" > <a href = "#" data-caption = "ใช้" > <a href = "#" data-caption = "พลิก" > ... </div>

ส่วนเจเอส

มาดูกันว่าแต่ละวิธีหมายถึงอะไร:

• ทิศทาง— วิธีการที่รับผิดชอบว่าภาพจะปรากฏอย่างไร หาก "ไปข้างหน้า" รูปภาพจากจุดเริ่มต้นจะถูกวางไว้ที่ส่วนท้ายหาก "ย้อนกลับ" - ในทางกลับกัน ค่าเริ่มต้นคือ "ไปข้างหน้า"
• ตัวเลือก— ตัวเลือกที่เราเลือกรูปภาพ สามารถเปลี่ยนได้ตามต้องการ
• ระยะห่าง— กำหนดระยะห่างระหว่างภาพในเปอร์สเปคทีฟ
• แสดงสูงสุด— กำหนดจำนวนภาพที่ผู้ใช้มองเห็นได้ คุณสามารถใช้รูปภาพได้อย่างน้อย 100 ภาพ แต่จะแสดงเฉพาะ 15 ภาพแรก ซึ่งสะดวกมากและไม่โหลดเบราว์เซอร์
• เปิดใช้งานScroll- คุณสามารถดูภาพโดยใช้ล้อเลื่อนของเมาส์
• พลิกทิศทาง— กำหนดตำแหน่งที่จะเลื่อนรูปภาพ: "ซ้าย" - ซ้าย, "ขวา" - ขวา, "บน" - ขึ้นและ "ล่าง" - ลง โดยค่าเริ่มต้นจะเลื่อนลง
• เล่นอัตโนมัติ- แกลเลอรีเริ่มอัตโนมัติ ระบุเป็นมิลลิวินาที เช่น จะต้องใช้เวลานานเท่าใดในการเปลี่ยนภาพ?

บทสรุป

ขณะนี้คุณมีแกลเลอรีที่สวยงามเพื่อใช้ในการโพสต์รูปภาพของคุณ

1. แกลเลอรี jQuery พร้อมเอฟเฟกต์การเปลี่ยนหน้า

โซลูชันที่คล้ายกันสามารถใช้เพื่อแสดงบทความบล็อกล่าสุดหรือนำเสนอผลิตภัณฑ์ได้

วิธีพิเศษในการแสดงภาพถ่ายของคุณในแกลเลอรี jQuery สุดเก๋

3. แกลเลอรีรูปภาพ jQuery สำหรับผลิตภัณฑ์ ปลั๊กอิน “slideJS”

ปลั๊กอิน jQuery เหมาะอย่างยิ่งสำหรับการใช้งานหน้าผลิตภัณฑ์ที่มีหลายภาพ การเปลี่ยนระหว่างรูปภาพสามารถทำได้โดยใช้ภาพขนาดย่อหรือใช้ลูกศรนำทาง

รูปภาพจะขยายเมื่อคุณวางเมาส์ไว้เหนือรูปภาพ

5. แกลเลอรีไลท์บ็อกซ์ที่หรูหรา “ppGallery”

6. jQuery Touch-แกลเลอรี

7. แกลเลอรี jQuery ใหม่พร้อมภาพขนาดย่อ

แกลเลอรี่ jQuery มืออาชีพของปี 2011

8. ปลั๊กอิน jQuery “Nivo Zoom”

ปลั๊กอิน jQuery คุณภาพสูงอีกตัวจากผู้พัฒนาแถบเลื่อน Nivo ขยายภาพโดยคลิกที่ภาพขนาดย่อ

9. แกลเลอรีผนัง 3 มิติ jQuery

แกลเลอรี jQuery ใหม่สำหรับปี 2011 การป้อนรูปภาพจะครอบคลุมความกว้างทั้งหมดของหน้าจอ คุณสามารถนำทางระหว่างรูปภาพได้สามวิธี: ใช้ล้อเลื่อนของเมาส์ การเลื่อนที่ด้านบนของแกลเลอรี และใช้บล็อกภาพขนาดย่อที่ด้านล่าง แกลเลอรี่ดูน่าประทับใจมาก

รูปภาพในแกลเลอรีจะถูกขยายและย่อขนาดแบบสุ่มอีกครั้งเพื่อสร้างเอฟเฟกต์ฟองอากาศ

11. การแสดงภาพที่ผิดปกติในแกลเลอรี jQuery

เมื่อใช้แถบเลื่อนที่ด้านบน คุณสามารถเปลี่ยนระยะห่างระหว่างรูปภาพในกลุ่มได้ เมื่อคุณคลิกที่ภาพ มันจะหมุน

12. ปลั๊กอินแกลเลอรี jQuery “MB.Gallery”

13. แกลเลอรี jQuery ที่ขยายจนเต็มหน้าจอ

ปลั๊กอินจากปี 2011 แกลเลอรีใหม่พร้อมคำอธิบายรูปภาพที่ขยายครอบคลุมพื้นที่ทั้งหมดของหน้าต่างเบราว์เซอร์ โดยไม่คำนึงถึงขนาด ภาพขนาดย่อของภาพได้รับการติดตั้งอย่างน่าสนใจ การเปลี่ยนระหว่างภาพถ่ายทำได้โดยใช้ลูกศรใกล้กับภาพขนาดย่อและใช้ล้อเลื่อนของเมาส์

14. แกลเลอรี jQuery น้ำหนักเบา

ปลั๊กอินจะสแกนโฟลเดอร์โดยอัตโนมัติและสร้างสำเนารูปภาพขนาดเล็ก

16. แกลเลอรีมีสไตล์โดยใช้ไลบรารี jQuery และ Raphael

เอฟเฟกต์ที่น่าสนใจเมื่อวางเมาส์ไว้เหนือภาพขนาดย่อ

17. ปลั๊กอิน jQuery เวอร์ชันใหม่ “Supersize” เวอร์ชัน 3.1

เมื่อเร็ว ๆ นี้ฉันได้กล่าวถึงโซลูชัน jQuery นี้สำหรับการสร้างแกลเลอรีแบบเต็มหน้าจอแล้ว วันนี้ฉันอยากจะแนะนำคุณ เวอร์ชันล่าสุดปลั๊กอินมืออาชีพนี้ สคริปต์ได้รับการเขียนใหม่ทั้งหมด ขณะนี้แกลเลอรีทำงานได้เร็วยิ่งขึ้น และมีการเพิ่มการตั้งค่าที่น่าสนใจบางอย่าง เช่น การนำทางโดยใช้แป้นพิมพ์ ความเร็วที่เปลี่ยนแปลงได้ในการเปลี่ยนรูปภาพ ขนาดหน้าจอ และอื่นๆ

18. ปลั๊กอิน jQuery “แกลเลอเรีย 1.2.2”

แกลเลอรี jQuery ใหม่สำหรับโครงการของคุณ

แกลเลอรีจะปรากฏขึ้นบนหน้าเมื่อคุณกดปุ่ม ภาพขนาดย่อจะปรากฏรอบๆ ภาพที่ขยายใหญ่ คุณสามารถควบคุมการเปลี่ยนภาพอัตโนมัติได้ เทคโนโลยีที่ใช้: jQuery, CSS, PHP

20. ปลั๊กอิน “Timer Gallery”

แกลเลอรี่ jQuery ใช้การเปลี่ยนสไลด์และการเลื่อนภาพขนาดย่อโดยอัตโนมัติหากมีมากเกินไป

ปลั๊กอินแกลเลอรีรูปภาพโดยใช้ jQuery

22. แกลเลอรี่ javascript สำหรับการดูบนอุปกรณ์มือถือ “PhotoSwipe”

แกลเลอรี่ภาพที่ปรับให้เหมาะสมสำหรับการดูบนอุปกรณ์มือถือ (โทรศัพท์หรือแท็บเล็ต)

23. แกลเลอรีจาวาสคริปต์พร้อมเอฟเฟกต์ 3 มิติ

24. แกลเลอรีการปรับเปลี่ยน jQuery

ใหม่ แถบเลื่อน jQuery- เอฟเฟกต์ภาพเคลื่อนไหวสุดเจ๋งมากมายเมื่อเปลี่ยนสไลด์

25. ปลั๊กอิน jQuery “แกลเลอเรีย 1.2.3”

26. แกลเลอรี่ภาพ jQuery “กำแพงรูปภาพ”

แกลเลอรีดั้งเดิมในรูปแบบของภาพย่อที่กระจัดกระจายไปทั่วหน้าจอ ขนาดต่างๆเก๋เหมือนภาพวาด เมื่อคุณคลิกที่ภาพขนาดย่อ พื้นที่ที่มีคำอธิบายของภาพจะปรากฏขึ้น และเมื่อคุณคลิกอีกครั้ง รูปภาพต้นฉบับขนาดใหญ่จะแสดงขึ้นมา

27. แกลเลอรี CSS3

เอฟเฟกต์โฮเวอร์ที่น่าสนใจ

28. แกลเลอรีพร้อมภาพจำลอง “TN3 Gallery”

แกลเลอรี่ jQyery พร้อมภาพขนาดย่อ ความสามารถในการดูในหน้าต่างขนาดกะทัดรัดและในหน้าต่างแบบเต็มหน้าจอได้ถูกนำมาใช้แล้ว เช่นเดียวกับความสามารถในการปิด/เปิดใช้งานการเปลี่ยนสไลด์อัตโนมัติ

29. ตารางรูปภาพ “Grid-Gallery”

ตารางรูปภาพจะขยายออกขึ้นอยู่กับความกว้างของหน้าต่างเบราว์เซอร์ เอฟเฟกต์โฮเวอร์ที่น่าสนใจ: แถวและคอลัมน์ที่ใช้งานอยู่จะถูกเน้น

30. แกลเลอรี่สลับ jQuery

แกลเลอรี jQuery น้ำหนักเบาในโค้ดไม่กี่บรรทัด

หน้าสาธิตมีตัวเลือกมากมายสำหรับเมนูเด่นแบบเลื่อนลงในสไตล์ที่แตกต่างกัน ในเมนูนี้ คุณสามารถกำหนดค่า: เอฟเฟกต์การเลื่อนออก ความเร็วการเลื่อนออก และเลือกระหว่างการเลื่อนออกด้วยการคลิกหรือเลื่อนเมาส์ไว้เหนือรายการ

31. แกลเลอรีรูปภาพ jQuery

แกลเลอรี jQuery พร้อมคำบรรยายภาพ เอฟเฟกต์การเปลี่ยนสไลด์หลายแบบ การนำทางระหว่างรูปภาพทำได้โดยใช้ลูกศรหรือคลิกที่ภาพขนาดย่อ

ภาพและภาพย่อถูกสร้างขึ้นในรูปแบบของวงกลม

33. ปลั๊กอินผลงานของช่างภาพ jQuery “Portfolio Image Navigation”

โซลูชันจาวาสคริปต์ดั้งเดิมสำหรับการออกแบบผลงานของช่างภาพ การนำทางระหว่างรูปภาพทำได้โดยใช้ลูกศรขึ้น/ซ้าย/ขวา และใช้มินิสแควร์ (การจำลองการเคลื่อนไหวในพื้นที่ 2D) คุณสามารถจัดกลุ่มรูปภาพจากเซสชันรูปภาพต่างๆ ออกเป็นแถวแนวตั้งต่างๆ และเลื่อนดูรูปภาพเหล่านั้นได้โดยใช้องค์ประกอบการนำทาง ชมการสาธิต

34. ปลั๊กอิน “jmFullZoom”

ปลั๊กอินสำหรับการดูภาพที่ขยายจนเต็มขนาดหน้าต่างเบราว์เซอร์ สามารถใช้แสดงผลงานจากแฟ้มสะสมผลงานได้

35. การ์ดรูปถ่าย

แกลเลอรี่บูรณาการกับ แผนที่กูเกิล- คุณสามารถขยายให้เต็มหน้าจอได้โดยคลิกที่ไอคอนที่มุมขวาล่าง เหมาะสำหรับเว็บไซต์ท่องเที่ยว

36. แกลเลอรี่ภาพพร้อมภาพขนาดย่อ

แกลเลอรี jQuery พร้อมภาพขนาดย่อ

37. แกลเลอรี jQuery “Galleriffic”

สไลด์โชว์พร้อมภาพขนาดย่อ

38. ปลั๊กอิน jQuery CSS3 “เอฟเฟกต์การแสดงคลื่น”

การนำเสนอภาพและเนื้อหาบนหน้าเหมือนคลื่น เมื่อคุณคลิกที่ภาพขนาดย่อ รูปภาพทั้งหมดจะถูกขยายและชื่อจะปรากฏขึ้น เมื่อคุณกดอีกครั้ง บล็อกที่มีคำอธิบายรูปภาพจะเปิดขึ้น

ตัวเลือกการแสดงผลและการตั้งค่ามากมาย

42. บล็อกเกอร์

43. แกลเลอรีที่เรียบง่ายและน่ารักที่สร้างด้วย CSS โดยไม่ต้องใช้สคริปต์

ดูสวยงามและใช้งานได้ดีในทุกด้าน เบราว์เซอร์ที่ทันสมัย

คุณสามารถควบคุมการแสดงสไลด์อัตโนมัติ (เริ่ม/หยุด) สลับสไลด์โดยใช้ลูกศรบนแป้นพิมพ์ การแบ่งหน้าชื่อสไลด์โดยอัตโนมัติหากมีหลายรายการ รองรับแกลเลอรีหลายรายการในหน้าเดียว คำอธิบายภาพสำหรับสไลด์ รองรับ API และความสามารถในการสร้างของคุณเอง เอฟเฟกต์การเปลี่ยนสไลด์

46. ​​​​แกลเลอรี่ในรูปแบบของกองภาพถ่าย

นี่คือลักษณะผลลัพธ์ของแกลเลอรีที่เราจะสร้าง คุณสามารถดูการสาธิตและดาวน์โหลดผลลัพธ์สุดท้ายของแกลเลอรีหากต้องการ

สวัสดีทุกคน!
นักพัฒนาซอฟต์แวร์ all stripes เมื่อสร้างโปรเจ็กต์เว็บถัดไป มักจะสนใจคำถามว่าจะนำเสนอรูปภาพประเภทต่างๆ แก่ผู้ใช้ได้อย่างไร ไม่ว่าจะเป็นรูปถ่ายหรือชุดรูปภาพ ด้วยเหตุนี้ ผู้ที่มีความคิดอยากรู้อยากเห็นในพื้นที่ออนไลน์ โดยส่วนใหญ่แล้วนี่คือพื้นที่ "ชนชั้นกลาง" กำลังมองหาโซลูชันใหม่ๆ มากขึ้นเรื่อยๆ เพื่อสร้างสไลด์โชว์และแกลเลอรีรูปภาพที่น่าตื่นตาตื่นใจ มีสีสัน และใช้งานได้จริงที่สำคัญที่สุด โดยส่วนใหญ่ นักพัฒนาจะปรับแต่งให้เหมาะสมกับการออกแบบเทมเพลตของโครงการเว็บที่ถูกสร้างขึ้น หรือในรูปแบบของปลั๊กอินและโมดูลสำหรับกลไกการจัดการไซต์เฉพาะ การดูเทมเพลตสมัยใหม่นั้นคุ้มค่าที่จะดู โดยไม่ต้องใช้ธีมเดียวและมีข้อยกเว้นที่หายาก ซึ่งสามารถทำได้โดยไม่ต้องใช้ตัวเลื่อนปลั๊กอินหรือตัวหมุนรูปภาพแบบธรรมดา ดังนั้นจึงเป็นที่เข้าใจได้ว่านักพัฒนาเว็บจำนวนมากต้องการให้มีสิ่งนี้อยู่ในคลังแสงและทำให้ผู้อ่านประหลาดใจอย่างเต็มที่ด้วยการนำเสนอภาพบนเว็บไซต์ของตนอย่างมีประสิทธิภาพ

จากการทบทวนอย่างต่อเนื่องเกี่ยวกับโซลูชันใหม่ที่เกิดขึ้นในขณะที่สร้าง ฉันตัดสินใจที่จะรวบรวมคอลเลกชันสไลด์โชว์และแกลเลอรีรูปภาพที่น่าสนใจและมีประสิทธิภาพที่สุดที่ฉันเคยพบมาทั้งหมด ซึ่งสร้างขึ้นโดยใช้ความมหัศจรรย์ของ jQuery
ฉันขอเตือนคุณทันทีว่าแหล่งข้อมูลที่กล่าวถึงในการทบทวนนี้อิงตามเป็นหลัก ภาษาอังกฤษแต่ฉันคิดว่าใครก็ตามที่ต้องการมันจะเข้าใจมันโดยสัญชาตญาณหรือด้วยความช่วยเหลือจากนักแปลซึ่งมีค่าใช้จ่ายเล็กน้อย และหากคุณค้นหาอย่างหนักเพียงพอ คุณจะพบคำอธิบายเกี่ยวกับเทคนิคในการสร้างแกลเลอรีและแถบเลื่อนในภาษารัสเซีย เนื่องจากนักพัฒนาเว็บของเราหลายคนแปลในขณะที่ทำงานในโครงการใดโครงการหนึ่งก่อนอื่นเพื่อตัวพวกเขาเอง จากนั้นจึงโพสต์คำอธิบายโดยละเอียดของการยักย้ายทั้งหมดของพวกเขา สำหรับการเข้าถึงฟรี
ตัวอย่างเช่นนี่คือสิ่งที่ฉันทำเมื่อฉันทำงานเกี่ยวกับกลไกในการสร้าง ฉันพบตัวเลือกแกลเลอรีที่เหมาะกับฉันเป็นครั้งแรกใน burzhunet แปลเพื่อให้เข้าใจดีขึ้นเกี่ยวกับสิ่งที่ฉันกำลังทำอยู่และในอนาคต ฉันหวังว่าจะไม่ใช่บทความที่ไม่ดีเกี่ยวกับการใช้สคริปต์ Highslide พร้อมตัวอย่างงานในรูปแบบแอปพลิเคชันต่างๆ
เนื้อเพลงที่ไม่จำเป็นเพียงพอแล้ว เรามาดูบทวิจารณ์ ดู อ่านคำอธิบายสั้น ๆ และเลือกปลั๊กอินและสคริปต์ jQuery ใหม่จำนวนมากสำหรับการใช้แถบเลื่อนรูปภาพ แกลเลอรีรูปภาพ การแสดงสไลด์บนไซต์ของคุณที่น่าสนใจ: ด้วย แถบเลื่อนเปลี่ยนอัตโนมัติและด้วยตนเอง แถบเลื่อนภาพพื้นหลัง มีและไม่มีภาพขนาดย่อ ฯลฯ ฯลฯ...

ของ.ไซต์ | สาธิต

แกลเลอรี่เต็มรูปแบบที่ปรับแต่งได้ ภาพ jQueryพร้อมด้วยองค์ประกอบการนำเสนอภาพนิ่ง เอฟเฟ็กต์การเปลี่ยนภาพ และตัวเลือกอัลบั้มต่างๆ เข้ากันได้กับเบราว์เซอร์เดสก์ท็อปและมือถือที่ทันสมัยทั้งหมด

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

ตัวเลื่อนพารัลแลกซ์

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

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

นี่คือสไลด์โชว์แบบเต็มหน้าจอพร้อมรูปภาพที่เปลี่ยนโดยอัตโนมัติ ไม่มีเอฟเฟกต์ที่น่าตื่นตาตื่นใจ ทุกอย่างเรียบง่ายและมีรสนิยม

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

เป็นปลั๊กอิน jQuery ขนาดเล็ก (2kb) ที่ให้วิธีง่ายๆ ในการแสดงภาพเป็นสไลด์โชว์

เป็นแกลเลอรีจาวาสคริปต์ที่ดูดี พร้อมด้วยการควบคุมที่ใช้งานง่ายและความเข้ากันได้อย่างราบรื่นบนคอมพิวเตอร์ iPhone และอุปกรณ์มือถือทุกเครื่อง ง่ายมากในการติดตั้งและกำหนดค่า

Slider.js แตกต่างจากแถบเลื่อนรูปภาพ Javascript และ jQuery ตรงที่เป็นโซลูชันแบบไฮบริด ซึ่งขับเคลื่อนโดยการเปลี่ยนภาพและภาพเคลื่อนไหว CSS3

นี่คือเทมเพลตหน้าเดียวสำหรับสร้างงานนำเสนอต่างๆ ใน ​​HTML5 และ CSS3

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

ไม่มีอะไรมากไปกว่าเครื่องมืออื่นสำหรับการสร้างสไลด์โชว์บนเว็บไซต์และโครงการเว็บอื่น ๆ รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด ภาพเคลื่อนไหวแนวนอนและแนวตั้ง รองรับการเปลี่ยนภาพแบบกำหนดเอง Callback API และอื่นๆ อีกมากมาย คุณสามารถใช้อะไรก็ได้ องค์ประกอบ HTMLในสไลด์ เข้าใจง่ายและเข้าถึงได้สำหรับผู้เริ่มต้น แจกฟรีไม่มีค่าใช้จ่าย

สไลด์โชว์ JavaScript สำหรับการพัฒนาแบบ Agile

ใช้สไลด์โชว์ของคุณด้วยปลั๊กอิน jQuery ที่ยอดเยี่ยมนี้ เครื่องมือที่ปรับแต่งได้สูงเพื่อให้คุณสามารถสร้างการนำเสนอเนื้อหาได้ตามความต้องการของคุณ เพื่อให้การรวมเข้ากับข้อมูลภายนอกหรือข้อมูลจาก CMS ของคุณง่ายขึ้น ระบบจึงใช้รูปแบบข้อมูล นี้ เวอร์ชันใหม่และเขียนตั้งแต่เริ่มต้น นักพัฒนาพยายามที่จะอธิบายกระบวนการทั้งหมดในการทำงานกับผลิตผลของพวกเขาอย่างชัดเจนและชาญฉลาด

เป็นปลั๊กอิน jQuery ที่ให้คุณแปลงรายการที่ไม่เรียงลำดับให้เป็นสไลด์โชว์พร้อมเอฟเฟกต์แอนิเมชั่นที่น่าสนใจ ในการนำเสนอสไลด์ คุณสามารถแสดงรายการสไลด์โดยใช้ตัวเลขหรือรูปขนาดย่อ หรือใช้ปุ่มก่อนหน้าและถัดไป แถบเลื่อนมีแอนิเมชันดั้งเดิมหลายประเภท รวมถึงคิวบ์ (ที่มีประเภทย่อยต่างๆ) ไปป์ บล็อก และอื่นๆ

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

นี่คือปลั๊กอินสไลด์โชว์ jQuery ที่สร้างขึ้นโดยคำนึงถึงความเรียบง่าย มีเพียงชุดฟังก์ชันที่มีประโยชน์ที่สุดเท่านั้นที่อัดแน่นทั้งสำหรับผู้เริ่มต้นและนักพัฒนาขั้นสูง ซึ่งให้โอกาสในการสร้างสไลด์โชว์ที่เรียบง่าย แต่ในขณะเดียวกันก็มีประสิทธิภาพมากซึ่งใช้งานง่าย

— แถบเลื่อนธรรมดาที่สร้างบน jQuery เรียบง่ายทุกประการ ไม่ต้องใช้ทักษะพิเศษ ฉันคิดว่าหลายๆ คนจะพบว่ามีประโยชน์สำหรับการนำการนำเสนอภาพนิ่งไปใช้บนเว็บไซต์ของตน ปลั๊กอินได้รับการทดสอบในเบราว์เซอร์รุ่นใหม่ทั้งหมด รวมถึงเบราว์เซอร์ IE ที่ช้าด้วย

เจบีแกลเลอรี่เป็นวิดเจ็ตอินเทอร์เฟซผู้ใช้ชนิดหนึ่งที่เขียนด้วยจาวาสคริปต์ของไลบรารี jQuery หน้าที่ของมันคือการแสดงภาพขนาดใหญ่หนึ่งภาพเป็นพื้นหลังของไซต์ในโหมดเต็มหน้าจอ หลายภาพในรูปแบบแถบเลื่อน โหมดการรับชมทั้งหมดมีการควบคุมการรับชม เป็นโซลูชันที่น่าสนใจในแบบของตัวเอง และในบางกรณีก็ไม่ได้มาตรฐานด้วยซ้ำ

เป็นเรื่องง่ายที่จะ โดยใช้ jQueryปลั๊กอินสำหรับแสดงภาพถ่ายของคุณในรูปแบบของสไลด์โชว์พร้อมเอฟเฟกต์การเปลี่ยนระหว่างรูปภาพ (เราเคยเห็นสิ่งที่น่าสนใจมากกว่านี้) jqFancyTransitions เข้ากันได้และทดสอบอย่างกว้างขวางกับ Safari 2+ อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 6+, ไฟร์ฟอกซ์ 2+, กูเกิลโครม 3+, โอเปร่า 9+

เป็นปลั๊กอิน jQuery ที่เผยแพร่อย่างอิสระสำหรับการดูภาพและข้อมูลอื่น ๆ ในรูปแบบไลท์บ็อกซ์ หน้าต่างป๊อปอัปพร้อมส่วนควบคุม พื้นหลังแบบแรเงา และอื่นๆ อีกมากมาย เรียบง่ายและมีรสนิยม

ปลั๊กอิน jQuery อื่นจากซีรีส์ Lightbox แม้ว่าจะมีน้ำหนักเพียงเล็กน้อย (9 KB) แต่ก็มีฟังก์ชันการทำงานมากมาย มีอินเทอร์เฟซที่ออกแบบมาอย่างเหมาะสมซึ่งคุณสามารถปรับปรุงหรือปรับแต่งได้โดยใช้ CSS

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

ตัวหมุนภาพด้วย ประเภทต่างๆการเปลี่ยนภาพ ทำงานเหมือนใน โหมดอัตโนมัติและการคลิกก็กำหนดค่าได้ง่ายมาก

— แกลเลอรีรูปภาพที่ครบครัน ไม่ใช่แค่เพียงแถบเลื่อน การแสดงตัวอย่างภาพขนาดย่อและความสามารถในการเลือกเอฟเฟ็กต์การเปลี่ยนแปลง การสนับสนุนอย่างเต็มที่สำหรับเบราว์เซอร์ทั้งหมด คำอธิบายโดยละเอียดของการผสานรวมเข้ากับโครงการเว็บ และการแจกจ่ายฟรี

นี่คือการนำสไลด์โชว์ที่พร้อมใช้งานโดยใช้ scriptaculous/prototype หรือ jQuery Horinaja ค่อนข้างเป็นโซลูชันที่เป็นนวัตกรรมใหม่เนื่องจากช่วยให้คุณใช้วงล้อเพื่อเลื่อนดูเนื้อหาที่อยู่ในแถบเลื่อนได้ เมื่อตัวชี้เมาส์อยู่นอกพื้นที่สไลด์โชว์ การเลื่อนจะเกิดขึ้นโดยอัตโนมัติ เมื่อวางตัวชี้ไว้เหนือสไลด์โชว์ การเลื่อนจะหยุดลง

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

s3สไลเดอร์เป็นปลั๊กอิน jQuery ที่สร้างสไลด์โชว์จากรายการรูปภาพที่ไม่เรียงลำดับและสามารถนำไปใช้งานได้อย่างง่ายดายบนแพลตฟอร์มเว็บใดก็ได้

นี่คือปลั๊กอิน jQuery ที่ได้รับการปรับให้เหมาะสมสำหรับการประมวลผลรูปภาพจำนวนมากเมื่อทำการบันทึก แบนด์วิธ.

พื้นหลังสเวกัส

ปลั๊กอิน jQuery ของ Vegas Background ช่วยให้คุณสามารถเพิ่มภาพพื้นหลังแบบเต็มหน้าจอที่สวยงามให้กับหน้าเว็บได้ ทั้งหมดนี้มีองค์ประกอบสไลด์โชว์ หากคุณศึกษาความซับซ้อนของการทำงานกับปลั๊กอินอย่างละเอียดคุณจะพบวิธีแก้ปัญหาที่น่าสนใจมากมายแน่นอนเฉพาะในกรณีที่คุณต้องการเท่านั้น

— แถบเลื่อนเป็นแถบเลื่อน ไม่มาก ไม่น้อย พร้อมคำบรรยายภาพหรือประกาศบทความและการควบคุมแบบง่ายๆ โดยการสุ่ม

เป็นจาวาสคริปต์น้ำหนักเบา (ประมาณ 5 KB) สำหรับการจัดระเบียบการดูภาพ การปรับขนาดและปรับขนาดรูปภาพขนาดใหญ่อัตโนมัติช่วยให้คุณสามารถดูภาพขนาดเต็มได้ภายในหน้าต่างเบราว์เซอร์

PikaChoose jQuery Image Gallery เวอร์ชัน 4 พร้อมใช้งานแล้ว! Pikachoose เป็นสไลด์โชว์ jQuery น้ำหนักเบาพร้อมฟีเจอร์ที่ยอดเยี่ยม! การผสานรวมกับ Fancybox ธีมที่ยอดเยี่ยม (แต่ไม่ฟรี) และอีกมากมายที่นักพัฒนาปลั๊กอินนำเสนอให้คุณสนใจ

ตรวจสอบจำนวนภาพในรายการของคุณและสร้างชุดลิงก์รูปภาพแบบไดนามิกเป็นการนำทางแบบดิจิทัล นอกจากนี้ การคลิกที่ภาพแต่ละภาพจะเลื่อนไปข้างหน้าหรือข้างหลัง และคุณยังสามารถเลื่อนดูภาพต่างๆ ได้อีกด้วย ขึ้นอยู่กับพื้นที่ที่คุณคลิกภาพ (เช่น การคลิกทางด้านซ้ายของภาพจะเป็นการเลื่อนสไลด์ไปมา ตามลำดับทางด้านขวาของภาพ)

แถบเลื่อน jQuery อื่นที่ลงตัวกับเทมเพลต WordPress ใด ๆ

การพัฒนาอีกอย่างของ “Nivo” เช่นเดียวกับทุกสิ่งที่ทีมงานจากสตูดิโอนี้ทำ ปลั๊กอินนี้สร้างมาด้วยคุณภาพสูง ประกอบด้วยเอฟเฟกต์การเปลี่ยนภาพที่ไม่ซ้ำกัน 16 แบบ การนำทางด้วยแป้นพิมพ์ และอื่นๆ อีกมากมาย เวอร์ชันนี้มีปลั๊กอินเฉพาะสำหรับ WordPress โดยตรง ดังนั้นสำหรับแฟน ๆ ทุกคนของเครื่องมือสร้างบล็อกนี้ Nivo Slider จะเหมาะกับคุณ

ปลั๊กอิน jQuery ที่ช่วยให้คุณสามารถสร้างแถบเลื่อนที่เรียบง่าย มีประสิทธิภาพ และสวยงามสำหรับรูปภาพทุกขนาดได้อย่างรวดเร็ว

ไพโรบ็อกซ์เป็นสคริปต์ "ไลท์บ็อกซ์" ของ jQuery ที่มีน้ำหนักเบา การดูจะดำเนินการในบล็อกป๊อปอัปที่จะปรับขนาดของรูปภาพโดยอัตโนมัติพร้อมการควบคุมทั้งหมด

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

สไลด์โชว์แบบเต็มหน้าจอด้วย HTML5 และ jQuery

ในการสร้างสไลด์โชว์และแสดงรูปภาพในโหมดเต็มหน้าจอ นักพัฒนาได้ใช้ปลั๊กอิน Vegas jQuery ที่คุ้นเคยอยู่แล้ว ซึ่งมีแนวคิดและเทคนิคมากมายที่อธิบายไว้โดยละเอียดในบทความของกลุ่มก่อนหน้านี้ การมีอยู่ขององค์ประกอบเสียง HTML5 และสไตล์การเปลี่ยนระหว่างรูปภาพนั้นน่าดึงดูด

การพัฒนาอีกอย่างหนึ่งจากทีม Codrops ซึ่งเป็นแกลเลอรีรูปภาพที่ครบครันและใช้งานได้จริง อย่างไรก็ตาม ไม่มีประโยชน์ที่จะอธิบาย คุณต้องดูมันก่อน

สไลด์โชว์รูปภาพ รูปภาพจะหายไปต่อหน้าต่อตาคุณ เอฟเฟกต์นั้นยอดเยี่ยมมาก

เป็นเฟรมเวิร์กแกลเลอรีรูปภาพ JavaScript ที่สร้างขึ้นบนไลบรารี jQuery เป้าหมายคือเพื่อลดความซับซ้อนของกระบวนการพัฒนาแกลเลอรีรูปภาพระดับมืออาชีพสำหรับเว็บและอุปกรณ์มือถือ คุณสามารถดูได้ในหน้าต่างป๊อปอัปหรือในโหมดเต็มหน้าจอ

เรากำลังเริ่มชินกับมันอย่างเงียบๆ และรอผลงานใหม่จากทีม Codrops โปรดใช้แถบเลื่อนภาพที่ยอดเยี่ยมพร้อมเอฟเฟกต์การเปลี่ยนภาพ 3 มิติอันงดงามเพื่อดูภาพในโหมดเต็มหน้าจอ

ปลั๊กอิน WordPress อื่นจากซีรีย์ออแกไนเซอร์สไลด์โชว์ รวมเข้ากับการออกแบบเกือบทุกประเภทได้อย่างง่ายดาย และเสนอตัวเลือกการปรับแต่งมากมายสำหรับผู้ใช้ที่มีประสบการณ์และผู้ที่ไม่มีประสบการณ์เช่นกัน

ปลั๊กอินอื่นที่เขียนขึ้นสำหรับ WordPress จะทำให้การจัดระเบียบสไลด์โชว์รูปภาพหรือเนื้อหาอื่น ๆ ในบล็อกของคุณง่ายขึ้นมาก

ปลั๊กอินสไลด์โชว์ที่ดีสำหรับการรวมเข้ากับ WordPress Xili-floom-slideshow ได้รับการติดตั้งโดยอัตโนมัติ และอนุญาตให้ตั้งค่าส่วนบุคคลได้เช่นกัน

สลิมบ็อกซ์2เป็นปลั๊กอิน WordPress ที่มีชื่อเสียงสำหรับการแสดงภาพพร้อมเอฟเฟกต์ไลท์บ็อกซ์ รองรับการแสดงภาพสไลด์อัตโนมัติและการปรับขนาดภาพในหน้าต่างเบราว์เซอร์ โดยทั่วไปแล้ว ปลั๊กอินนี้มีข้อดีมากกว่าปลั๊กอินอื่นๆ ในซีรีส์นี้หลายประการ

ปลั๊กอิน/วิดเจ็ตนี้ช่วยให้คุณสร้างสไลด์โชว์และการนำเสนอแบบไดนามิกที่มีการควบคุมสำหรับเว็บไซต์หรือบล็อกของคุณที่ทำงานบนกลไก WordPress

ปลั๊กอิน WordPress นี้จะแปลงภาพที่ฝังในแกลเลอรีของคุณให้เป็นสไลด์โชว์ที่เรียบง่ายและยืดหยุ่น ปลั๊กอินใช้แถบเลื่อนรูปภาพ FlexSlider jQuery และการตั้งค่าส่วนบุคคลของผู้ใช้

- นี้ ปลั๊กอินเวิร์ดเพรสเพื่อจัดระเบียบสไลด์โชว์รูปภาพ รูปภาพจาก SmugMug, Flickr, MobileMe, Picasa หรือฟีด RSS ของ Photobucket ทำงานและแสดงผลโดยใช้ Javascript ล้วนๆ

แถบเลื่อนอย่างง่ายสำหรับ WordPress และอื่นๆ ไม่มีอะไรฟุ่มเฟือยหรือยุ่งยาก งานเสร็จในสไตล์มินิมอล เน้นที่ความเสถียรและความเร็ว และเชื่อมต่อกับกลไกการจัดการบล็อกได้อย่างสมบูรณ์แบบ

ในความคิดของฉัน Skitter เป็นหนึ่งในแถบเลื่อนที่ดีที่สุดที่รองรับการทำงานกับ WordPress ฉันถูกดึงดูดด้วยความเสถียรและความเร็วของการทำงาน การควบคุมที่ไม่โดดเด่นเกินไป เอฟเฟกต์การเปลี่ยนแปลง และการเชื่อมต่อกับธีมที่ค่อนข้างง่าย

เป็นปลั๊กอินสำหรับ WordPress ซึ่งคุณสามารถจัดระเบียบแกลเลอรีรูปภาพบนเว็บไซต์ของคุณได้อย่างง่ายดายและรวดเร็วพร้อมความสามารถในการดูในโหมดสไลด์โชว์ จอแสดงผลสามารถเลือกได้แบบอัตโนมัติหรือควบคุมเต็มรูปแบบด้วยการสาธิตภาพขนาดย่อและคำอธิบายภาพ

ของ.ไซต์ | สาธิต

แสดงรูปภาพทั้งหมดสำหรับโพสต์/เพจเป็นสไลด์โชว์ ติดตั้งง่าย- ปลั๊กอินนี้ต้องการ อะโดบี แฟลชสำหรับเวอร์ชันที่มีภาพเคลื่อนไหวการเปลี่ยนภาพ หากไม่พบ Flash แถบเลื่อนจะทำงานในโหมดปกติ

แถบเลื่อนง่ายๆ อีกตัวสำหรับ WordPress จะแสดงรูปภาพสำหรับโพสต์และประกาศบทความสั้น ๆ ฉันใช้ปลั๊กอินดังกล่าวในบล็อกนี้เป็นครั้งคราว

Meteor Slides เป็นตัวเลื่อน jQuery WordPress ที่มีตัวเลือกการเปลี่ยนภาพมากกว่า 20 แบบ ผู้เขียนเรียกปลั๊กอินว่า "ดาวตก" ซึ่งอาจหมายถึงความเร็วของการดำเนินการ บางทีฉันอาจไม่สังเกตเห็นอะไรเลยเกี่ยวกับอุกกาบาต

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

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

ปลั๊กอิน Flash Gallery เปลี่ยนแกลเลอรีปกติของคุณให้เป็นผนังภาพที่สวยงาม โดยรองรับหลายอัลบั้มต่อโพสต์ การดูแบบเต็มหน้าจอ และโหมดสไลด์โชว์

WOW Slider เป็นตัวเลื่อนรูปภาพ jQuery สำหรับ WordPress ที่ยอดเยี่ยม เอฟเฟ็กต์ภาพ(Burst, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack และ Linear) และเทมเพลตที่ออกแบบอย่างมืออาชีพ

Promotion Slider เป็นปลั๊กอิน jQuery ที่ทำให้ง่ายต่อการสร้างสไลด์โชว์ง่ายๆ หรือใช้การหมุนเวียนโฆษณาหลายโซนบนหน้าเว็บ เนื่องจากเป็นเครื่องมือที่ปรับแต่งได้สูง คุณจะสามารถควบคุมสิ่งที่คุณแสดงในแถบเลื่อนได้อย่างเต็มที่และควบคุมวิธีการได้อย่างเต็มที่ โมดูลทำงานได้โดยทั่วไป

| สาธิต

ใหม่ในเวอร์ชัน 2.4: รองรับการจัดเรียงรูปภาพแบบลากและวางโดยตรงผ่านโปรแกรมแก้ไข WordPress รวมถึงความสามารถในการเพิ่มลิงก์รูปภาพไปยังรูปภาพหลัก (IE8 อาจมีข้อบกพร่องบางประการ ทำงานได้ดีกับเบราว์เซอร์หลัก ๆ ทั้งหมด ผู้เขียนสัญญาว่าจะรองรับ IE8 อย่างเต็มรูปแบบในอนาคต)

| สาธิต

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

ฉันดูทุกสิ่งที่อธิบายไว้ข้างต้นและประหลาดใจที่คนเหล่านี้มีจินตนาการมากมาย แต่นี่ไม่ใช่ทั้งหมดที่นักพัฒนาเว็บหลาย ๆ คนได้เกิดขึ้นเมื่อเร็ว ๆ นี้ในหัวข้อการจัดระเบียบรูปภาพในโครงการเว็บ เป็นเรื่องดีที่ขณะนี้สามารถนำโซลูชันที่ยอดเยี่ยมดังกล่าวไปใช้ในการสร้างแกลเลอรีและสไลด์โชว์ได้
ฉันกล้าหวังอย่างเงียบๆ ว่าในคอลเลกชั่นนี้คุณจะพบสิ่งที่น่าสนใจสำหรับตัวคุณเอง สร้างแกลเลอรีหรือสไลเดอร์ที่เป็นเอกลักษณ์ของคุณเอง เพื่อความพึงพอใจของผู้ใช้และแน่นอนว่าตัวคุณที่คุณรัก และเราจะอยู่อย่างไรถ้าไม่มีสิ่งนี้...

โดย Dmitry Semenov
เป็นแกลเลอรีรูปภาพ jQuery และปลั๊กอินตัวเลื่อนเนื้อหา มีการตอบสนองอย่างสมบูรณ์ เป็นมิตรกับการสัมผัส และมีสถาปัตยกรรมแบบโมดูลาร์ที่ช่วยให้คุณสามารถรวมเฉพาะคุณสมบัติที่คุณต้องการเพื่อเพิ่มประสิทธิภาพขนาดไฟล์และประสิทธิภาพ

โดย Andy – The Coffeescripter
ปลั๊กอินแกลเลอรี/ตู้โชว์ที่ปรับแต่งได้สูงสำหรับ jQuery

โดยเทรนท์
Galleriffic เป็นปลั๊กอิน jQuery ที่มอบประสบการณ์ฟรีหลังการโพสต์ที่ครบครัน ซึ่งได้รับการปรับให้เหมาะกับการจัดการภาพถ่ายปริมาณมากในขณะที่ประหยัดแบนด์วิธ

Tonic Gallery - แกลเลอรีผลงาน jQuery XML | $6

โดย ไอโนะ
Galleria เป็นเฟรมเวิร์กแกลเลอรีรูปภาพ JavaScript ที่สร้างขึ้นบนไลบรารี jQuery จุดมุ่งหมายคือเพื่อลดความซับซ้อนของกระบวนการสร้างแกลเลอรีภาพระดับมืออาชีพสำหรับเว็บและอุปกรณ์มือถือ

โดย CatchMyFame
วันก่อนฉันมองหาวิธีง่ายๆ โดยใช้ jQuery เพื่อเฟดระหว่างชุดรูปภาพบนเพจ ในฐานะผู้เขียนโค้ด ฉันจึงตั้งใจที่จะสร้างปลั๊กอินของตัวเอง

โดย โธมัส คาห์น
Smooth Div Scroll เป็นปลั๊กอิน jQuery ที่เลื่อนเนื้อหาในแนวนอนไปทางซ้ายหรือขวา นอกเหนือจากปลั๊กอินการเลื่อนอื่นๆ มากมายที่เขียนขึ้นสำหรับ jQuery แล้ว Smooth Div Scroll ไม่ได้จำกัดการเลื่อนให้อยู่ในขั้นตอนที่แตกต่างกัน

โดย Victor Zambrano – frwrd.net
Minishowcase เป็นแกลเลอรีรูปภาพออนไลน์ php/javascript ขนาดเล็กและเรียบง่าย ขับเคลื่อนโดย AJAX ที่ช่วยให้คุณสามารถแสดงรูปภาพของคุณทางออนไลน์ได้อย่างง่ายดาย โดยไม่ต้องใช้ฐานข้อมูลหรือการเข้ารหัสที่ซับซ้อน ทำให้มีแกลเลอรีที่พร้อมใช้งานได้ภายในไม่กี่นาที

โดย แคสปาร์ เดวิด ฟรีดริช
EOGallery เป็นแกลเลอรีสไลด์โชว์ภาพเคลื่อนไหวบนเว็บที่สร้างด้วย jQuery ใช้เฉพาะฟังก์ชัน jQuery พื้นฐานและ Thickbox ของ Cody Lindley เพื่อแสดงรูปภาพขนาดใหญ่เท่านั้น

โดย อาร์โนลต์ ปาโชติ
ม้าหมุนหลายรูปแบบสำหรับ jQuery พอร์ตโฟลิโอที่ไม่บดบังและเข้าถึงได้ ซึ่งรองรับสื่อหลายประเภท: รูปภาพ วิดีโอ (flv) เสียง (mp3) ปลั๊กอินสำหรับ jQuery นี้จะตรวจจับส่วนขยายของแต่ละสื่อโดยอัตโนมัติและใช้โปรแกรมเล่นที่ดัดแปลง

The Wall – คลังภาพสื่อ – ขับเคลื่อนด้วย jQuery | $5

โดยสเตฟาน เปเตร
ปลั๊กอินแกลเลอรีรูปภาพอื่นที่มีเอฟเฟกต์พื้นที่ ปลั๊กอินที่เบาและเรียบง่ายมาก

โดย โมเรโน ดิ โดเมนิโก้
jmFullWall เป็นปลั๊กอิน jQuery สำหรับการสร้างพอร์ตโฟลิโอที่น่าประทับใจ

โดย ฟาบริซิโอ คัลเดรัน
Mosaiqy เป็นปลั๊กอิน jQuery สำหรับการดูและซูมรูปภาพที่ทำงานบน Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome และ IE7+ รูปภาพจะถูกดึงมาจากโครงสร้างข้อมูล JSON/JSONP และย้ายแบบสุ่มภายในตาราง GPU ของคุณเข้ายึดภาพเคลื่อนไหวราคาแพงทั้งหมดบนเบราว์เซอร์ล่าสุดโดยใช้การเปลี่ยนผ่าน CSS3 เพื่อลดค่าใช้จ่ายของ CPU ให้เหลือน้อยที่สุด

โดยโคดี้
ปลั๊กอิน jQuery ต่อไปนี้แปลงชุดรูปภาพให้เป็นแกลเลอรีเล็กๆ ที่มีหลายตัวเลือก Micro Image Gallery ช่วยให้สามารถสลับระหว่างมุมมองตารางซึ่งแสดงภาพตัวอย่างภาพขนาดย่อและมุมมองเดียวที่แสดงภาพเดียวเท่านั้น

VION – ปลั๊กอินแกลเลอรีรูปภาพ jQuery | $7

โดยมาลิฮู
แกลเลอรีรูปภาพแบบเต็มหน้าจอที่เรียบง่ายแต่สวยงาม สร้างขึ้นด้วยเฟรมเวิร์ก jQuery และ CSS แบบง่ายๆ

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

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

ในบทความวันนี้ เราได้รวบรวมแกลเลอรี่ภาพและแถบเลื่อน jQuery ที่ดีที่สุดสำหรับคุณ

หากต้องการติดตั้ง เพียงเพิ่มปลั๊กอินที่เลือกไว้ที่ส่วนหัว หน้า HTMLพร้อมกับไลบรารี jQuery และกำหนดค่าตามเอกสารประกอบ (โค้ดเพียงไม่กี่บรรทัด)

เลือกองค์ประกอบเหล่านี้ที่เหมาะกับโครงการของคุณอย่างสมบูรณ์แบบ

1. ตัวเลื่อน Bootstrap

Bootstrap Slider - ฟรี ปรับให้เหมาะสมสำหรับ อุปกรณ์เคลื่อนที่แถบเลื่อนรูปภาพพร้อมการเลื่อนแบบสัมผัสและปัด มันจะดูน่าทึ่งบนหน้าจอและในเบราว์เซอร์ใดก็ได้ คุณสามารถโหลดรูปภาพ วิดีโอ ข้อความ รูปขนาดย่อ และปุ่มลงในแถบเลื่อนได้

2. แถบเลื่อนดูตัวอย่างผลิตภัณฑ์

Product Preview Slider รวบรวมศักยภาพของ jQuery ได้อย่างเต็มประสิทธิภาพและลงตัวกับทุกอินเทอร์เฟซ คุณจะพอใจกับคุณภาพและความสะอาดของโค้ดของปลั๊กอินนี้

3. แกลเลอรีภาพที่ขยายได้

แกลเลอรีภาพที่ขยายได้เป็นปลั๊กอินที่น่าทึ่งที่เปลี่ยนเป็นแกลเลอรีเต็มหน้าจอได้ด้วยคลิกเดียว สามารถใช้ในส่วน “เกี่ยวกับเรา” หรือเพื่อดูข้อมูลเกี่ยวกับผลิตภัณฑ์

4. โฟโตรามา

Fotorama เป็นปลั๊กอินแกลเลอรี jQuery ที่ตอบสนองซึ่งใช้ได้กับทั้งเดสก์ท็อปและเดสก์ท็อป เบราว์เซอร์มือถือ- มันมีตัวเลือกการนำทางที่หลากหลาย: รูปขนาดย่อ การเลื่อน ปุ่มไปข้างหน้าและย้อนกลับ สไลด์โชว์อัตโนมัติ และสัญลักษณ์แสดงหัวข้อย่อย

5. ตัวเลื่อนที่สมจริง

Immersive Slider ช่วยให้คุณสร้างประสบการณ์การดูสไลด์ที่ไม่เหมือนใครซึ่งคล้ายกับแถบเลื่อน Google TV คุณสามารถเปลี่ยนภาพพื้นหลังให้เบลอเพื่อให้ภาพหลักอยู่ในโฟกัสได้

6. น้อยที่สุด

Leastjs เป็นปลั๊กอิน jQuery ที่ตอบสนองซึ่งจะช่วยคุณสร้างแกลเลอรีที่น่าทึ่ง เมื่อคุณวางเคอร์เซอร์ไว้เหนือรูปภาพ ข้อความจะปรากฏขึ้น เมื่อคุณคลิก หน้าต่างจะขยายเป็นเต็มหน้าจอ

7. เทมเพลตแผงเลื่อน

ปลั๊กอินนี้เหมาะสำหรับพอร์ตโฟลิโอ มันจะสร้างบล็อกรูปภาพที่จัดเรียงในแนวนอน (แนวตั้งบน หน้าจอขนาดเล็ก) ซึ่งเนื้อหาที่เลือกจะเชื่อมโยงไปถึง

8. เทมเพลตผลงาน Squeezebox

เทมเพลตพอร์ตโฟลิโอ Squeezebox นำเสนอเอฟเฟกต์การเคลื่อนไหวสำหรับพอร์ตโฟลิโอของคุณ เมื่อคุณวางเมาส์เหนือรูปภาพหลัก (หรือบล็อก) องค์ประกอบที่ยึดไว้จะปรากฏขึ้น

9. สลับภาพ

Shuffle Images เป็นปลั๊กอินตอบสนองที่น่าทึ่งที่ช่วยให้คุณสามารถสร้างแกลเลอรีพร้อมรูปภาพที่เปลี่ยนแปลงเมื่อวางเมาส์เหนือ

10. ปลั๊กอิน jQuery Lightbox ฟรี

ปลั๊กอิน jQuery Lightbox ฟรีจะช่วยให้คุณแสดงภาพตั้งแต่หนึ่งภาพขึ้นไปในหน้าเดียว นอกจากนี้ยังสามารถขยายและกลับสู่ขนาดเดิมได้

11. PgwSlider – แถบเลื่อนที่ตอบสนองสำหรับ jQuery

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

12. แกลเลอรีโพลารอยด์ที่กระจัดกระจาย

Scattered Polaroids Gallery เป็นตัวเลื่อนที่น่าทึ่งพร้อมดีไซน์เรียบๆ องค์ประกอบต่างๆ เคลื่อนไหวอย่างวุ่นวายเมื่อเปลี่ยนภาพ ซึ่งดูน่าทึ่งมาก

13. ตัวกรองเนื้อหาเด้ง

Bouncy Content Filter เป็นโซลูชั่นที่ดีเยี่ยมสำหรับพอร์ตการลงทุน ปลั๊กอินนี้ช่วยให้ผู้ใช้ย้ายจากหมวดหมู่หนึ่งไปอีกหมวดหมู่หนึ่งได้อย่างรวดเร็ว

14. ตัวเลื่อน jQuery อย่างง่าย

jQuery Slider แบบธรรมดาใช้งานได้สมกับชื่อของมัน ปลั๊กอินนี้รวมองค์ประกอบของ JavaScript, HTML5 และ CSS3 การสาธิตเริ่มต้นอนุญาตให้โหลดเฉพาะข้อความเท่านั้น แต่ถ้าคุณทำการเปลี่ยนแปลงเล็กน้อย คุณสามารถเพิ่มเนื้อหาภาพได้เช่นกัน

15. เหิน JS

Glide JS เป็นตัวเลื่อน jQuery ที่เรียบง่าย รวดเร็ว และตอบสนองได้ดี กำหนดค่าได้ง่าย และปลั๊กอินไม่ใช้พื้นที่มากนัก

16. ตัวเลื่อนลากเต็มหน้าจอพร้อมพารัลแลกซ์

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