แอพพลิเคชั่นและหนังสือ

22.06.2020

แกลเลอรี jquery ง่ายๆ พร้อมภาพขนาดย่อ ฐานข้อมูลปลั๊กอิน jQuery ที่อัปเดตอย่างต่อเนื่องสำหรับแกลเลอรีรูปภาพ วิดีโอ และสื่อ เครื่องมือสำหรับการสร้างภาพที่สวยงามโดยใช้ตัวกรอง CSS AD Gallery - แกลเลอรี่ภาพพร้อมภาพย่อ การติดตั้งและการกำหนดค่าฉันใช้เวลานานในการเลือกหัวข้อสำหรับหัวข้อของวันนี้ จึงทำให้ผมสังเกตเห็นว่าเรายังไม่ได้ทำการคัดเลือกด้วย แกลเลอรี่ภาพ- ฉันคิดว่ามันเป็นหัวข้อที่ดีเพราะ แกลเลอรี่ปรากฏอยู่ในหลาย ๆ เว็บไซต์ จริงๆ แล้วพวกเขาทั้งหมดไม่ได้มีเสน่ห์มากนัก โดยคำนึงถึงแนวโน้มการพัฒนาในปัจจุบัน
เจคิวรี่, html5เป็นต้น ฉันคิดว่าท้ายที่สุดแล้ว จะต้องมีวิธีแก้ปัญหาที่น่าสนใจมากกว่าที่ฉันเคยพบมาก่อน ดังนั้น. หลังจากใช้เวลาทั้งวัน เราก็พบสคริปต์จำนวนมาก จากภูเขาทั้งลูกนี้ฉันตัดสินใจเลือกเท่านั้นเพราะฉันรักอย่างที่คุณสังเกตเห็นจากโพสต์ที่แล้ว แกลเลอรี่ภาพใช้ได้เฉพาะกรณีเท่านั้น พร้อมอัลบั้มภาพ- สามารถใช้สคริปต์ได้ฉันคิดว่ามันจะถูกต้องกว่านี้อีก ผลงานสำหรับช่างภาพ นักออกแบบฯลฯ
เอฟเฟกต์เจคิวรี่ จะช่วยดึงดูดความสนใจของผู้เยี่ยมชมและเพิ่มความสง่างามให้กับเว็บไซต์ของคุณ.
ดังนั้น. คอลเลกชันสำหรับความสนใจของคุณ

ปลั๊กอินแกลเลอรีรูปภาพ jquery สำหรับไซต์

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

แกลเลอรีรูปภาพฟรี น้ำหนักเบา และตอบสนองได้ดี

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

ปลั๊กอินแกลเลอรีรูปภาพ Jquery

- แอนิเมชั่นทำงานโดยใช้ CSS3 ไดมอนด์.JSต้นฉบับ ปลั๊กอินสำหรับสร้างแกลเลอรีรูปภาพ- ของจิ๋วมีรูปร่างเหมือน

รูปสี่เหลี่ยมขนมเปียกปูน

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

แกลเลอรี Fade ในแนวทแยงเรียบ

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

แกมมา แกลลอรี่

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

ตารางภาพขนาดย่อพร้อมตัวอย่างการขยาย

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

เจแกลเลอรี่

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

กลิสส์.เจส

ปลั๊กอินแกลเลอรีรูปภาพที่เรียบง่ายแต่มีประสิทธิภาพมาก นี่เป็นวิธีแก้ปัญหาเมื่อคุณต้องการสร้างอัลบั้มรูป ปลั๊กอินรองรับอัลบั้มและมีเอฟเฟกต์การพลิกที่ยอดเยี่ยมมาก

โมเสกโฟลว์

เรียบง่าย ปรับตัวได้ แกลเลอรี่ภาพตารางสไตล์ Pinterest

แกลเลอรี่

แกลเลอรีสุดเก๋อีกแห่งที่มีตารางสไตล์ Pinterest กรองตามหมวดหมู่ ใช้งานได้กับเบราว์เซอร์: Chrome, Safari, Firefox, Opera, IE7+, เบราว์เซอร์ Android, Chrome มือถือ, Firefox มือถือ

อย่างน้อย.js

ยอดเยี่ยม แกลเลอรี่ภาพฟรีใช้ JQUERY, 5 และ CSS3 มีรูปลักษณ์ที่น่าดึงดูดมากและจะดึงดูดความสนใจของผู้เยี่ยมชมได้อย่างไม่ต้องสงสัย

ฟลิปไลท์บ็อกซ์

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

แกลเลอรี่บลูอิมป์

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

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

