Một thư viện đơn giản trong jquery. Plugin thư viện jQuery "MB.Gallery". Plugin jQuery CSS3 "Hiệu ứng hiển thị sóng"
Thư viện jQuery xuất hiện vào năm 2007. Kể từ đó, một số lượng lớn plugin đã được phát triển bằng cách sử dụng nó, bao gồm cả thư viện hình ảnh. Chúng có rất nhiều khung hình đẹp, chuyển tiếp hoạt ảnh đẹp mắt và thiết kế tuyệt vời. Tuy nhiên, điều thú vị là tôi chưa gặp bất kỳ thư viện jQuery nào có khả năng xoay hình ảnh. Nhưng bạn thường phải xem hình ảnh bị lật 90 độ hoặc thậm chí được tải lộn ngược. Đây chính xác là chức năng cần thiết cho dự án của tôi.
Thực tế, việc lật ảnh bằng javascript rất dễ dàng. Biết được điều này, tôi quyết định viết thư viện hình ảnh có thể xoay đơn giản của riêng mình, dựa trên plugin jquery. Nói sớm hơn làm, sau vài giờ, kết quả khá phù hợp đã xuất hiện:
Trình diễn công việc
Cách sử dụng
Để thư viện hoạt động chính xác, bạn cần hai thứ: thư viện jQuery được tải và các phông chữ tuyệt vời được tải. Trong phần đầu, chúng tôi bao gồm các kiểu và tập lệnh cần thiết:
Chúng tôi tạo bố cục thư viện cần thiết:
Và khởi tạo bộ sưu tập:
$(function() ( $(".simple_img_gallery").createSimpleImgGallery(); ));
Sẵn sàng. Hóa ra nó tối giản và khá đẹp.
Thư viện đã triển khai có sẵn trên github.
Điểm mấu chốt
Thêm một thư viện hình ảnh nữa đã xuất hiện trên Internet :)
Khi thư viện phát triển hơn nữa, bạn có thể triển khai khả năng phóng to và thu nhỏ hình ảnh - đây cũng là một chức năng khá hữu ích trong các dự án thương mại mà hầu hết các phòng trưng bày đều thiếu.
Ngoài ra, để giảm số lượng phụ thuộc, bạn có thể cố gắng loại bỏ phông chữ tuyệt vời, vì trong số bộ biểu tượng lớn này chỉ có 4 trong số chúng được sử dụng.
Xin chào tất cả mọi người!
Các nhà phát triển thuộc mọi lĩnh vực, khi tạo dự án web tiếp theo của họ, thường quan tâm đến câu hỏi làm thế nào để hiển thị cho người dùng của họ nhiều loại hình ảnh khác nhau, có thể là ảnh chụp hoặc bộ ảnh. Vì điều này, những bộ óc tò mò của không gian trực tuyến, phần lớn tất nhiên đây là không gian “tư sản”, đang ngày càng tìm kiếm nhiều giải pháp mới để tạo ra các trình chiếu và thư viện ảnh ngoạn mục, đầy màu sắc và quan trọng nhất là có chức năng. Phần lớn, chúng được các nhà phát triển tùy chỉnh để phù hợp với thiết kế mẫu của dự án web đang được tạo hoặc ở dạng plugin và mô-đun cho một công cụ quản lý trang web cụ thể. Thật đáng để xem xét các mẫu hiện đại, không một chủ đề nào, với những trường hợp ngoại lệ hiếm hoi, có thể thực hiện được nếu không có một số loại thanh trượt plug-in hoặc công cụ quay hình ảnh đơn giản. Vì vậy, có thể hiểu rằng nhiều nhà phát triển web muốn có thứ gì đó như thế này trong kho vũ khí của họ và khiến người đọc hết sức ngạc nhiên bằng cách trình bày hình ảnh một cách hiệu quả trên trang web của họ.
Tiếp tục loạt bài đánh giá liên tục về các giải pháp mới mới xuất hiện khi tạo, tôi quyết định tập hợp một bộ sưu tập đầy đủ hơn gồm các trình chiếu và thư viện ảnh thú vị và hiệu quả nhất mà tôi từng gặp, được tạo bằng phép thuật của jQuery.
Tôi muốn cảnh báo ngay với bạn rằng các tài nguyên được thảo luận trong bài đánh giá chủ yếu bằng tiếng Anh, nhưng tôi nghĩ ai cần nó sẽ tìm hiểu bằng trực giác hoặc với sự trợ giúp của các dịch giả, trong đó có hàng tá người. Và nếu bạn tìm kiếm đủ kỹ, bạn có thể tìm thấy mô tả về kỹ thuật tạo một số phòng trưng bày và thanh trượt bằng tiếng Nga, vì nhiều nhà phát triển web của chúng tôi dịch khi làm việc trên một dự án cụ thể, trước tiên là cho chính họ, sau đó đăng mô tả chi tiết về tất cả các thao tác của họ để truy cập miễn phí.
Ví dụ: đây là những gì tôi đã làm, khi tôi đang nghiên cứu cơ chế tạo, lần đầu tiên tôi tìm thấy một tùy chọn thư viện phù hợp với mình trong burzhunet, đã dịch nó để hiểu rõ hơn về những gì tôi đang làm và trong tương lai. Tôi hy vọng điều này hóa ra không phải là một bài viết tồi về cách sử dụng tập lệnh Highslide, với các ví dụ về công việc trong các biến thể ứng dụng khác nhau.
Và như vậy, đã đủ lời bài hát không cần thiết, hãy chuyển thẳng sang phần đánh giá, xem, đọc phần giải thích ngắn gọn và chọn từ một số lượng lớn các plugin và tập lệnh jQuery mới để triển khai các thanh trượt hình ảnh, thư viện ảnh, trình chiếu thú vị trên trang web của bạn: với thanh trượt thay đổi tự động và thủ công, thanh trượt hình nền, có và không có hình thu nhỏ, v.v. và như thế...
Của.Site | Thử nghiệm
Thư viện hình ảnh jQuery hoàn chỉnh, có thể tùy chỉnh với các thành phần trình chiếu, hiệu ứng chuyển tiếp và nhiều tùy chọn album. Tương thích với tất cả các trình duyệt máy tính để bàn và thiết bị di động hiện đại.
Hướng dẫn cách tạo thư viện toàn màn hình bằng jQuery. Ý tưởng là để hình thu nhỏ của hình ảnh toàn màn hình nổi bật xuất hiện ở một bên, với hình ảnh phản chiếu khi bạn di chuyển qua các hình ảnh bằng cách sử dụng mũi tên hoặc nhấp chuột. Hình ảnh lớn di chuyển lên hoặc xuống theo kiểu trình chiếu tùy thuộc vào hiệu ứng chuyển tiếp bạn chọn. Khả năng chia tỷ lệ hình ảnh, giúp hình ảnh ở chế độ nền có thể xem được ở chế độ toàn màn hình hoặc được điều chỉnh theo kích thước trang.
Thanh trượt thị sai
Parallax Slider là một giải pháp thú vị để tổ chức hiển thị hình ảnh dưới dạng trình chiếu với các yếu tố điều khiển thủ công. Vị trí ban đầu của hình thu nhỏ thu hút sự chú ý. Trang web chính thức có thông tin chi tiết đầy đủ về cách tích hợp và định cấu hình thanh trượt.
Thư viện trình chiếu tối giản với jQuery là một thư viện hình ảnh tuyệt vời có các thành phần để tự động thay đổi hình ảnh cũng như khả năng điều khiển hiển thị và chọn hình ảnh theo cách thủ công từ khối thả xuống với lưới hình thu nhỏ. Một trong những nhược điểm là thiếu khả năng xem hình ảnh kích thước đầy đủ, nhưng đây chính là sự tối giản của bộ sưu tập này.
Đây là trình chiếu toàn màn hình với hình ảnh tự động thay đổi, không có hiệu ứng gây ấn tượng, mọi thứ đều đơn giản và trang nhã.
Minimit Gallery là một plugin jQuery có khả năng tùy biến cao với nhiều lựa chọn chuyển tiếp hình ảnh. Sử dụng thư viện Minimit, bạn có thể sắp xếp hiển thị hình ảnh dưới dạng băng chuyền, trình chiếu, công cụ quay đơn giản và thanh cuộn hình ảnh thông thường.
là một plugin jQuery nhỏ (2kb) cung cấp một cách đơn giản, đơn giản để hiển thị hình ảnh dưới dạng trình chiếu.
là một thư viện javascript có giao diện đẹp mắt, với các điều khiển trực quan và khả năng tương thích liền mạch trên tất cả máy tính, iPhone và thiết bị di động. Rất dễ cài đặt và cấu hình
Không giống như nhiều thanh trượt hình ảnh Javascript và jQuery, Slider.js là một giải pháp kết hợp, được hỗ trợ bởi các hiệu ứng chuyển tiếp và hoạt ảnh CSS3.
Đây là mẫu một trang để tạo nhiều bản trình bày khác nhau trong HTML5 và CSS3.
Trình chiếu Diapo là một dự án nguồn mở. Nếu muốn, bạn có thể đề xuất những thay đổi hoặc cải tiến. Bạn có thể tải xuống và sử dụng nó miễn phí, không có gì và không ai ngăn cản bạn sử dụng thanh trượt này trong các dự án của mình. Thanh trượt dễ dàng tùy chỉnh, có các chuyển đổi thú vị giữa nội dung được trình bày và bạn có thể đặt bất cứ thứ gì vào thanh trượt, nó hoạt động khá nhanh chóng, không có bất kỳ trở ngại nào.
không gì khác hơn là một công cụ khác để tạo trình chiếu trên các trang web và các dự án web khác. Hỗ trợ tất cả các trình duyệt hiện đại, hoạt ảnh ngang và dọc, hỗ trợ chuyển tiếp tùy chỉnh, API gọi lại và hơn thế nữa. Bạn có thể sử dụng bất kỳ thành phần HTML nào trong trang trình bày của mình, nó dễ hiểu và dễ tiếp cận đối với người mới bắt đầu và được phân phối hoàn toàn miễn phí.
Trình chiếu JavaScript để phát triển linh hoạt
Triển khai trình chiếu của bạn bằng plugin jQuery tuyệt vời này. Công cụ có khả năng tùy biến cao để bạn có thể xây dựng bản trình bày nội dung theo yêu cầu của mình. Để cung cấp khả năng tích hợp dễ dàng hơn với dữ liệu bên ngoài hoặc dữ liệu từ CMS của bạn, . Đây là một phiên bản mới và được viết từ đầu. Các nhà phát triển đã cố gắng mô tả toàn bộ quá trình làm việc với đứa con tinh thần của họ rất rõ ràng và dễ hiểu.
là một plugin jQuery cho phép bạn chuyển đổi các danh sách không có thứ tự thành các trình chiếu với các hiệu ứng hoạt hình hấp dẫn. Trong trình chiếu, bạn có thể hiển thị danh sách các trang chiếu bằng cách sử dụng số hoặc hình thu nhỏ hoặc sử dụng nút Trước và Tiếp theo. Thanh trượt có nhiều loại hoạt ảnh gốc, bao gồm khối lập phương (với nhiều loại phụ khác nhau), ống, khối, v.v.
Một bộ công cụ hoàn chỉnh để tổ chức tất cả các loại bản trình bày có nội dung khác nhau trên các dự án web của bạn. Những người tư sản đã làm hết sức mình, bao gồm hầu hết các loại thanh trượt và phòng trưng bày khác nhau bằng cách sử dụng phép thuật của jQuery. Thanh trượt ảnh, thư viện ảnh, trình chiếu động, băng chuyền, thanh trượt nội dung, menu tab và nhiều hơn thế nữa, nói chung luôn có chỗ cho trí tưởng tượng không thể kìm nén của chúng ta được phát huy.
Đây là một plugin trình chiếu jQuery được xây dựng với mục đích đơn giản. Chỉ có bộ chức năng hữu ích nhất được đóng gói, cho cả người mới bắt đầu và nhà phát triển nâng cao, mang đến cơ hội tạo các trình chiếu đơn giản nhưng đồng thời rất hiệu quả và thân thiện với người dùng.
— một thanh trượt đơn giản được xây dựng trên jQuery, đơn giản về mọi mặt, không yêu cầu kỹ năng đặc biệt, tôi nghĩ nhiều người sẽ thấy nó hữu ích khi triển khai trình chiếu trên trang web của họ. Plugin đã được thử nghiệm trên tất cả các trình duyệt hiện đại, bao gồm cả trình duyệt IE chậm.
jbgallery là một loại tiện ích giao diện người dùng được viết bằng javascript của thư viện jQuery. Chức năng của nó là hiển thị một hình ảnh lớn làm nền của trang web ở chế độ toàn màn hình, một số hình ảnh ở dạng thanh trượt. Tất cả các chế độ xem đều có điều khiển xem. Đó là một giải pháp thú vị theo cách riêng của nó và trong một số trường hợp, nó thậm chí còn không đạt tiêu chuẩn.
Đây là một plugin jQuery dễ sử dụng để hiển thị ảnh của bạn dưới dạng trình chiếu với các hiệu ứng chuyển tiếp giữa các ảnh (bạn đã thấy nhiều ảnh thú vị hơn). jqFancyTransitions tương thích và được thử nghiệm rộng rãi với Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
là một plugin jQuery được phân phối miễn phí để xem hình ảnh và thông tin khác ở dạng Hộp đèn. Cửa sổ bật lên với các điều khiển, nền bóng mờ và tất cả những thứ đó, đơn giản và trang nhã.
Một plugin jQuery khác trong loạt Lightbox, mặc dù có trọng lượng cực kỳ nhỏ (9 KB) nhưng có rất nhiều chức năng. Có một giao diện được thiết kế hợp lý mà bạn luôn có thể cải thiện hoặc tùy chỉnh bằng CSS.
Ngay từ cái tên, đã rõ ràng là không có gì lạ mắt, chúng ta có một trình cuộn hình ảnh tự động rất đơn giản, hoàn toàn thiếu các điều khiển. Ai biết được, có thể thanh trượt này sẽ thu hút sự chú ý của bạn một cách chính xác nhờ sự tối giản của nó.
Công cụ quay hình ảnh với các kiểu chuyển tiếp khác nhau. Nó hoạt động cả tự động và bằng cách nhấp chuột, và khá dễ cài đặt.
— một thư viện hình ảnh đầy đủ thay vì chỉ là một thanh trượt. Xem trước hình thu nhỏ và khả năng chọn hiệu ứng chuyển tiếp, hỗ trợ đầy đủ cho tất cả các trình duyệt, mô tả chi tiết về việc tích hợp vào dự án web và phân phối miễn phí.
Đây là cách triển khai các trình chiếu sẵn sàng sử dụng bằng cách sử dụng scriptacificent/prototype hoặc jQuery. Horinaja là một giải pháp sáng tạo vì nó cho phép bạn sử dụng bánh xe để cuộn qua nội dung được đặt trong thanh trượt. Khi con trỏ chuột ở bên ngoài khu vực trình chiếu, quá trình cuộn sẽ tự động diễn ra; khi con trỏ được đặt trên trình chiếu, quá trình cuộn sẽ dừng lại.
Đây là một tính năng của một loạt trình cuộn hình ảnh đơn giản, mặc dù có các điều khiển xem và do đó hoạt động ở cả chế độ tự động và thủ công.
s3Slider là một plugin jQuery tạo trình chiếu từ danh sách hình ảnh không có thứ tự và có thể dễ dàng triển khai trên mọi nền tảng web.
Đây là một plugin jQuery được tối ưu hóa để xử lý khối lượng ảnh lớn đồng thời tiết kiệm băng thông.
Vegas Nền
Plugin Vegas Background jQuery cho phép bạn thêm hình nền toàn màn hình đẹp mắt vào các trang web, tất cả đều có các yếu tố trình chiếu. Nếu bạn nghiên cứu kỹ sự phức tạp khi làm việc với plugin, tất nhiên, bạn có thể tìm thấy nhiều giải pháp thú vị chỉ khi bạn cần.
- một thanh trượt như một thanh trượt, không hơn, không kém, với chú thích cho hình ảnh hoặc thông báo về bài viết và các điều khiển đơn giản, ngẫu nhiên.
là một javascript nhẹ (khoảng 5 KB) để tổ chức xem hình ảnh. Tự động thay đổi kích thước và chia tỷ lệ hình ảnh lớn cho phép bạn xem hình ảnh ở kích thước đầy đủ trong cửa sổ trình duyệt
Đã có phiên bản 4 của PikaChoose jQuery Image Gallery! Pikachoose là một trình chiếu jQuery nhẹ nhàng với các tính năng tuyệt vời! Tích hợp với Fancybox, các chủ đề tuyệt vời (mặc dù không miễn phí) và nhiều hơn nữa được các nhà phát triển plugin cung cấp cho bạn.
Kiểm tra số lượng hình ảnh trong danh sách của bạn và tự động tạo một tập hợp các liên kết ảnh dưới dạng điều hướng kỹ thuật số. Ngoài ra, click vào từng ảnh sẽ tiến hoặc lùi, đồng thời bạn cũng có thể cuộn qua các hình ảnh tùy theo khu vực bạn click vào ảnh (ví dụ: click vào bên trái ảnh sẽ di chuyển các slide qua lại, tương ứng ở phía bên phải của hình ảnh).
Một thanh trượt jQuery khác sẽ hoàn toàn phù hợp với bất kỳ mẫu WordPress nào.
Một sự phát triển khác của “Nivo”, giống như mọi thứ mà những người trong studio này làm, plugin được tạo ra với chất lượng cao, chứa 16 hiệu ứng chuyển tiếp độc đáo, điều hướng bàn phím và hơn thế nữa. Phiên bản này bao gồm một plugin dành riêng trực tiếp cho WordPress. Vì vậy, đối với tất cả những người hâm mộ công cụ viết blog này, Nivo Slider sẽ phù hợp với bạn.
Plugin jQuery cho phép bạn nhanh chóng tạo một thanh trượt đơn giản, hiệu quả và đẹp mắt cho hình ảnh ở mọi kích thước.
Pirobox là một tập lệnh “hộp đèn” jQuery nhẹ, việc xem được thực hiện trong một khối bật lên tự động điều chỉnh theo kích thước hình ảnh, với tất cả các điều khiển.
Những người tạo ra bộ sưu tập này đưa ra cách trình bày các bức tranh khá độc đáo. Hình ảnh được hiển thị dưới dạng thu nhỏ dưới dạng sóng, khi bấm vào hình thu nhỏ chúng ta sẽ thấy ảnh có kích thước trung bình, bấm lần thứ 2 sẽ thấy ảnh lớn. Bạn có thể coi đây là một thử nghiệm, nhưng bạn phải thừa nhận rằng điều gì đó mới mẻ và khác thường luôn thú vị.
Trình chiếu toàn màn hình với HTML5 và jQuery
Để tạo trình chiếu và hiển thị hình ảnh ở chế độ toàn màn hình, các nhà phát triển đã sử dụng plugin Vegas jQuery vốn đã quen thuộc, chứa nhiều ý tưởng và kỹ thuật được mô tả chi tiết trước đây trong các bài viết của nhóm. Sự hiện diện của các phần tử âm thanh HTML5 và phong cách chuyển tiếp giữa các hình ảnh rất hấp dẫn.
Một sự phát triển khác từ nhóm Codrops, một thư viện hình ảnh đầy đủ chức năng và đầy đủ chức năng, nhưng không có ích gì khi mô tả nó, bạn phải xem nó.
Trình chiếu hình ảnh, hình ảnh biến mất ngay trước mắt bạn, hiệu ứng thật tuyệt vời.
Là một khung thư viện hình ảnh JavaScript được xây dựng dựa trên thư viện jQuery. Mục đích là đơn giản hóa quá trình phát triển thư viện hình ảnh chuyên nghiệp cho web và thiết bị di động. Bạn có thể xem nó trong cửa sổ bật lên hoặc ở chế độ toàn màn hình.
Chúng tôi đang âm thầm bắt đầu làm quen và chờ đợi những tác phẩm mới từ nhóm Codrops. Hãy sở hữu một thanh trượt hình ảnh tuyệt vời với hiệu ứng chuyển tiếp 3D tuyệt đẹp để xem ảnh ở chế độ toàn màn hình.
Một plugin WordPress khác từ loạt bài tổ chức trình chiếu. Dễ dàng tích hợp vào hầu hết mọi thiết kế và cung cấp nhiều tùy chọn tùy chỉnh cho người dùng có kinh nghiệm cũng như những người chưa có kinh nghiệm.
Một plugin khác được viết cho WordPress, nó sẽ giúp việc tổ chức trình chiếu hình ảnh hoặc bất kỳ nội dung nào khác trên blog của bạn dễ dàng hơn nhiều.
Một plugin trình chiếu tốt để tích hợp vào WordPress. Xili-floom-slideshow được cài đặt tự động và cài đặt cá nhân cũng được cho phép.
Slimbox2 là một plugin WordPress được thiết lập tốt để hiển thị hình ảnh với hiệu ứng Hộp đèn. Hỗ trợ tự động trình chiếu và thay đổi kích thước hình ảnh trong cửa sổ trình duyệt. Và nhìn chung, plugin này có nhiều ưu điểm hơn các plugin khác trong loạt bài này.
Plugin/widget này cho phép bạn tạo các trình chiếu và bản trình bày năng động, có kiểm soát cho trang web hoặc blog của bạn chạy trên công cụ WordPress.
Plugin WordPress này biến hình ảnh thư viện được nhúng thành một trình chiếu đơn giản và linh hoạt. Plugin sử dụng thanh trượt hình ảnh FlexSlider jQuery và cài đặt cá nhân của người dùng.
là một plugin WordPress để tổ chức trình chiếu ảnh, hình ảnh từ nguồn cấp dữ liệu RSS SmugMug, Flickr, MobileMe, Picasa hoặc Photobucket, hoạt động và hiển thị bằng Javascript thuần túy.
Một thanh trượt đơn giản dành cho WordPress và hơn thế nữa. Không có gì thừa thãi hay rườm rà, công việc được thực hiện theo phong cách tối giản, nhấn mạnh vào sự ổn định và tốc độ, nó kết nối hoàn hảo với công cụ quản lý blog.
Theo tôi, Skitter là một trong những thanh trượt tốt nhất hỗ trợ làm việc với WordPress. Tôi bị thu hút bởi sự ổn định và tốc độ hoạt động, các điều khiển không quá nổi bật, hiệu ứng chuyển tiếp và kết nối khá đơn giản với chủ đề.
là một plugin dành cho WordPress mà bạn có thể dễ dàng và nhanh chóng sắp xếp thư viện hình ảnh trên trang web của mình với khả năng xem nó ở chế độ trình chiếu. Màn hình có thể được tự động hoặc được điều khiển hoàn toàn bằng cách hiển thị hình thu nhỏ và chú thích cho hình ảnh.
Của.Site | Thử nghiệm
Hiển thị tất cả hình ảnh của bài đăng/trang dưới dạng trình chiếu. Dễ dàng cài đặt. Plugin này yêu cầu Adobe Flash cho phiên bản có hình động chuyển tiếp, nếu không tìm thấy Flash, thanh trượt sẽ hoạt động như bình thường.
Một thanh trượt đơn giản khác dành cho WordPress, nó hiển thị hình ảnh cho bài đăng và thông báo ngắn về bài viết. Thỉnh thoảng tôi chỉ sử dụng một plugin như vậy trên blog này.
Meteor Slides là một thanh trượt jQuery WordPress với hơn 20 kiểu chuyển tiếp để bạn lựa chọn. Tác giả gọi plugin là “sao băng”, có lẽ ám chỉ tốc độ hoạt động, có lẽ tôi không nhận thấy gì giống thiên thạch cả.
oQey Gallery là một thư viện hình ảnh hoàn chỉnh với các yếu tố trình chiếu dành cho WordPress, với khả năng âm nhạc và video tích hợp.
Nó là một trình chiếu với các yếu tố hoạt hình flash để xem hình ảnh và video trên các trang web và blog. Bạn có thể đặt thanh trượt này trên bất kỳ trang web nào, ở mọi kích thước và với bất kỳ nội dung nào bạn thích.
Plugin Flash Gallery biến các phòng trưng bày thông thường của bạn thành những bức tường hình ảnh tuyệt đẹp, hỗ trợ nhiều album cho mỗi bài đăng, chế độ xem toàn màn hình và trình chiếu.
WOW Slider là một thanh trượt hình ảnh jQuery dành cho WordPress với các hiệu ứng hình ảnh tuyệt vời (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack và Linear) và các mẫu được thiết kế chuyên nghiệp.
Promotion Slider là một plugin jQuery giúp bạn dễ dàng tạo một bản trình chiếu đơn giản hoặc triển khai nhiều vùng quảng cáo xoay trên một trang, vì đây là một công cụ có khả năng tùy chỉnh cao nên bạn sẽ có toàn quyền kiểm soát những gì bạn hiển thị trong thanh trượt và cách thức hiển thị mô-đun hoạt động nói chung.
| Thử nghiệm
Tính năng mới trong phiên bản 2.4: hỗ trợ sắp xếp ảnh bằng cách kéo và thả trực tiếp thông qua trình chỉnh sửa WordPress, cũng như khả năng thêm liên kết ảnh vào ảnh chính. (IE8 có thể có một số lỗi, hoạt động tốt trên tất cả các trình duyệt chính. Tác giả hứa hẹn sẽ hỗ trợ đầy đủ cho IE8 trong tương lai.)
| Thử nghiệm
Hợp âm cuối cùng của bài đánh giá này sẽ là plugin này dành cho WordPress, một thanh trượt khác có hiệu ứng hình ảnh thú vị để chọn và thay đổi hình ảnh.
Tôi nhìn vào tất cả mọi thứ được mô tả ở trên và ngạc nhiên, những người này thật tuyệt vời làm sao, nhưng đây không phải là tất cả những gì các nhà phát triển web khác nhau nghĩ ra gần đây về chủ đề sắp xếp hình ảnh trong các dự án web. Thật tuyệt vời khi giờ đây chúng ta có thể triển khai các giải pháp tuyệt vời như vậy để tạo phòng trưng bày và trình chiếu.
Tôi dám thầm hy vọng rằng trong bộ sưu tập này, bạn sẽ tìm thấy điều gì đó thú vị cho riêng mình, tạo thư viện hoặc thanh trượt độc đáo của riêng bạn, làm hài lòng người dùng và tất nhiên, cả bản thân bạn yêu quý, và chúng ta sẽ ra sao nếu không có điều này...
Tôi đã mất rất nhiều thời gian để lựa chọn chủ đề cho chủ đề ngày hôm nay. Do đó, tôi nhận thấy rằng chúng tôi chưa tạo bộ sưu tập có thư viện hình ảnh. Theo tôi, đây là một chủ đề tuyệt vời vì nhiều trang web có phòng trưng bày. Thành thật mà nói, tất cả chúng đều không hấp dẫn lắm. Xem xét xu hướng phát triển hiện nay của jquery, html5, v.v., tôi nghĩ rằng phải có những giải pháp hấp dẫn hơn nhiều so với những giải pháp mà tôi đã gặp trước đây. Vì thế. Sau một ngày, chúng tôi đã tìm được một số lượng lớn kịch bản. Từ cả ngọn núi này, tôi quyết định chỉ chọn thôi, vì tôi yêu, như bạn đã nhận thấy từ những bài viết trước.
Thư viện hình ảnh không chỉ được áp dụng trong trường hợp album ảnh. Tôi nghĩ nó có thể được sử dụng tập lệnh, thậm chí còn đúng hơn, như một danh mục đầu tư dành cho các nhiếp ảnh gia, nhà thiết kế, v.v. Hiệu ứng Jquery sẽ giúp thu hút sự chú ý của khách truy cập và chỉ đơn giản là tăng thêm sự sang trọng cho trang web của bạn.
Vì thế. Chúng tôi mang đến cho bạn một bộ sưu tập các plugin thư viện hình ảnh jquery cho trang web.
Đừng quên bình luận và ghi nhớ, để không làm mất bộ sưu tập này, bạn có thể thêm nó vào mục yêu thích bằng cách nhấp vào ngôi sao ở cuối bài viết.
S Gallery Một plugin thư viện hình ảnh Jquery hấp dẫn. Hoạt ảnh hoạt động bằng css3. 
DIAMONDS.JSOplugin gốc để tạo thư viện hình ảnh. Bức tranh thu nhỏ có hình kim cương, rất phổ biến hiện nay. Biểu mẫu này được tạo bằng css3. Hạn chế duy nhất của bộ sưu tập này là thiếu hộp đèn để ảnh có thể mở ở kích thước đầy đủ. Nghĩa là, bạn sẽ cần phải cài đặt plugin hộp đèn. Tập lệnh này tạo ra một lưới hình ảnh thích ứng có hình dạng kim cương. 
Superbox Thư viện hình ảnh hiện đại sử dụng Jquery, css3 và html5. Tất cả chúng ta đều quen với việc khi bạn nhấp vào bản xem trước, hình ảnh đầy đủ sẽ mở ra trong hộp đèn (cửa sổ bật lên). Các nhà phát triển plugin này đã quyết định rằng hộp đèn đã không còn hữu dụng nữa. Các hình ảnh trong bộ sưu tập này mở ra bên dưới bản xem trước. Hãy xem bản demo và thấy rằng giải pháp này trông hiện đại hơn nhiều. | Thư viện làm mờ đường chéo mượt mà Một thư viện hình ảnh hiện đại trong đó các bản xem trước được phân bổ trên toàn bộ không gian màn hình. Tập lệnh có thể quét một thư mục có ảnh trên máy chủ, nghĩa là bạn không cần phải chèn từng ảnh riêng biệt. Chỉ cần tải ảnh lên một thư mục trên máy chủ và chỉ định đường dẫn đến thư mục trong cài đặt. Sau đó, kịch bản sẽ tự làm mọi thứ.
Thư viện Gamma Một thư viện hình ảnh có phong cách, gọn nhẹ, đáp ứng nhanh với lưới kiểu Pinterest đã trở nên rất phổ biến ngày nay. Tập lệnh hoạt động hoàn hảo trên cả máy tính để bàn và thiết bị di động với bất kỳ độ phân giải màn hình nào. Một giải pháp tuyệt vời để tạo danh mục thiết kế web. 
LƯỚI HÌNH THU NHỎ VỚI XEM TRƯỚC MỞ RỘNG Plugin là một lưới hình ảnh đáp ứng. Khi bạn nhấp vào bên dưới, ảnh lớn hơn và mô tả sẽ xuất hiện. Tốt cho việc tạo ra một danh mục đầu tư. 
jGalleryjGallery là một thư viện hình ảnh toàn màn hình, đáp ứng. Các hiệu ứng, chuyển tiếp và thậm chí cả phong cách đều có thể dễ dàng tùy chỉnh. 
Glisse.js Một plugin thư viện hình ảnh đơn giản nhưng rất hiệu quả. Đây chính xác là giải pháp khi bạn cần tạo một album ảnh. Plugin hỗ trợ album và có hiệu ứng lật rất thú vị. 
Dòng khảm Một bộ sưu tập hình ảnh đơn giản, đáp ứng với lưới kiểu Pinterest. 
GalereyaMột bộ sưu tập đầy phong cách khác có lưới kiểu Pinterest được lọc theo danh mục. Hoạt động trên các trình duyệt: Chrome, Safari, Firefox, Opera, IE7+, trình duyệt Android, Chrome mobile, Firefox mobile. 
less.js Thư viện hình ảnh miễn phí tuyệt vời sử dụng JQUERY, 5 và CSS3. Nó có vẻ ngoài rất hấp dẫn và chắc chắn sẽ thu hút sự chú ý của khách truy cập. 
flipLightBox Một thư viện hình ảnh đơn giản. Khi bạn nhấp vào bản xem trước, hình ảnh đầy đủ sẽ mở ra trong hộp đèn. 
blueimp GalleryThư viện linh hoạt. Có khả năng hiển thị không chỉ hình ảnh mà còn cả video trong cửa sổ phương thức. Hoạt động tốt trên các thiết bị cảm ứng. Thật dễ dàng để tùy chỉnh và có thể mở rộng chức năng bằng cách sử dụng các plugin bổ sung (Xem plugin tiếp theo). Cài đặt và cấu hình
Trong số rất nhiều thư viện ảnh, một vị trí đặc biệt bị chiếm giữ bởi các chương trình sử dụng chế độ xem trước hình thu nhỏ để di chuyển qua các bức ảnh trong cửa sổ xem (ví dụ: xem bài viết Thư viện ảnh ảnh đẹp).Phương pháp này đặc biệt thuận tiện cho các phòng trưng bày có số lượng lớn hình ảnh, vì việc cuộn qua chúng một cách tuần tự khá tẻ nhạt. Tất nhiên, bạn có thể quay lại trang gốc và chọn hình ảnh mong muốn, nhưng phương pháp này không thể được gọi là thành công.
Thư viện ảnh PP Gallery đa năng, một plugin từ thư viện jQuery miễn phí tuyệt vời, giúp bạn dễ dàng xem và mở bất kỳ số lượng hình ảnh nào mà không cần rời khỏi trình xem thư viện. PP Gallery có các tùy chọn điều hướng mở rộng và sự hiện diện của thanh trượt hình thu nhỏ cho phép bạn điều hướng nhanh chóng ngay cả khi duyệt qua một bộ sưu tập ảnh rất lớn. Ngoài ra, trong nhiều trường hợp, bản thân các hình thu nhỏ trong cửa sổ thư viện ảnh khiến việc đặt chúng trên trang chính là không cần thiết (xem thêm về điều này bên dưới).
Thư viện ảnh PP Gallery có chế độ xem bằng cách nhấp chuột hoặc sử dụng phím tiến/lùi và ở dạng trình chiếu. Nó rất dễ cài đặt, có vẻ ngoài trang nhã và tất cả các cài đặt cần thiết. Bạn có thể tìm thấy mô tả chi tiết về thư viện ảnh PP Gallery trên trang web của nhà phát triển. Một ví dụ hoạt động được hiển thị trong hình:
Cài đặt thư viện ảnh Phòng trưng bày PP
Như thường lệ, chúng tôi bắt đầu bằng cách tạo một thư mục mới trên trang web, chẳng hạn gọi nó là ppgallery. Sau đó tải xuống kho lưu trữ và giải nén nó vào thư mục đã tạo. Chúng ta sẽ có một thư mục js chứa các tập lệnh và một thư mục khác chứa các tệp CSS.
Tiếp theo, chúng tôi sẽ thêm vào tiêu đề của trang với thư viện ảnh tương lai bên trong thẻ... các dòng sau cho biết đường dẫn đến các tệp mới của chúng tôi và một chút JavaScript để khởi tạo và định cấu hình các tham số của Thư viện PP:
$(document).ready(function() (
$("#gallery").ppGallery((
screenFade: 0,8, // độ trong suốt của nền
screenColor: "#333333", //màu nền
ThumbWidth: 60, // chiều rộng của hình thu nhỏ. 60px mặc định
maxWidth: "700", //kiểm soát chiều rộng tối đa của hình ảnh (đặt lớn hơn giá trị lớn nhất)
slideShowDelay: "2", //tốc độ thay đổi hình ảnh trong slide show (giây)
showHiddenGalleryButton: "", //#view - ẩn hình thu nhỏ trên trang thư viện (đừng nhầm với cửa sổ thư viện!)
autoOpen: 0 //khởi chạy thư viện ngay khi trang mở ra (1= có, 0= không)
});
});
Lưu ý quan trọng: Nếu trang web của bạn sử dụng một số plugin jQuery, thì sẽ thuận tiện hơn khi di chuyển tệp jquery.js (tốt nhất là phiên bản mới nhất) vào thư mục gốc để không phải tải xuống nhiều lần. Trong trường hợp này, dòng truy cập nó sẽ giống nhau đối với tất cả các plugin. Cụ thể, trong ví dụ của chúng tôi, nó diễn ra như thế này:
Không nên sử dụng nhiều phiên bản jQuery khác nhau trên cùng một trang để chúng không xung đột với nhau. Đồng thời, hãy nhớ kiểm tra xem các plugin có hoạt động với phiên bản jQuery đã cài đặt hay không, vì không phải tất cả các phiên bản đều có thể thay thế cho nhau.
Để đặt hình ảnh (lớn - big.jpg và hình thu nhỏ - small.jpg), một danh sách không có thứ tự các siêu liên kết thông thường có mã định danh id="gallery" được sử dụng:
...
Nếu bạn muốn hiển thị chú thích dưới hình ảnh, chúng phải được đưa vào siêu liên kết.
Việc này hoàn tất quá trình cài đặt PP Gallery và bạn có thể khởi chạy thư viện ảnh và chiêm ngưỡng nó trong trình duyệt. Như họ thường nói trong quảng cáo, bạn sẽ ngạc nhiên về mọi thứ đơn giản và nhanh chóng như thế nào... Tuy nhiên, đây là điển hình của hầu hết các plugin jQuery, vốn đã giúp cuộc sống của các nhà thiết kế web trở nên dễ dàng hơn trong vài năm nay.
Đặt tùy chọn thư viện ảnh Phòng trưng bày PPCác cài đặt chính cho giao diện của thư viện ảnh PP Gallery nằm trong tệp CSS cơ bản ppgallery.css và trong tập lệnh js mà chúng tôi đã đặt trong thẻ .... Tôi hy vọng những bình luận của Nga không cần phải giải thích.
Vì cửa sổ thư viện ảnh PP Gallery hiển thị hình thu nhỏ của tất cả các hình ảnh, nên về nguyên tắc, việc sao chép chúng trên trang của trang web trở thành tùy chọn. Ngoại lệ duy nhất là nếu bạn muốn thiết kế một bộ sưu tập ảnh đầy màu sắc với đủ loại chuông và còi. Nhưng tại sao phải làm điều này nếu bằng cách nhấp vào bất kỳ bức ảnh nào, khách truy cập vẫn đi đến cửa sổ Thư viện PP và tác phẩm của bạn sẽ không được chú ý?
Do đó, trên trang web, bạn có thể ẩn tất cả các hình ảnh trong thư viện, chỉ để lại nút khởi chạy chương trình PP Gallery. Để thực hiện việc này, hãy nhập giá trị #view vào dòng khởi tạo
showHiddenGalleryButton: "#view", //#view - ẩn hình thu nhỏ trên trang thư viện
và thêm nút khởi chạy thư viện ảnh bằng thẻ trước danh sách hình ảnh (trước
- ).
Khởi chạy một thư viện ảnh hoặc
.
Thiết kế của nút có thể là bất cứ thứ gì: ở dạng dòng chữ đơn giản, nút, hình ảnh, v.v. Ví dụ: một nút như vậy có thể được tạo bằng cách sử dụng hình thu nhỏ của một thư mục có hình ảnh, như minh họa bên phải. Ví dụ này lại đang hoạt động, bạn có thể nhấp vào!
Hãy tóm tắt.
PP Gallery là một thư viện ảnh phổ quát có thể được cài đặt dễ dàng và nhanh chóng trên một trang web. Nó có giao diện hấp dẫn và khả năng điều hướng nâng cao bằng cách sử dụng tính năng xem trước hình thu nhỏ, trong nhiều trường hợp cho phép bạn tránh đặt hình ảnh trên trang thư viện ảnh chính.
Xin chào các độc giả thân mến! Trong bài học này, tôi sẽ chỉ cho bạn cách tạo một thư viện ảnh tối giản nhưng đồng thời tiện lợi và đầy đủ chức năng bằng cách sử dụng jQuery hoặc một thư viện hình ảnh, tùy thích. Thư viện có khả năng tạo danh mục, sau đó là lọc. Cũng có thể khởi chạy một trình chiếu. Thư viện hoạt động trên tất cả các trình duyệt, vì vậy sẽ không có vấn đề gì trong việc thích ứng.
Để tạo bộ sưu tập này, hai thư viện miễn phí sẽ được sử dụng: Quicksand và PrettyPhoto. Chúng làm cho việc tạo một thư viện trở nên dễ dàng hơn nhiều. Như mọi khi, bạn có thể xem kết quả công việc trên trang demo, đồng thời tải xuống kho lưu trữ từ thư viện đang hoạt động và tất cả các tệp nguồn. Có thể nói, hạn chế duy nhất là việc tạo hình thu nhỏ theo cách thủ công cho hình ảnh lớn. Trong tất cả các khía cạnh khác, bộ sưu tập này đáng được chú ý. Cũng như !
đánh dấu HTMLĐầu tiên, chúng ta hãy nhìn vào bảng có danh sách các danh mục, đây là danh sách có dấu đầu dòng ul. Hơn nữa, mỗi phần tử danh sách phải có một tên lớp duy nhất.
1 |
1 |  Tên của hình ảnh xuất bản: 2012 |
Như đã đề cập ở trên, các mục trong danh sách là hình ảnh trong thư viện. Mỗi phần tử danh sách bao gồm các thành phần. Đây là hình ảnh, hay đúng hơn là hình ảnh thu nhỏ của nó, cũng như mô tả. Hình thu nhỏ là liên kết đến hình ảnh chính. Thuộc tính rel là cần thiết để gọi javascript và mở hình ảnh chính.
Cũng đừng quên 2 điều quan trọng: phần tử li list phải có thuộc tính data-id duy nhất. Thuộc tính data-type chứa lớp danh mục, danh sách mà tôi đã mô tả ở trên. Mọi thứ dường như là về đánh dấu.
Kiểu CSSTôi sẽ không đặc biệt tập trung vào các kiểu vì chúng tôi sử dụng thư viện PrettyPhoto được tạo sẵn, chịu trách nhiệm phóng to hình ảnh và có khá nhiều mã CSS. Tuy nhiên, điều đáng chú ý là có 5 tùy chọn để thiết kế hình ảnh phóng to, mặc dù lý tưởng nhất là chỉ có 3, vì trong hai tùy chọn chỉ loại bỏ phần làm tròn.
Vì vậy, tôi sẽ chỉ hiển thị các kiểu CSS cho hình thu nhỏ và danh sách các danh mục.
1 | Danh mục danh mục đầu tư ( lề-bottom : 30px ; ) |
Về nguyên tắc, mọi thứ nên rõ ràng với phong cách. Để sắp xếp các danh mục, thuộc tính display được đặt thành inline . Để tạo hiệu ứng đường viền cho hình ảnh, hãy đặt màu nền (màu trắng) và phần đệm thành 10 pixel. Kích thước mục danh sách được đặt trong .portfolio-area li .
jQueryVà cuối cùng, điều quan trọng nhất là toàn bộ bài học nhằm mục đích gì. Đây là mã jQuery. Hãy bắt đầu bằng cách lọc ảnh theo danh mục.
1 | // Chọn tất cả các phần tử con của portfolio-area và ghi vào một biến $(".portfolio-categli" ) .click (hàm (e) ( var filterClass= $(this) .attr ("class" ) .split (" " ) .slice (- 1 ) [ 0 ] ; if (filterClass == "tất cả" ) ( LightboxPhoto() ; |
Sử dụng phương thức clone() và bộ chọn, chúng ta chọn tất cả các phần tử con của vùng .portfolio và ghi chúng vào biến $data. Tiếp theo, chúng tôi theo dõi lượt nhấp vào một trong các danh mục, phần tử li của danh sách với lớp .portfolio-categ . Chúng tôi làm cho tất cả các danh mục không hoạt động bằng cách xóa RemoveClass(“active”), nếu điều này không được thực hiện thì theo thời gian tất cả các danh mục sẽ hoạt động và quá trình lọc sẽ dừng lại.
Vì chúng ta nhấp vào một thành phần danh sách, bộ chọn này chứa một thành phần danh sách, nghĩa là li , từ đó chúng ta lấy giá trị của thuộc tính lớp và sử dụng phương thức phân tách, chúng ta chia tên lớp thành nhiều phần, đường viền là khoảng trắng (tức là nếu lớp "tất cả hoạt động" thì sau khi tách chúng ta sẽ nhận được một mảng "tất cả" và "hoạt động"). Sau đó, bằng cách sử dụng phương thức slice, chúng ta chọn phần tử đầu tiên của mảng (trong trường hợp của chúng ta là “all”) và ghi kết quả thu được vào biến filterClass. Nếu không có khoảng trắng, tên lớp sẽ không thay đổi.
Tiếp theo, chúng ta kiểm tra xem biến filterClass có chứa chuỗi all hay không, sau đó sử dụng phương thức .find, chúng ta chọn tất cả các phần tử có lớp portfolio-item2 từ mảng $data mà chúng ta đã xem xét ở trên. Các phần tử đã chọn (và đây là tất cả các phần tử của danh sách, tức là tất cả các hình ảnh) được đặt trong biến filterData.
Ngược lại, nếu filterClass không bằng all thì chúng ta sẽ không đặt tất cả các phần tử của danh sách vào biến filterData mà chỉ đặt những phần tử có thuộc tính data-type khớp với lớp danh mục. Nói tóm lại, các yếu tố chỉ thuộc một loại.
Và cuối cùng, chúng tôi chuyển biến kết quả tới thư viện cát lún jquery để lọc hình ảnh. Đó là nó để lọc.
Bây giờ, đối với việc phóng to hình ảnh trong cửa sổ bật lên. Mọi thứ ở đây đơn giản hơn nhiều.
1 | jQuery("a" ) .prettyPhoto (( |
Một nhấp chuột vào liên kết có thuộc tính rel bắt đầu bằng beautifulPhoto sẽ được theo dõi. Sau đó, thư viện beautifulPhoto phát huy tác dụng và hình ảnh được phóng to một cách kỳ diệu. Nhân tiện, chúng tôi cũng đang truyền một số tham số. Chẳng hạn như tốc độ hoạt ảnh nhanh, độ trễ trình chiếu là 5 giây, chủ đề thiết kế của Facebook (tổng cộng có 5 chủ đề, chúng nằm trong thư mục hình ảnh/ảnh đẹp) và chúng tôi cũng cấm hiển thị tên của hình ảnh và phóng to hình ảnh khi di chuột. Có thể tìm thấy tài liệu đầy đủ về beautifulPhoto
Để luôn cập nhật những bài viết và bài học mới nhất, hãy đăng ký
