Galeria wyskakujących jQuery. Galeria obrazów na jQuery. Galeria Jquery "Gallerific"

Galerie obrazów i suwaki są jednym z najpopularniejszych formatów jQuery. Dzięki nim możesz dodać wymaganą wolę zawartości wizualnej do witryny, oszczędzając jednocześnie cenne miejsce.

Galerie i suwaki sprawiają, że strona mniej załadowana, ale nadal pozwala na dodanie wszystkich obrazów niezbędnych do wysyłania wiadomości. Będą szczególnie przydatne i sklepy internetowe.

W dzisiejszym artykule zebraliśmy dla Ciebie najlepsze galerie obrazów i suwaków jQuery.

Aby je zainstalować, wystarczy dodać wybrane wtyczki w sekcji głowy Strony HTML. Wraz z biblioteką jQuery i skonfiguruj je zgodnie z dokumentacją (cała para linii kodu).

Wybierz, który z tych elementów doskonale pasuje do twojego projektu.

1. Suwak Bootstrap.

Bootstrap Slider to darmowy, zoptymalizowany suwak mobilny z przewijaniem z przewijaniem i szczotkowaniem. Będzie wyglądać niesamowicie na dowolnym ekranie iw dowolnej przeglądarce. Możesz pobrać obrazy, wideo, tekst, miniaturki i przyciski do suwaków.

2. Suwak podglądu produktu

Podgląd produktu Suwak uosabia cały potencjał jQuery, jest doskonale osadzony w dowolnym interfejsie. Będziesz także zadowolić jakość i czystość kodu tej wtyczki.

3. Galeria rozszerzalna obrazu

Rozszerzalna galeria obrazu to oszałamiająca wtyczka, którą myszą za pomocą jednego kliknięcia włącza się w galerię pełnoekranową. Może być używany do sekcji "O nas" lub przeglądać informacje o towarach.

4. Fotorama.

Fotorama jest responsywną wtyczką Galerii JQuery, która działa zarówno dla przeglądarek pulpitu i mobilnych. Oferuje wiele opcji nawigacji: miniatury, przewijanie, przyciski "do przodu" i "Back", automatyczne pokaz slajdów i markerów.

5. Wciągający suwak

Wciągający suwak pozwala stworzyć unikalne przesuwanie przesuwów, podobnych do suwaka Google TV. Możesz zmienić obraz tła, który zostanie zamazany, aby zapisać ostrość na głównych zdjęciach.

6. najmniej.

Najmniejsza wtyczka jest responsywą wtyczką jQuery, która pomoże Ci stworzyć oszałamiającą galerię. Po najechaniu kursora na obrazie pojawi się tekst, po naciśnięciu okna włącza się na całym ekranie.

7. Szablon paneli przesuwnych

Ta wtyczka jest idealna do portfolio. Tworzy bloki obrazów znajdujących się poziomo (nie duże ekrany), Do którego zostanie powiązana wybrana treść.

8. Szablon portfolio Squeezebox

Szablon portfolio Squeezebox oferuje efekty ruchu dla portfela. Po najechaniu kursorem do głównego obrazu (lub bloku) pojawi się związane elementy.

9. Potasuj obrazy.

Shuffle Images to oszałamiająca wtyczka responsywna, która pozwoli Ci utworzyć galerię z różnymi obrazami z obrazami.

10. Darmowa wtyczka JQUERY Lightbox

Darmowa jQuery Lightbox Plugin pomoże Ci pokazać jeden lub więcej zdjęć na jednej stronie. Również można je powiększyć i wrócić do początkowego rozmiaru.

11. PGWSLIDER - Responsywny suwak dla jQuery

PGWSLIDER to minimalistyczny suwak obrazu. Kod jQuery waży trochę, więc prędkość pobierania tej wtyczki będzie mi zaskoczyć.

12. Rozproszone Galeria Polaroidów

Rozproszone Galeria Polaroids - oszałamiający suwak płaska konstrukcja. Jego elementy są chaotycznie poruszające podczas przełączania obrazów, które wyglądają niesamowicie.

13. Filtr marki

Filtr zawartości skojarzenia - idealne rozwiązanie Dla i portfolio. Ta wtyczka umożliwia użytkownikom szybkie przeniesienie z jednej kategorii do drugiej.