ฉันนำเสนอปลั๊กอิน jQuery แบบปรับได้อีก 15 รายการที่เป็นมิตรทั้งกับเบราว์เซอร์เดสก์ท็อปและลงตัวกับหน้าจอของอุปกรณ์มือถือต่างๆ (แล็ปท็อป สมาร์ทโฟน แท็บเล็ต ฯลฯ )

ชมการสาธิตบนเว็บไซต์ของนักพัฒนา ดาวน์โหลดปลั๊กอินที่คุณชอบและสร้าง สร้าง สร้าง...

1. ไอไลท์บ็อกซ์

iLightboxเป็นปลั๊กอิน jQuery Lightbox น้ำหนักเบาที่รองรับไฟล์ประเภทต่างๆ มากมาย เช่น รูปภาพ วิดีโอ Flash/SWF เนื้อหา Ajax เฟรม และแผนที่แบบอินไลน์ ปลั๊กอินนี้ยังเพิ่มปุ่มโซเชียลมีเดีย ทำให้ผู้ใช้สามารถแชร์เนื้อหาผ่าน Facebook, Twitter หรือ Reddit โอกาสอันยอดเยี่ยมในการจัดสไลด์โชว์ แกลเลอรี่ภาพ และวิดีโออันน่าตื่นตาตื่นใจ พร้อมการรับชมในโหมดปกติและเต็มหน้าจอ

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

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE7+, Chrome, Firefox, Safari และ Opera
ใบอนุญาต: มารรู้)))

2. ปัดกล่อง

กล่องปัดนิ้วเป็นปลั๊กอิน JQuery ที่รองรับหน้าจอสัมผัสบนแพลตฟอร์มมือถือ นอกจากรูปภาพแล้ว ปลั๊กอินยังรองรับวิดีโอแบบฝังจาก Youtube และ Vimeo Swipebox นั้นง่ายต่อการแนบกับโปรเจ็กต์ใด ๆ ปลั๊กอินมีตัวเลือกที่ใช้งานง่ายมากมายสำหรับปรับแต่งการทำงานและพฤติกรรมของมัน เว็บไซต์ของนักพัฒนาซอฟต์แวร์มีเอกสารโดยละเอียดเกี่ยวกับการเชื่อมต่อและใช้งานปลั๊กอิน โดยไม่มีขนปุยที่ไม่จำเป็น ทุกอย่างตรงประเด็น ดังนั้นฉันคิดว่ามันคงไม่ยากที่จะเข้าใจว่าอะไร ที่ไหน และทำไม

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android และ Windows Phone
ใบอนุญาต: ฉันยังไม่ได้ตัดสินใจบางทีคุณอาจจะโชคดี)))

3.ป๊อปอัปอันงดงาม

ปลั๊กอินไลท์บ็อกซ์ที่เป็นที่รู้จักมายาวนานและได้รับการพิสูจน์แล้วโดยใช้ jQuery หรือ Zepto.js ผู้เขียนปลั๊กอินคือ Dmitry Semenov ซึ่งเป็นผู้พัฒนาปลั๊กอิน PhotoSwipe ด้วย ซึ่งฉันจะพูดถึงด้านล่าง นำเสนอในรูปแบบปลั๊กอิน jQuery/Zepto โดยมีคุณสมบัติขั้นสูงเพิ่มเติมที่ไม่มีใน PhotoSwipe เช่น การรองรับวิดีโอ การแสดงแผนที่และเนื้อหา Ajax การใช้หน้าต่างโมดอลด้วยรูปแบบในตัว จากเกณฑ์ทั้งหมด นี่เป็นอีกหนึ่งเครื่องมือที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บ มีปลั๊กอินแยกต่างหากสำหรับ WordPress และเอกสารรายละเอียดเกี่ยวกับการตั้งค่าและการใช้งาน สิ่งเดียวที่น่าหดหู่คือการขาดเอกสารเป็นภาษารัสเซีย เมื่อพิจารณาจากชื่อและนามสกุล ผู้เขียนดูเหมือนจะเป็นคนรัสเซีย ไม่เคยเข้าใจว่ามันเป็นอันตรายหรือเพราะจินตนาการถึงความตระหนักรู้ถึงความซับซ้อนของเขาเอง แต่น่าเสียดาย เอาละใครจะคิดออกเราก็ไม่ได้ต้มชาลวกด้วย)))

ติดยาเสพติด: jQuery 1.9.1+ หรือ Zepto.js
รองรับเบราว์เซอร์: IE7 (บางส่วน), IE8+, Chrome, Firefox, Safari และ Opera
ใบอนุญาต: ใบอนุญาตเอ็มไอที