14. Prosty suwak jQuery

Prosty suwak jQuery usprawiedliwia jego nazwę. Ta wtyczka łączy elementy JavaScript, HTML5 i CSS3. Domyślne demo jest dostępne tylko w celu załadowania tekstu, ale jeśli dodasz wiele zmian, możesz dodać zawartość wizualną.

15. Glide Js.

Glide js - prosty, szybki i reagujący suwak JQuery.. Łatwo jest skonfigurować, oprócz wtyczki nie zajmuje dużo miejsca.

16. Suwak z pełnym ekranem z paralakiem

Ten oszałamiający suwak jQuery z możliwością ładowania obrazów i tekstu jest odpowiedni dla dowolnej witryny. Będzie zachwycać światła użytkowników efekt paralaksu i wolny wygląd tekstu.

Wielokrotnie opinie o różnych galeriach obrazu, zebrał obszerną kolekcję spektakularnych pokazów slajdów i -plagin. W CSS3 znajdują się w CSS3, nie znajdują się wyłącznie w CSS3, bez podłączenia dodatkowych bibliotek JS. Ale czas nie stoi nadal, użytkownicy coraz częściej korzystają z różnych urządzeń mobilnych do surfowania internetowego, co oznacza zdolność adaptacji elementów internetowych, a zwłaszcza galerie zdjęć z efektem "" staje się jednym z priorytetów, do których projektanci i deweloperzy powinni zwrócić uwagę .

Prezentuję inny wybór 15 adaptive jQuery. Wtyczki, które są przyjaciółmi, zarówno z przeglądarkami pulpitu, jak i pasują idealnie do ekranów różnych urządzenia mobilne (Laptopy, smartfony, tablety itp.).

Zobacz demo na stronach programistów, pobierz wtyczkę, którą lubisz i utwórz, utwórz, tworzyć ...

1. ILightBox.

iLighbox. - Jest to lightbox-plugin jQuery z szeroką obsługą zakresu różne rodzaje Pliki: Obrazy, wideo, Flash / SWF, AJAX, Ramki i wbudowane karty. Ta wtyczka dodaje również przyciski. portale społecznościoweUmożliwienie użytkownikom udostępniając treści przez Facebooka, Twittera lub Reddit. Doskonała cecha organizacji spektakularnych pokazów slajdów, galerii obrazów i klipów wideo, z oglądaniem w zwykłych i pełnoekranowych trybach.

iLighbox. Działa dość szybko i podczas oglądania na urządzeniach mobilnych więcej niż prawidłowo wyświetla przetworzoną zawartość. Wśród innych rzeczy, przy użyciu tej wtyczki można łatwo wdrożyć wyjście bloków informacyjnych według rodzaju okna modalnego.

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE7 +, Chrome, Firefox, Safari i Opera
• Licencja: A do diabła to zna)))

2. Swipipebox.

Swipipebox. - To jest wtyczka jQuery ze wsparciem ekrany dotykowe Platformy mobilne. Oprócz zdjęć wtyczka obsługuje osadzone wideo z YouTube i Vimeo. Swipebox jest bardzo łatwy do zapięcia dowolnego projektu, wtyczka ma kilka intuicyjnych opcji konfiguracji jego funkcjonalności i zachowania. Na stronie internetowej dewelopera szczegółową dokumentację podłączenia i stosowania wtyczki, bez nadmiaru wody, wszystko jest tylko w przypadku, więc nie jest trudno dowiedzieć się, gdzie i dlaczego uważam, że nie będzie to trudne.

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android i Windows Phone
• Licencja: Nie zdefiniowałem, może będziesz szczęście)))

3. MagnificPopup.

Przez długi czas znany i dobrze sprawdzony LikeBox-wtyczkowy na jQuery lub Zepto.js. Autor wtyczki - Dmitrire Semenov, który jest deweloperem i wtyczką Photoswipe, która powie tylko poniżej. Występuje w postaci wtyczki jQuery / Zepto, ma więcej możliwości w photoswipe, takich jak wsparcie wideo, mapowanie i zawartość AJAX, wdrażanie modalnych okien z wbudowanymi formami. Dla wszystkich kryteriów to kolejne wspaniałe narzędzie w programistom internetowym. Oddzielnie znajduje się wtyczka do WordPress i szczegółowa dokumentacja dla konfiguracji i użycia. Rozluźnia tylko brak dokumentacji w języku rosyjskim, oceniając nazwisko i nazwisko, autor wydaje się być rosyjski, nigdy nie rozumieć z powodu szkodliwości lub z powodu wyimaginowanej świadomości jego uczucia i bla. Dobrze, w porządku, do którego należy poświęcić, nie podpisujemy też herbaty)).