4.รูปภาพปัด

ติดยาเสพติด: จาวาสคริปต์หรือ jQuery
รองรับเบราว์เซอร์
ใบอนุญาต: ใบอนุญาตเอ็มไอที

11.ขนนกแสง

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

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE8+, Chrome, Firefox, Safari และ Opera
ใบอนุญาต: ใบอนุญาตเอ็มไอที

12. ไลท์แกลลอรี่

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

ไลท์แกลลอรี่

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android และ Windows Phone
ใบอนุญาต: ใบอนุญาตเอ็มไอที

13. สตริปJS

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

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ และ Android 3+
ใบอนุญาต: ใบอนุญาตครีเอทีฟคอมมอนส์ BY-NC-ND 3.0

14.ชั้นแสง

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

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE9+, Chrome, Firefox, Safari และ Opera
ใบอนุญาต: ใบอนุญาตเอ็มไอที

15. ฟลูอิดบ็อกซ์

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

ติดยาเสพติด: jQuery
รองรับเบราว์เซอร์: IE9+, Chrome, Firefox, Safari, Opera
ใบอนุญาต: ใบอนุญาตเอ็มไอที

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

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

ขอแสดงความนับถืออันเดรย์

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

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

มาร์กอัป HTML

ขั้นแรก มาดูแผงที่มีรายการหมวดหมู่ นี่คือรายการสัญลักษณ์แสดงหัวข้อย่อย ul นอกจากนี้ แต่ละองค์ประกอบรายการต้องมีชื่อคลาสไม่ซ้ำกัน

1
2
3
4
5
6
7
8

<ul class = "ตัวกรองพอร์ตโฟลิโอ-categ">
<ลี >หมวดหมู่:</li>
<li class = "ใช้งานอยู่ทั้งหมด" > ทั้งหมด</ก>
<คลาส li = "cat-item-1"> หมวดที่ 1</ก>
<คลาส li = "cat-item-2" > หมวดที่ 2</ก>
<คลาส li = "cat-item-3"> หมวดที่ 3</ก>
<คลาส li = "cat-item-4"> หมวดที่ 4</ก>
</ul>

1
2
3
4
5
6
7
8
9
10
11

ชื่อภาพ

เผยแพร่: 2012

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

อย่าลืมสิ่งสำคัญ 2 ประการด้วย: องค์ประกอบ li list ต้องมีแอตทริบิวต์ data-id ที่ไม่ซ้ำกัน แอตทริบิวต์ประเภทข้อมูลประกอบด้วยคลาสหมวดหมู่ รายการที่ฉันอธิบายไว้ข้างต้น ดูเหมือนว่าทุกอย่างจะเกี่ยวกับมาร์กอัป

สไตล์ CSS

ฉันจะไม่เน้นไปที่สไตล์เป็นพิเศษ เนื่องจากเราใช้ไลบรารี่สำเร็จรูป พริตตี้โฟโต้ซึ่งทำหน้าที่ขยายภาพและมีโค้ด CSS ค่อนข้างเยอะ อย่างไรก็ตามเป็นที่น่าสังเกตว่ามี 5 ตัวเลือกในการออกแบบภาพที่ขยายใหญ่ขึ้นแม้ว่าจะมีเพียง 3 ตัวเลือกเท่านั้นเนื่องจากในสองตัวเลือกจะมีการลบการปัดเศษเท่านั้น

ดังนั้น ฉันจะแสดงเฉพาะสไตล์ CSS สำหรับภาพขนาดย่อและรายการหมวดหมู่เท่านั้น

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Portfolio-categ ( ระยะขอบล่าง : 30px ; )
.portfolio-categli (
จอแสดงผล: อินไลน์;
ขอบขวา : 10px ;
}
.image บล็อก (
จอแสดงผล: บล็อก;
ตำแหน่ง: ญาติ;
}
.image บล็อก img (
เส้นขอบ : 1px ทึบ #d5d5d5 ;
รัศมีเส้นขอบ: 4px 4px 4px 4px ;
พื้นหลัง : #FFFFFF ;
ช่องว่างภายใน: 10px;
}
.image-block img: โฮเวอร์ (
เส้นขอบ : 1px ทึบ #A9CF54 ;
กล่องเงา : 0 0 5px #A9CF54 ;
}
.portfolio-พื้นที่ li (
ลอย: ซ้าย;
ระยะขอบ : 0 12px 20px 0 ;
ล้น: ซ่อนเร้น;
ความกว้าง: 245px;
ช่องว่างภายใน: 5px;
}
.home-portfolio-text ( ขอบด้านบน : 10px ; )
li.active a (การตกแต่งข้อความ: ขีดเส้นใต้;)

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