• Uzależnienie: jQuery 1.9.1+ lub Zepto.js
• Przeglądarki wsparcia: IE7 (częściowo), IE8 +, Chrome, Firefox, Safari i Opera
• Licencja: Licencja MIT.

4. Photoswipe.

• Uzależnienie: JavaScript lub jQuery
• Przeglądarki wsparcia
• Licencja: Licencja MIT.

11. Featherlight.

6 k.bit Lightbox-Plugin, dla mniej lub więcej deweloperów, wyposażonych we wszystkie najbardziej powiązane funkcje. Oprócz wspierania wszystkich typowych typów treści (tekst, obrazy, IFrame, AJAX), istnieje opcjonalne połączenie opcjonalne, a także można opracować własne rozszerzenie dla tej wtyczki, która w pełni przestrzega Twoich potrzeb podczas tworzenia nowego projektu . Podobnie jak wszystkiego gospodarki (rozwój rozszerzeń) działa, nie było szczególnie celowe, ale ci, którzy wkładą tę wtyczkę, myślę, że zrozumiesz))).

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE8 +, Chrome, Firefox, Safari i Opera
• Licencja: Licencja MIT.

12. Lightgallery.

Lightgallery. - Wielofunkcyjna wtyczka LIKEBOX z wieloma dodatkowe funkcje. Posiada więcej niż 20 opcji, aby skonfigurować najmniejsze szczegóły Lightboxu. Jest wszystko, dobrze lub prawie wszystko)). Full-flded Gallery of Images z starannie wybudowanymi miniaturami, z elementami nawigacyjnymi i przewijaniem miniaturowym. Prosty znacznik HTML w formie nieuporządkowanej listy

Korzystanie z atrybutu danych-src dla zdjęć pełnoprawnych. To samo z wideo z YouTube i Vimeo. IT Wensywie obsługuje wszystkie formaty wideo HTML5, MP4, Webm, OGG ... animowane miniatury, układ adaptacyjny z obsługą urządzenia mobilnego, efekty slajdów i gładkie występy podczas przełączania obrazów i innych treści. Wygląd Łatwo uformowany i skonfigurowany za pomocą CSS.. Wstępnie ładuj obraz i optymalizacja kodu. Nawigacja na klawiaturze na komputery stacjonarne, a także możliwość korzystania z dodatkowych ikon czcionek. Lightgallery. - Tutaj jest prawdziwe "kombajn", główną rzeczą nie jest zgubienie w obfitości ustawień i szerokich możliwości tej wtyczki.
Ci, którzy potrzebują przyzwoitego suwaka, zalecam zwrócenie uwagi od tych samych deweloperów.
• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android i Windows Phone
• Licencja: Licencja MIT.



13. StrintJs.

Niezwykłe, powiedziałbym nawet: niezwykłe wdrożenie lightboxu, dokładniej, nie całkiem zwykła prezentacja treści, gdy obraz lub wideo, w projekcie LIKBOX, pojawiają się po prawej stronie, napełniając nie cały ekran, ale tylko na określony rozmiar obrazu lub wideo pełnowymiarowego. Na dużych ekranach podejście to jasne, możliwość interakcji ze strony pozostaje. Na małych ekranach urządzeń mobilnych, wszystkie innowacyjne projektowanie, płynnie trafia do klasycznej lightbox. Pomysł jest interesujący, spójrz na demo, może ktoś włoży taki twórczy.

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+ i Android 3+
• Licencja: Licencja Creative Commons By-NC-ND 3.0



14. Lightlayer.

Łatwa w użyciu wtyczka Lightbox jest dobrze połączona z dowolnym projektem, a także wygląda dobrze na dowolnym ekranie. Lightlayer Plugin prezentuje kontrolę nad zestawem ustawień, takich jak zmiana koloru tła i stopień jego przejrzystości, położenie jednostki podstawowej, wybór efektów przejściowych podczas otwierania / zamykania funkcji, które użytkownicy mogą manipulować niezależnie. Wtyczka działa świetnie z zawartością zewnętrznych stron internetowych, wbudowanych graczy wideo i kart.

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE9 +, Chrome, Firefox, Safari i Opera
• Licencja: Licencja MIT.



15. Fluidbox.

Fluidbox - LIKEBOX wtyczka wyłącznie dla obrazów. Liczba różnych odmian reprezentacji obrazu jest naprawdę imponująca. Wtyczka działa świetnie z obrazami w różnych projektach, w tym obrazach pływających, obraz z absolutnym pozycjonowaniem, obrazami i zdjęciami oprawionych przez ramkę i mający wcięcie, z pojedynczymi obrazami i łącznie w galerii. Ogólnie rzecz biorąc, w próżnej wodzie, aby wlać, malować wszystkie możliwości wtyczki w krótkim czasie, nie zadziała i tak, więc lepiej spojrzeć na demo, skręcić, obrócić i myślę, że ta wtyczka będzie lubić wiele.

• Uzależnienie: jQuery.
• Przeglądarki wsparcia: IE9 +, Chrome, Firefox, Safari, Opera
• Licencja: Licencja MIT.



To prawdopodobnie wszystko! Mam nadzieję, że ten mały przegląd pomoże Ci zrozumieć stos proponowanych produktów do tworzenia stron internetowych. Chcę zauważyć, że nie wszystkie wtyczki przedstawione w wyborze wtyczek, których używałem w projektach pracy, większość z nich okazała się na testych lub na Lachak, więc jeśli pojawi się jakiekolwiek pytania, najprawdopodobniej rozwiążemy je razem, a także razem, Jak zawsze wszystko będzie współpracować z nami.

Szukasz odpowiedniego rusyfikowanego szablonu do swoich celów? Prawdopodobnie w tym przypadku należy odwiedzić marki Templatemonster. Z prostego powodu na stronie pojawił się ostatnio nowa sekcja szablonu. Teraz każdy użytkownik może zapoznać się z kolekcją, która będzie aktualizować i aktualizować. Teksty dla szablonów napisano ręcznie. Ale to nie jest jedyny plus danych gotowe rozwiązania. W końcu w swoich pakietach znajdziesz wszystko, co ułatwi pracę nad rozwojem projektu online, w tym edytora wizualnego.

Z każdym względem Andrew

Cześć wszystkim! Dziś porozmawiamy o najlepszej darmowej galerii zdjęć, suwaka wideo i fotograficznego, porozmawiajmy o "fotoramie". Pomimo faktu, że skrypt jest już już obsługiwany, a autor przełączył się na projekt podobny przedmiot Działa świetnie i nadal zachwyca oczy.

Główne zalety (+)

1. Prostota Instalacje, ustawienia i użycie. Poza jQuery będziesz potrzebować połącz tylko 2 plikiI do wyjścia galerii trzeba określić tylko linki do zdjęć.
2. Znacząco wpływa prędkość Pobieranie witryny.
3. Zdolność adaptacji. Twoja galeria wygląda dobrze i przez telefon, a na laptopie, a nawet na ekranie telewizora.
4. Obfitość ustawień i funkcji Podłączony oddzielnie przez atrybuty znaczników HTML.
5. Obsługa urządzeń sensorycznych.
6. Wsparcie wideo.
7. Okazja powolne ładowanie kino.
8. I wiele innych, co będzie musiał zobaczyć wyrafinowany użytkownik.

Minuses (-)

1. Brak wsparcia użytkownika. Prawdopodobieństwo, że twój problem zostanie rozważany lub poprawiony prawie równy zero. Tak, jest zły, ale nie śmiertelny.

Pierwsza opcja połączenia fotorama

Ta opcja jest najłatwiejsza, ale nie najlepsza, warto go używać tylko wtedy, gdy chcesz wyświetlić galerię na większości stron witryny. Plus opcja jest korzystanie CDN.