jQuery

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// เลือกองค์ประกอบย่อยทั้งหมดของ porto-area และเขียนลงในตัวแปร
var $data = $(".portfolio-area" ) .clone () ;

$(".portfolio-categli" ) .คลิก (ฟังก์ชั่น (e) (
$(".filter li" ) .removeClass ( "ใช้งานอยู่" );

var filterClass= $(สิ่งนี้) .attr ("คลาส" ) .split (" " ) .slice (- 1 ) [ 0 ] ;

ถ้า (filterClass == "ทั้งหมด" ) (
var $filteredData = $data.find(".portfolio-item2" ) ;
) อื่น (
var $filteredData = $data.find(".portfolio-item2" ) ;
}
$(".portfolio-area") .quicksand ($กรองข้อมูล, (
ระยะเวลา: 600 ,
ปรับความสูง: "อัตโนมัติ"
) , การทำงาน () (

ไลท์บ็อกซ์รูปภาพ() ;
} ) ;
$(นี้).addClass("ใช้งานอยู่");
กลับเท็จ;
} ) ;

เมื่อใช้เมธอด clone() และตัวเลือก เราจะเลือกองค์ประกอบย่อยทั้งหมดของ .portfolio-area และเขียนลงในตัวแปร $data ต่อไป เราจะติดตามการคลิกหมวดหมู่ใดหมวดหมู่หนึ่ง ซึ่งเป็นองค์ประกอบ li ของรายการด้วยคลาส .portfolio-categ เราทำให้หมวดหมู่ทั้งหมดใช้งานไม่ได้โดยการลบ RemoveClass("ใช้งานอยู่") หากยังไม่เสร็จสิ้น เมื่อเวลาผ่านไป หมวดหมู่ทั้งหมดจะใช้งานได้และการกรองจะหยุดลง

เนื่องจากเราคลิกที่องค์ประกอบรายการ ตัวเลือกนี้จะมีองค์ประกอบรายการ นั่นคือ li จากนั้นเรารับค่าของแอตทริบิวต์ class และใช้วิธีแยกเราแบ่งชื่อคลาสออกเป็นหลายส่วน เส้นขอบเป็นช่องว่าง (เช่น ถ้าคลาสเป็น " all active" หลังจากแยกแล้ว เราก็จะได้อาร์เรย์เป็น "all" และ "active") จากนั้นใช้วิธีสไลซ์ เราเลือกองค์ประกอบแรกของอาร์เรย์ (ในกรณีของเราคือ “ทั้งหมด”) และเขียนผลลัพธ์ผลลัพธ์ลงในตัวแปร filterClass หากไม่มีที่ว่าง ชื่อชั้นเรียนจะไม่เปลี่ยนแปลง

ต่อไป เราจะตรวจสอบว่าตัวแปร filterClass มีสตริงหรือไม่ ทั้งหมดจากนั้นใช้เมธอด .find เราเลือกองค์ประกอบทั้งหมดที่มีคลาสportfolio-item2จากอาร์เรย์ $data ซึ่งเราพิจารณาข้างต้น องค์ประกอบที่เลือก (และองค์ประกอบเหล่านี้คือองค์ประกอบทั้งหมดของรายการ นั่นคือ รูปภาพทั้งหมด) จะถูกวางไว้ในตัวแปร filteredData

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

และในที่สุดเราก็ส่งตัวแปรผลลัพธ์ไปยังไลบรารี ทรายดูด jqueryซึ่งกรองรูปภาพ นั่นก็เพื่อการกรอง

ตอนนี้สำหรับการขยายภาพในหน้าต่างป๊อปอัป ทุกอย่างง่ายกว่ามากที่นี่

1
2
3
4
5
6
7

jQuery("a") .prettyPhoto ((
ความเร็วภาพเคลื่อนไหว: "เร็ว" ,
สไลด์โชว์: 5000,
ธีม: "เฟสบุ๊ค" ,
show_title: เท็จ
overlay_gallery: เท็จ
} ) ;

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

หากต้องการติดตามบทความและบทเรียนล่าสุด โปรดสมัครรับข้อมูล

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

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

ดาวน์โหลด

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

ส่วน HTML

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

1 2 3 4 5 6

<หัว > ... <"http://code.jquery.com/jquery-1.9.1.js"> <ประเภทสคริปต์ = "ข้อความ/จาวาสคริปต์" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </หัว>

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

1 2 3 4 5 6 7 8

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

... </div>

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