1. Sprawdź obecność jQuery.Iść do źródło Strona (Skrót klawiatury Ctrl + U) → Próbuje znaleźć w przybliżeniu takiej linii: https://ajax.googleapis.com/ajax/libs/jquery/x.x.x.x.x/jquery.min.js

   Użyj Ctrl + F, aby ułatwić wyszukiwanie. Jeśli nie ma cenionej linii, będziesz musiał połączyć jQuery. Na WordPress można to zrobić wkładanie kodu poniżej, do funkcji. Funkcje.php. W rzeczywistości ten skrypt jest używany w konfliktach. różne wersje. JQUERY i działa zgodnie z takim schematem: Usuwa wcześniej zarejestrowany jQuery, rejestruje nowy, wyświetla skrypt. Obecne wersje biblioteki jQuery można znaleźć tutaj.

   Możesz po prostu wstawić taki ciąg między i :

   <skrypt SRC \u003d. "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> skrypt \u003e..
2. Połącz fotorama.css i fotorama.js.Włóż następujący kod między tagami i , na WordPress odbywa się to w pliku nagłówka (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" Rel \u003d "Styesheet"\u003e
3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
2. Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> ";) Dodaj_Shortcode (" Foto "," SD ");
4. Teraz podczas pisania artykułu na końcu wprowadź skrót

Bezpośrednio tworząc galerię

Galeria jest wyświetlana przez kod HTML za pomocą Pojemnik

C klasa \u003d "fotorama"Kod wyjścia obrazu jest umieszczony w pojemniku lub link do obrazu . Podczas pisania artykułu na silniku WordPress przełącz edytor do trybu tekstu i wprowadź pojemnik
C klasa \u003d "Fotorama".
To wygląda tak:

Lub tak (numeracja linków jest opcjonalna):
1 3 4
Przykłady ustawień Fotoramy
Rozmiar kontenera.
Rozmiar bloku fotografii jest wielkością pierwszego obrazu, inne zdjęcia są skalowalne proporcjonalnie do pierwszego. Aby poprawić tę sytuację, możesz ręcznie określić wymiary.

Istnieją inne ustawienia:
Szerokość danych \u003d "98%" // Względna szerokość Data-Ratio \u003d "800/600" // Wskaźnik proporcji danych-MinWidth \u003d "420" // min. Data-maxwidth \u003d "900" szerokość // max. Data-Minheight \u003d "320" szerokość // min. Data-maxheight \u003d "100% // względny max. Wysokość danych-wysokość \u003d" 100% // wysokość względna
Miniatury.
Data-Nav \u003d "Kciuki" odpowiada na miniatury

Ale ta metoda nie jest bardzo skuteczna, ponieważ skrypt musi pobrać wszystkie zdjęcia na raz na miniaturowe pokolenie, więc będzie bardziej racjonalny, aby przygotować małe kopie zdjęć. WordPress automatycznie robi miniatury, użyjemy ich. Aby uzyskać miniaturowy link Dodaj -70x70 do nazwy pliku (HTTPS: //SIGHT/WP-Content/uploads/2017/11/27LTL9ERXK.jpg → HTTPS: //SYT/WP-Content/uploads/2017/11/27ltl9erxk-70x70.jpg).

Domyślna miniatura wynosi 64 × 64. Można regulować ten parametr za pomocą danych (szerokości) i data-thumbheight (wysokość). Jeśli potrzebujesz miniatury, aby mieć swój własny rozmiar, ustaw ustawienia szerokości i wysokości dla miniaturowego pliku:

Kod HTML + Fotorama
Photorara doskonale przetwarza HTML i CSS, co znacząco rozszerza funkcjonalność skryptu. Pracuj z odniesieniami, blokami, tabelami, akapitami, zapisu CSS i wiele więcej. Poniżej znajdują się przykłady galerii. Jeśli część wizualna nie jest wyświetlana, naciśnij przycisk "Wynik".
Pokaż / ukryj przykłady
Zobacz pióro OOPPWB przez Ivanova Klim (@ @dreamerklim) na Codepen.
Zobacz Pen AveevB przez Ivanov Klim (@ @ @dreamerklim) na Codepen.
Pełny ekran
Data-coffullscreen \u003d "true" // w danych-datafullscreen \u003d "Native" Okno przeglądarki // All Monitor
Istnieje okazja do dodania oddzielnego duży obraz dla pełny ekran Poprzez dane - pełne:

Inny
Data-autoPlay \u003d "True" // Autorun Data-AutoPlay \u003d "3000" // Interval między slajdami w MS Data-Capton \u003d "One" // Komentarze na temat zdjęć Klawiatura danych \u003d "True" // strzały nawigacyjne Data-shuffle \u003d "True" // obrazy w zaburzeniach Data-Navposition \u003d "Top" // miniatury na górze Data-Loop \u003d "True" // cykliczny przewijanie Spróbujmy połączyć wszystko i dodać wideo
data-Capton \u003d "One" Data-Keyboard \u003d "True" Data-Shuffle \u003d "True" Data-Navposition \u003d "Top" Data-AutoPlay \u003d "True" Data-Loop \u003d "True"> "Jakiś komentarz 1"> "Jakiś komentarz 2"> Aby znaleźć pracę, którą kochasz
W tej lekcji pokażę ci, jak stworzyć minimalistyczne, ale jednocześnie wygodne i funkcjonalne galeria zdjęć na jQuerylub galeria obrazów, jak wygodne. Galeria ma możliwość tworzenia kategorii, a następnie filtracja. Możliwe jest również uruchomienie pokazu slajdów. Galeria działa we wszystkich przeglądarkach, więc nie będzie żadnych problemów z adaptacją.
Dwa bezpłatne biblioteki zostaną wykorzystane do tworzenia tej galerii. JQuery: Quicksand.i Śliczne zdjęcie. Świetnie upraszczają tworzenie galerii. Jak zawsze można zobaczyć wynik na stronie DEMO, a także pobrać archiwum za pomocą galerii roboczych i wszystkich plików źródłowych. Jedyny minus, jeśli tak, aby mówić, jest utworzenie ręcznego miniatury dla dużych obrazów. I w całej reszcie tego galeria Przyzwoita uwaga.
ŹRÓDŁA
Znakowanie HTML.
Po pierwsze, przeanalizujemy panel listę kategorii, jest to wyraźna lista ul. Ponadto każdy element listy musi mieć unikalną nazwę klasy.


• Kategorie:


• Wszystko


• Kategoria 1.


• Kategoria 2.


• Kategoria 3.


• Kategoria 4.











Nazwij zdjęcia.






Jak wspomniano powyżej, elementy listy są obrazy w galerii. Każda pozycja listy zawiera kompozyt. Jest to bezpośrednio sam, bardziej dokładnie jego miniaturę, a także opis. Miniatura jest linkiem do głównego obrazu. Atrybut rels jest wymagany do wywołania JavaScript i otworzyć główny obraz.
Nie zapomnij także o 2 ważnych rzeczach, atrybut elementu LI LIC Atrybut ID musi być unikalny. Atrybut typu danych zawiera klasę klasy, którą opisałem powyżej. Markup wydaje się być wszystkim.
Style CSS.
Szczególnie wyostrzyć uwagę na stylach, nie, ponieważ używamy gotowej biblioteki Śliczne zdjęciektóry jest odpowiedzialny za zwiększenie obrazu, a kod CSS jest dość dużo. Warto jednak zauważyć za 5 opcji projektu powiększonego obrazu, choć idealnie 3, ponieważ w dwóch wersjach jest tylko usunięty.
Dlatego pokażę tylko Style CSS. Dla miniatur i listy kategorii.
Portfolio-Kategoria (margines-Dolne: 30px;)
.portfolio-kategoria li (
Wyświetlacz: Inline;
Margines prawy: 10px;
}
.image-block (
Blok wyświetlacza;
Pozycja: krewna;
}
.image-block img (
Granica: 1px Solid # D5D5D5;
RADIUS RADIUS: 4PX 4PX 4PX 4PX;
Tło: #fffff;
Wyściółka: 10px;
}
.MAGE-BLOCK IMG: HOVER (
Granica: 1px Solid # A9CF54;
BOX-CHAD: 0 0 5PX # A9CF54;
}
.portfolio-area li (
Float: Left;
Marża: 0 12px 20px 0;
Przepełnienie: Ukryte;
Szerokość: 245px;
Wypełnienie: 5px;
}
.home-portfolio-tekst (margines-top: 10px;)
li.Active A (Dekoracja tekstowa: Podkreślenie;)
Zasadniczo ze stylami powinno być jasne. Aby kategorie były ustawione w pewnej liczbie, właściwość wyświetlacza dołącza inline. Aby dać efekt udaru obrazu, kolor tła (biały) i tiret w 10 pikseli. Wymiary elementów listy są ustawione w .portfolio-area li.
jQuery.
Cóż, w końcu najważniejszą rzeczą jest całą lekcję. Jest to kod jQuery. Zacznijmy od filtrowania zdjęć, według kategorii.
// Wybierz wszystkie elementy córki obszaru portfolio i zapisu do zmiennej
var $ Data \u003d $ (". Portfolio-area"). Klon ();
$ ("Portfolio-kategoria li"). Kliknij (Funkcja (e) (
$ (". Filtr li"). Removeclass ("aktywny");
Var filterclass \u003d $ (to) .attr ("klasa"). Split ("") .Slice (-1);
If (FilterClass \u003d\u003d "All") (
Var $ FilteredData \u003d $ Data.find ("Portfolio-Item2");
) Inna (
Var $ FilteredData \u003d $ Data.find ("Portfolio-Item2");
}
$ ("Portfolio-area"). Quicksand ($ Filtereddata, (
Czas trwania: 600,
Adjusheight: "Auto"
), Funkcja () (
Lightboxphoto ();
});
$ (to) .adclass ("aktywny");
Zwracać false;
});
US Metoda metody klonu () i selektora, wybierz wszystkie elementy dziecka z obszaru .portfolio i napisz je do zmiennej $ Data. Następnie śledzić kliknięcie jednej z kategorii, element Li z listy z klasą klasy .portfolio-kategorii. Wykonujemy wszystkie kategorie, które nie są aktywne, usuwając Removeclass ("Active"), jeśli to nie robi, w czasie, wszystkie kategorie będą aktywne i filtrowania do zatrzymania.
Ponieważ kliknięcie elementu listy, w tym wyborze znajduje się element listy, który jest LI, wykonuje tylko wartość atrybutu klasy i przy użyciu metody podziału, podzielamy nazwę klasy na kilka części, Granica jest przestrzenią (tj. Jeśli klasa była "wszystkie aktywne" po złamaniu, otrzymujemy tablicę z "All" i "Active"). A nawet dalej metodą plasterki wybierz pierwszy element tablicy (w naszym przypadku "All") i napisz wynikowy wynik zmiennej wklurze filtracyjnej. Jeśli luka nie była nazwa klasy, która nie zmieniła się.
Następnie sprawdź, czy w łańcuchu z poletki z filtra wszystko., Wybieram wszystkie elementy z klasą Portfolio-Item2 z $ Massif Masif, które uwzględniliśmy powyżej. Wybrane elementy (i są to wszystkie elementy listy, czyli wszystkie zdjęcia) umieszczone w zmiennej filtracji.
W przeciwnym razie, jeśli klasa filtracyjna nie jest równa wszystko., W zmiennej filtracji, a nie wszystkie elementy listy, ale tylko te, których atrybut typu danych zbiegają się z klasą kategorii. Krótko mówiąc, elementy tylko jednej kategorii.
A ostatecznie otrzymana zmienna przekazuje do biblioteki jquery Quicksand.co sprawia, że \u200b\u200bfiltrowanie zdjęć. Wszystkie dotyczy filtrowania.
Teraz, jak w przypadku zwiększenia obrazu w oknie podręcznym. Wszystko jest tutaj znacznie łatwiejsze.
JQuery ("A"). Prettyphoto ((
AnimationSpeed: "Szybko",
Pokaz slajdów: 5000,
Temat: "Facebook",
Show_title: false,
Nakładka_galeria: Fałsz.
});
Kliknięcie jest śledzone przez odniesienie, które atrybut rel. Zaczyna się od prettyphoto. Po wprowadzeniu biblioteki Śliczne zdjęcieA obraz jest cudowny wzrost. Nawiasem mówiąc, transmitujemy kilka parametrów. Takich jak szybkość animacji - szybka, opóźnienie na pokorze slajdów - 5 sekund, tematu Facebooka (tylko 5 tematów znajdują się w folderze obrazów / prettyphoto), a także zabronić wyświetlania nazwy obrazu i zwiększenia obraz po najechaniu myszy.
Dzielić.
Dzielić.
Ćwierkać.
Lubić
Lubić