Czas nie stoi w miejscu, a wraz z nim postęp. Wpłynęło to również na Internet. Już widać, jak zmienia się wygląd stron, jest to szczególnie popularne projekt adaptacyjny. W rezultacie wiele nowych responsywne suwaki jquery, galerie, karuzele lub podobne wtyczki.
1. Responsywny suwak poziomych słupków

Responsywna pozioma karuzela z szczegółowa instrukcja przez instalację. Jest wykonany w prostym stylu, ale możesz go zaprojektować dla siebie.

2. Suwak na Glide.js

Ten suwak jest odpowiedni dla każdej strony internetowej. Używa Glide.js z otwarte źródło. Kolory suwaków można łatwo zmieniać.

3. Pokaz slajdów z przekrzywioną treścią

Responsywny suwak treści. Najważniejszym elementem tego suwaka jest efekt 3D obrazów, a także różne animacje losowego wyglądu.

4. Suwak przy użyciu płótna HTML5

Bardzo piękny i imponujący suwak z interaktywnymi cząsteczkami. Wykonane z płótna HTML5

5. Suwak morfingu obrazu

Suwak z efektem morfingu (Płynna transformacja z jednego obiektu do drugiego). W ten przykład suwak jest dobrze dopasowany do portfolio programisty internetowego lub studia internetowego w formie portfolio.

6. Okrągły suwak

Suwak w kształcie koła z efektem odwracania obrazu.

7. Suwak niewyraźnego tła

Responsywny suwak z przełączaniem i rozmyciem tła.

8. Responsywny suwak mody

Prosty, lekki i responsywny suwak strony internetowej.

9. Slicebox - suwak obrazu jQuery 3D(ZAKTUALIZOWANE)

Zaktualizowana wersja suwaka Slicebox z poprawkami i nowymi funkcjami.

10. Bezpłatna animowana siatka obrazu responsywnego

Wtyczka jQuery do tworzenia elastycznej siatki obrazów, która będzie przełączać ujęcia przy użyciu różnych animacji i czasów. Może to dobrze wyglądać jako tło lub element dekoracyjny na stronie, ponieważ możemy ustawić selektywny wygląd nowych obrazów i ich przejść. Wtyczka wykonana jest w kilku wersjach.

11. Suwak Flex

Uniwersalna darmowa wtyczka do Twojej witryny. Ta wtyczka jest dostępna w wielu opcjach suwaków i karuzeli.

12. Ramka na zdjęcia

Fotorama to uniwersalna wtyczka. Posiada wiele ustawień, wszystko działa szybko i łatwo, można oglądać slajdy na pełnym ekranie. Suwak może być używany zarówno w stałym rozmiarze, jak i adaptacyjnym, z miniaturami i bez nich, z przewijaniem kołowym i bez niego i wiele więcej.

PSSuwak włożyłem kilka razy i uważam, że jest jednym z najlepszych

13. Darmowy i responsywny suwak galerii miniatur 3D.

Eksperymentalna galeria suwaków Układ panelu 3D z siatką i ciekawymi efektami animacji.

14. Suwak na CSS3

Responsywny slider wykonany w css3 z płynnym wyglądem treści i lekką animacją.

15. Suwak WOW

Suwak WOW to suwak obrazu z niesamowitymi efektami wizualnymi.

17.Elastyczny

Elastyczny suwak z pełną responsywnością i miniaturami slajdów.

18. Szczelina

Jest to responsywny suwak pełnoekranowy wykorzystujący animację CSS3. Suwak wykonany jest w dwóch wersjach. Animacja jest wykonana dość nietypowo i pięknie.

19. Responsywna galeria zdjęć plus

Prosty darmowy suwak-galeria z wgrywaniem zdjęć.

20. Responsywny suwak dla WordPress

Responsywny darmowy suwak dla WP.

21. Suwak treści paralaksy

Suwak z efektem paralaksy i kontrolą każdego elementu za pomocą CSS3.

22. Suwak z oprawą muzyczną

Slider przy użyciu JPlayera o otwartym kodzie źródłowym. Ten suwak przypomina prezentację z muzyką.

23. Suwak z jmpress.js

Suwak responsywny jest oparty na jmpress.js i dlatego pozwala na zastosowanie ciekawych efektów 3D na slajdach.

24. Szybki pokaz slajdów

pokaz slajdów z szybkie przełączanie slajdy. Slajdy włączają się.

25. Akordeon obrazu z CSS3

Obraz akordeon z CSS3.

26. Zoptymalizowana dotykowo wtyczka galerii

To responsywna galeria zoptymalizowana pod kątem urządzeń dotykowych.

27. Galeria 3D

Galeria ścian 3D- stworzony dla przeglądarki Safari, gdzie będzie widoczny efekt 3D. Podczas oglądania w innej przeglądarce funkcjonalność będzie w porządku, ale efekt 3D nie będzie widoczny.

28. Suwak z paginacją

Responsywny suwak stronicowania z suwakiem jQuery UI. chodzi o zastosowanie prostej koncepcji nawigacji. Możliwe jest przewijanie wszystkich obrazów lub przełączanie między slajdami.

29. Montaż obrazu za pomocą jQuery

Automatyczne rozmieszczenie obrazów w zależności od szerokości ekranu. Bardzo przydatna rzecz przy tworzeniu strony z portfolio.

30. Galeria 3D

Prosty okrągły suwak 3D w CSS3 i jQuery.

31. Tryb pełnoekranowy z efektem 3D na css3 i jQuery

Suwak z możliwością wyświetlania pełnoekranowych obrazów z pięknym przejściem.

Kompetentnie skomponowany i zaprojektowany wizualnie, w naszym przypadku jest to osobna strona, jest ważnym elementem osobistej strony internetowej lub bloga, każdego specjalisty, który osiągnął pewien poziom umiejętności w swoim działalność zawodowa.
Strona portfolio to rodzaj raportu lub wizualnego podsumowania, za pomocą którego możesz wyraźnie zademonstrować czytelnikom i odwiedzającym witrynę / blog, zestaw najbardziej udanych ukończonych prac, czy to zdjęcia, artykuły, publikacje , elementy projektu itp.
Nie mam takiej strony i z mojej strony jest to niefortunne przeoczenie, które trzeba jak najszybciej poprawić, nad tym, co właściwie w ten moment i pracuję.
W rozległych przestrzeniach globalnej sieci można znaleźć ogromną liczbę gotowe szablony strony do organizacji portfela, a różnorodność takich stron jest naprawdę imponująca. Tak więc każdy, kto dba o wszystkie zawiłości projektowania i tworzenia stron internetowych, zawsze będzie mógł znaleźć odpowiednią dla siebie opcję. Otóż ​​dla tych, którzy cierpią na wiedzę z zakresu budowy stron internetowych, proponuję przeanalizować przykład adaptacyjnego layoutu, prostą stronę portfolio, z filtrowaniem prac po kategoriach, wykonanych na, rozrzedzonych atrakcyjnym efektem przejścia, z elementami animacji.

Układ strony, wykonywalny javascript i niektóre elementy projektu rozdawały „w górę”, wspaniałego projektanta stron internetowych i programistę Kevina Liewa (queness.com). Przy wyborze optymalnego rozwiązania zależało mi na łatwości wykonania, funkcjonalności wtyczki jQuery, poprawnym działaniu we wszystkich nowoczesnych przeglądarkach, a biorąc pod uwagę coraz większą popularność korzystania z różnych urządzeń mobilnych do surfowania po Internecie, projektu przyszłej strony. Żadnych pretensjonalnych, designerskich dzwonków i gwizdków oraz ciężkich wtyczek.

Podstawowy układ składa się z dwóch głównych elementów interfejs użytkownika Te, które musimy zbudować, to nawigacje z zakładkami do filtrowania kategorii przesłanych prac oraz sama siatka miniatur z efektem podpisu pop-up po najechaniu myszą.
Na początek, aby wszystko w końcu zadziałało, jQuery będzie wymagane co najmniej w wersji 1.7.0. Jeśli jeszcze go nie podłączyłeś, dodaj następujący wiersz przed tagiem :

Uruchom wtyczkę MixItUp, wklej ten kod po powyższych plikach:

< script type= "text/javascript" >$(function() (var filterList = (init: function()) ( $("#portfoliolist" ) . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing : "snap" , // wywołaj efekt najechania onMixEnd: filterList. hoverEffect() ) ) ); ), hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function() ( $(this) ). find(.label" ) .stop() .animate(( dół: 0 ) , 200 , "easeOutQuad" ) ; $(this) .find("img" ) .stop() .animate(( góra: - 30 ) , 500 , "easeOutQuad" ); ) , function() ( $(this) . find(.label" ) .stop() .animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) .find("img" ) .stop() .animate(( góra: 0 ) , 300 , "easeOutQuad" ) ; )) ; ) ); filterList.init() ; ) );

Nie ma sensu rozważać wszystkich opcji wtyczek osobno, domyślna jest najlepszą opcją. Cóż, jeśli ktoś poddaje się eksperymentom z parametrami, proszę, wszystko jest w twojej mocy.

Aby utworzyć układ strony i wygląd elementów, połącz kilka plików z dokumentem . , jeden dla stylów bazowych, nazwijmy go layout.css i inny mały plik CSS normalize.css , dla lepszej spójności przeglądarki w standardowy projekt elementy:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Teraz przeanalizujemy wszystko po kolei, jeśli to możliwe bez zbędnej wody, w przystępny i zrozumiały sposób, w naszym ojczystym, cierpliwym języku.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Wszystko < li>< span class = "filter" data- filter= "app" >Aplikacje < li>< span class = "filter" data- filter= "card" >wizytówki < li>< span class = "filter" data- filter= "icon" >Ikony < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >projektowanie stron

  • Wszystko
  • Aplikacje
  • wizytówki
  • Ikony
  • Logo
  • projektowanie stron

W panelu nawigacyjnym umieszczamy całą listę prac, podzieloną na kategorie. Musimy połączyć każdą kategorię portfela za pomocą atrybutu data-cat z jednym lub innym elementem paska nawigacyjnego zgodnie z wartością w atrybucie data-filter. Dopasowując wartości filtra danych z data-cat , pozycje portfela będą filtrowane według kategorii.
Dodatkowo do miniaturki, na razie ukrytej, dodamy mały panel z nazwą pracy i tytułem kategorii, który wyskakuje dopiero po najechaniu na obraz. A żeby ułatwić kształtowanie wyglądu całej tej struktury w CSS, do elementów napiszemy odpowiednie klasy:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Rozpoczęcie hostingu. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

.........

Pamiętaj, że możesz dodać linki do zdjęcia lub bezpośrednio do podpisu, aby użytkownik mógł zobaczyć całą Twoją pracę w całości.

css

Teraz spokojnie, przejdźmy do najciekawszej części, do tworzenia w CSS ogólnych stylów interfejsu użytkownika naszej strony portfolio i jej adaptacyjnej wersji. W artykule wskażę tylko podstawowe (domyślne) wartości, czyli bez żadnych zdjęcia w tle i połączone czcionki, wszystko to, kto tego potrzebuje, można zobaczyć w demie lub znaleźć w archiwum źródłowym.

.container ( pozycja : względna ; szerokość : 960px ; margines : 0 auto ; /* Łańcuch nawigacji będzie widoczny po zmianie rozmiaru okna przeglądarki */-przejście na webkit: łatwość wszystkich 1s; -moz-przejście: łatwość wszystkich jedynek; -o-przejście: łatwość wszystkich jedynek; przejście : łatwość wszystkich 1s; ) #filters ( margin : 1% ; padding : 0 ; list-style : none ; ) #filters li ( float : left ; ) #filters li span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* dodaj cień do tekstu */ cień tekstu : 1px 1px #FFFFFF ; kursor : wskaźnik ; ) /* zmiana tła kategorii po najechaniu kursorem */#filters li span: hover ( background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) /* tło aktywnego elementu kategorii */#filters li span.active ( background : rgb (62 , 151 , 221) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; ) .portfolio-wrapper ( przepełnienie : ukryte ;pozycja : względne !ważne;tło : #666 ;kursor : wskaźnik ; ) .portfolio img ( max-width : 100% ; pozycja : względne ; ) /* podpisy są domyślnie ukryte */.portfolio .label ( pozycja : bezwzględna ; szerokość : 100% ; wysokość : 40px ; dół : -40px ; ) % ; pozycja : bezwzględna ; góra : 0 ; lewa : 0 ; ) .portfolio .label-text ( kolor : #fff ; pozycja : względna ; z-index : 500 ; padding : 5px 8px ; ) display : block ; font-size : 9px ; )

Kontener ( pozycja: względna; szerokość: 960px; margines: 0 auto; /* Będziesz mógł zobaczyć łańcuch przejść po zmianie rozmiaru okna przeglądarki */ -webkit-transition: wszystkie jedynki; -moz-transition: wszystkie jedynki łatwość; -o- przejście: łatwość wszystkich jedynek; przejście: łatwość wszystkich jedynek; ) #filters ( margin:1%; padding:0; styl listy:brak; ) #filters li ( float:left; ) #filters li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* dodaj trochę cienia do tekstu */ text-shadow: 1px 1px #FFFFFF; kursor: wskaźnik; ) /* zmień tło kategorii on hover */ #filters li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* tło aktywnego elementu kategorii */ #filters li span.active ( background: rgb(62, 151, 221 ); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- box; -o-box- sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .po rtfolio-wrapper ( przepełnienie:ukryte; pozycja: względna !ważne; tło: #666; kursor:wskaźnik; ) .portfolio img ( max-width:100%; pozycja: względne; ) /* etykiety są domyślnie ukryte */ .portfolio .label ( pozycja: bezwzględna; szerokość: 100%; wysokość:40px; dół:-40px; ) . portfolio .label-bg ( background: rgb(62, 151, 221); szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra:0; lewa:0; ) .portfolio .label-text ( kolor: # fff; position: relatywne; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

W drugiej części, w tym samym arkuszu stylów, za pomocą kilku zapytań o media, stworzymy alternatywne sekcje CSS. Aby układ naszej strony wyświetlał się poprawnie na ekranach różnych urządzeń mobilnych, dodamy do tych sekcji alternatywne reguły CSS dla różnych ekranów. W ten sposób z łatwością zastępujemy wszelkie reguły ustawione wcześniej w naszej tabeli CSS dla zwykłych przeglądarek i osiągamy bardzo pożądaną zdolność adaptacji.

/* Tablet */ @media only screen and (min-width : 768px ) and (max-width : 959px ) ( .container ( width : 768px ; )) ) /* Komórka - Uwaga: projekt dla szerokości 320px*/@media only screen and (max-width : 767px ) ( .container ( szerokość : 95% ; ) #portfoliolist .portfolio ( szerokość : 48% ; margines : 1% ; ) ) /* Mobile - Uwaga: Projekt dla szerokości 480px */@media only screen and (min-width : 480px ) and (max-width : 767px ) ( .container ( szerokość : 70% ; ) )

/* Tablet */ @media only screen and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile - Uwaga: Projektuj tylko dla szerokości 320px*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile - Uwaga: Zaprojektowany dla szerokości 480px */ @media tylko ekran i (min-szerokość: 480px) i (max-szerokość: 767px) ( .container ( szerokość: 70%; ) )

To wszystko. Nasza cudowna strona pod pojemną nazwą "Portfolio" jest gotowa, pozostaje tylko zapełnić ją Waszymi nie mniej wspaniałymi i wybitnymi dziełami i wystawić ją całemu światu. Nadal możesz spokojnie, skromnie, być z siebie dumnym. Najważniejsze, żeby w tej sprawie nie przesadzać.
Zobacz przykład ponownie i, jeśli to konieczne, weź kod źródłowy, w wolnym czasie, w cichym środowisku domowym, możesz doprowadzić tę pracę do perfekcji.

Podczas tworzenia lekcji wykorzystano materiał: . Znajduje się tam oryginalna, nieskazitelna, właśnie spod pióra autora, strona portfolio.

Powodzenia wszystkim i z korzyścią dla organizmu spędź resztę krótkiego lata!

Obecnie suwak karuzeli to funkcja, którą po prostu trzeba mieć w witrynie biznesowej, witrynie portfolio lub dowolnym innym zasobie. Wraz z pełnoekranowymi suwakami obrazu, poziome suwaki karuzeli dobrze pasują do każdego projektu internetowego.

Czasami suwak musi zająć jedną trzecią strony witryny. Tutaj suwak karuzeli jest używany z efektami przejścia i responsywnymi układami. Witryny handlu elektronicznego używają suwaka karuzeli do wyświetlania wielu zdjęć w osobnych postach lub na stronach. Kod suwaka można dowolnie używać i zmieniać zgodnie z własnymi potrzebami.

Używając jQuery w połączeniu z HTML5 i CSS3, możesz uatrakcyjnić swoje strony dzięki unikalnym efektom i przyciągnąć uwagę odwiedzających do określonego obszaru witryny.

Slick - nowoczesna wtyczka suwaka karuzeli

Slick to darmowa wtyczka jQuery, której programiści twierdzą, że ich rozwiązanie spełni wszystkie wymagania dotyczące slidera. Responsywny suwak - karuzela może pracować w trybie „kafelkowym” dla urządzeń mobilnych oraz w trybie „przeciągnij i upuść” dla wersji desktopowej.

Zawiera efekt przejścia zanikania, ciekawą funkcję „tryb w centrum”, leniwe ładowanie obrazów z automatycznym przewijaniem. Zaktualizowana funkcjonalność obejmuje dodawanie slajdów i filtru slajdów. Wszystko po to, aby dostosować wtyczkę do swoich wymagań.

Tryb demonstracyjny | Ściągnij

Owl Carousel 2.0 - wtyczka jQuery dla urządzeń dotykowych

Ta wtyczka ma duży zestaw funkcji, odpowiedni zarówno dla początkujących, jak i doświadczonych programistów. To jest zaktualizowana wersja suwaka karuzeli. Jego poprzednik nosił to samo imię.

Suwak ma kilka wbudowanych wtyczek poprawiających ogólną funkcjonalność. Animacja, odtwarzanie wideo, autoodtwarzanie suwaka, powolne ładowanie, automatyczna regulacja wysokości - główne cechy Owl Carousel 2.0.

Obsługa przeciągania i upuszczania jest włączona dla wygodniejszego korzystania z wtyczki urządzenia mobilne.
Wtyczka doskonale nadaje się do wyświetlania dużych obrazów nawet na małych ekranach urządzeń mobilnych.

Przykłady | Ściągnij

Wtyczka jQuery Silver Track

Dość mała, ale bogata wtyczka jquery, która pozwala umieścić na stronie suwak karuzeli, który ma mały rdzeń i nie zużywa dużo zasobów witryny. Wtyczka może służyć do wyświetlania pionowych i poziomych suwaków, z animacją oraz tworzenia zestawów obrazów z galerii.

Przykłady | Ściągnij

AnoSlide - Ultra kompaktowy responsywny suwak jQuery

Ultrakompaktowy slider jQuery to karuzela, która ma dużo więcej funkcji niż zwykły slider. Obejmuje to zapowiedź pojedynczy obraz, wyświetlający wiele obrazów w karuzeli i suwaku na podstawie tytułów.

Przykłady | Ściągnij

Sowa Karuzela - suwak jquery - karuzela

Karuzela Sowa to suwak z obsługą ekranów dotykowych i technologie przeciągania i upuść , łatwo osadzony w kodzie HTML. Wtyczka to jeden z najlepszych sliderów pozwalających tworzyć piękne karuzele bez specjalnie przygotowanych znaczników.

Przykłady | Ściągnij

Galeria 3D - karuzela

Używa przejść 3D opartych na stylach CSS i niektórych kodach JavaScript.

Przykłady | Ściągnij

Karuzela 3D wykorzystująca TweenMax.js i jQuery

Wspaniała karuzela 3D. Wygląda na to, że wciąż jest to wersja beta, ponieważ właśnie znalazłem z nią kilka problemów. Jeśli jesteś zainteresowany testowaniem i tworzeniem własnych sliderów, ta karuzela będzie bardzo pomocna.

Przykłady | Ściągnij

Karuzela za pomocą bootstrapu

Responsywny suwak karuzeli wykorzystujący technologię bootstrap w sam raz dla Twojej nowej witryny.

Przykłady | Ściągnij

Slider oparty na Bootstrapie - Karuzela Moving Box

Najbardziej poszukiwane na stronach portfolio i firm. Podobny rodzaj suwaka - karuzela często znajduje się w witrynach dowolnego typu.

Przykłady | Ściągnij

Mały suwak kółka

Ten niewielki suwak jest gotowy do pracy na urządzeniach o dowolnej rozdzielczości ekranu. Suwak może pracować zarówno w trybie kołowym, jak i karuzelowym. Małe kółko jest prezentowane jako alternatywa dla innych tego typu sliderów. Ma wbudowaną obsługę system operacyjny iOS i Android.

W trybie kołowym suwak wygląda całkiem ciekawie. Obsługa metody przeciągnij i upuść oraz system automatycznego przewijania slajdów są dobrze zaimplementowane.

Przykłady | Ściągnij

Suwak zawartości Calineczka

Potężny, adaptacyjny suwak typu karuzela jest idealny do nowoczesnej witryny. Działa poprawnie na każdym urządzeniu. Ma tryby poziome i pionowe. Jego rozmiar jest zminimalizowany do zaledwie 1 KB. Ultrakompaktowa wtyczka zapewnia doskonałe płynne przejścia.

Przykłady | Ściągnij

Wow suwak karuzeli!

Zawiera ponad 50 efektów, które pomogą Ci stworzyć oryginalny slider dla Twojej witryny.

Przykłady | Ściągnij

Responsywny suwak treści jQuery bxSlider

Zmień rozmiar okna przeglądarki, aby zobaczyć, jak dostosowuje się suwak. Bxslider zawiera ponad 50 opcji dostosowywania i prezentuje swoje funkcje z różnymi efektami przejścia.

Przykłady | Ściągnij

jKaruzela

jCarousel to wtyczka jQuery, która pomoże uporządkować widoki obrazów. Będziesz mógł łatwo tworzyć niestandardowe karuzele obrazów z frameworka pokazanego w przykładzie. Suwak jest responsywny i zoptymalizowany pod kątem platform mobilnych.

Przykłady | Ściągnij

ScrollBox - wtyczka jQuery

Scrollbox to kompaktowa wtyczka do tworzenia slidera - karuzeli lub biegnącej linii tekstowej. Kluczowe funkcje obejmują efekt przewijania w pionie i poziomie z pauzą po najechaniu myszą.

Przykłady | Ściągnij

dbpasKaruzela

Prosty suwak karuzeli. Jeśli potrzebujesz szybkiej wtyczki, ta jest w 100% odpowiednia. Zawiera tylko podstawowe funkcje potrzebne do działania suwaka.

Przykłady | Ściągnij

Flexisel: responsywna wtyczka JQuery Carousel Slider

Twórcy Flexisel zainspirowali się oldschoolową wtyczką jCarousel, tworząc jej kopię nastawioną na poprawne działanie slidera na urządzeniach mobilnych i tabletach.

Układ responsywny Flexisel, działający na urządzeniach mobilnych, różni się od układu zorientowanego na rozmiar okna przeglądarki. Flexisel jest doskonale przystosowany do pracy na ekranach zarówno o niskiej jak i wysokiej rozdzielczości.

Przykłady | Ściągnij

Elastislide — responsywny suwak karuzeli

Elastislide idealnie dopasowuje się do wielkości ekranu urządzenia. Możesz ustawić minimalną liczbę obrazów do wyświetlenia w określonej rozdzielczości. Działa dobrze jako suwak karuzeli z galeriami obrazów przy użyciu stałego opakowania wraz z efektem przewijania w pionie.

Przykład | Ściągnij

Suwak elastyczny 2

Darmowy suwak z Woothemes. Jest słusznie uważany za jeden z najlepszych responsywnych suwaków. Wtyczka zawiera kilka szablonów i przyda się zarówno początkującym użytkownikom, jak i ekspertom.

Przykład | Ściągnij

Niesamowita karuzela

Amazing Carousel to responsywny suwak obrazu jQuery. Obsługuje wiele systemów zarządzania treścią, takich jak WordPress, Drupal i Joomla. Obsługuje również systemy operacyjne Android i IOS oraz komputerowe wersje systemów operacyjnych bez żadnych problemów ze zgodnością. Wbudowane niesamowite szablony karuzeli umożliwiają korzystanie z suwaka w trybie pionowym, poziomym i kołowym.

Przykłady | Ściągnij

W tym samouczku napiszemy piękne portfolio za pomocą jQuery, CSS3 i wtyczki Timeline. Timeline to wtyczka jquery, która specjalizuje się w wyświetlaniu osi czasu zdarzeń. W tym portfolio możesz osadzić różne rodzaje dane multimedialne: tweety, filmy, mapy, zdjęcia, nagrania, a następnie uporządkuj je według daty. Pracując nad projektem otrzymasz piękne portfolio, które będzie odzwierciedlało Twoje zainteresowania i pracę.

HTML

Domyślnie wtyczka Timeline zawiera jasny schemat kolorów. W większości przypadków jest to bardzo wygodne i konieczne. Chociaż w naszym portfolio ciemny wzór jest bardziej elegancki. Dlatego optymalizujemy go tak, jak lubimy.

Najpierw spójrzmy na podstawowe znaczniki HTML strony:

indeks.html

Portfolio osi czasu | Demo samouczka

W sekcji head mamy style wtyczek - timeline.css i styles.css - które będą zawierać nasze wybory projektowe. Na końcu strony dołączamy bibliotekę jQuery, wtyczkę osi czasu oraz scripts.js, który zainicjuje wtyczkę.

Kiedy wywołujemy wtyczkę, znajduje blok DIV z ID=timeline. Wewnątrz bloku montuje znacznik html, po czym strona staje się następująca:

Johnny B. Goode

projektant & deweloper

Marzec 2009

Mój pierwszy eksperyment w fotografii poklatkowej

W tym filmie natura w najlepszym wydaniu.

Marzec 2010
Projekt logo dla sklepu zoologicznego
czerwiec 2009
Kolejny eksperyment poklatkowy

Ponieważ będziemy wprowadzać pewne zmiany w stylach CSS, powyższy kod daje lepsze wyobrażenie o strukturze portfela. Zauważ, że nie zmienimy domyślnych stylów wtyczki, nadpiszemy tylko niektóre atrybuty w naszym własnym pliku css. Daje nam to przewagę w przyszłych zmianach projektu portfolio.

Pisanie CSS omówimy szczegółowo, ale trochę później. Jedyną rzeczą jest to, że będziemy musieli przepisać wszystkie instrukcje na podstawie istniejących, ale zajmiemy się tym później.

jQuery

Aby zainicjować wtyczkę, musimy wywołać metodę VMM.Timeline():

$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

Metoda init przyjmuje prosty argument, zasób danych. Może to być plik json, jak w powyższym kodzie, lub arkusz kalkulacyjny Google.

Aby dowiedzieć się więcej o tym, jak to działadane.json, pobierz źródła lekcji. Nie ma tu nic skomplikowanego, nie ma potrzeby opisywania struktury tego pliku.

css

Za pomocą Firebug HTML Inspector możesz zdefiniować selektory dla elementu HTML, które są zdefiniowane w timeline.css. Następnie, używając tych samych selektorów, możesz przypisać swoje style w pliku styles.css. W niektórych przypadkach używałem ! ważny aby nadać priorytet własnym stylom.

Wszystkie zmiany, które zobaczysz poniżej, są dodawane ręcznie za pomocą Style CSS. Pozostałe elementy stylu są domyślnie ustawiane przez wtyczkę.

Przede wszystkim po ogólnej stylizacji strony zmienimy tło portfolio:

#timeline( background:none; ) /* Poszczególne zdarzenia w suwaku */ .slider .slider-container-mask .slider-container( background:none; ) /* Ustawianie własnego obrazu tła */ #timeline div.navigation ( background: url("../img/timeline_bg.jpg") powtórz; border-top:none; )

Aby stworzyć efekt 3D, blok nawigacyjny, będziemy musieli użyć . Element :after to ciemna górna część i wykorzystuje gradient liniowy, aby nadać mu efekt 3D.

#timeline div.navigation:before( position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url(../img/timeline_bg.jpg") repeat; ) #timeline div.navigation:after( position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear- gradient(bottom, #434446 0%, #363839 100%); obraz w tle: -o-linear-gradient(bottom, #434446 0%, #363839 100%); obraz w tle: -moz-linear-gradient( dół, #434446 0%, #363839 100%); obraz w tle: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); obraz w tle: -ms-linear-gradient(na dole, #434446 0%, #363839 100%); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !ważne; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -highlight( background-color:transparent !ważne; )

Stylizowanie przycisków powiększania i pomniejszania na pasku narzędzi:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

Styl skali na dole:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

Strzałki na poprzednie i następne wydarzenie:

Suwak .nav-previous .icon ( background: url("timeline.png") no-repeat scroll 0 -293px transparent; ) .slider .nav-previous,.slider .nav-next( font-family:"Segoe UI" , sans-serif; ) .slider .nav-next .icon ( background: url("timeline.png") przewijanie bez powtórzeń 72px -221px transparent; szerokość: 70px !important; ) .slider .nav-next:hover . icon( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( kolor: #666; kursor: wskaźnik; ) #oś czasu .thumbnail ( border: medium brak; )

Załaduj tło:

#timeline .feedback ( background-color: #222222; box-shadow: 0 0 30px rgba (0, 0, 0, 0,2) inset; border:none; ) #timeline .feedback div( color: #AAAAAA; font-size : 14px !ważne; grubość czcionki: normalna; )

#oś czasu .slider-item h2, #oś czasu .slider-item h3(rodzina czcionek:"Antic Slab","Segoe UI",sans-serif; ) #oś czasu .slider-item h2( kolor:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

Na koniec zmienimy okładkę. Użyłem nth-child(1) do linku tylko do pierwszego slajdu (okładki), który zawiera tytuł i opis portfolio. Te dane są przechowywane w pliku JSON.

/* Dostosowanie pierwszego slajdu - okładki */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); odstępy: nowrap; padding:10px 5px 5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); białe znaki: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #oś czasu .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( left: -30px; position: relative; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( text-align: center; )

Pozostaje tylko otworzyć timeline.psd, który jest dołączony w pliku wtyczki i zmienić kolor niektórych ikon. Dodałem wszystkie potrzebne pliki do źródeł tego samouczka. To kończy tworzenie portfolio jQuery ze stylami CSS3!

Co z tym zrobić?

Możesz wykorzystać to portfolio nie tylko do wyświetlania najnowszych projektów, ale także ciekawych i ważne punkty Twoja kariera. To jak mini pamiętnik twojego życia! Mam nadzieję, że podobał Ci się ten samouczek. Podziel się swoimi przemyśleniami w komentarzach poniżej.

Długo wybrałem temat na dzisiejszy temat. W rezultacie zauważyłem, że nie dokonaliśmy jeszcze selekcji z galerie zdjęć. Myślę, że to świetny temat, ponieważ galerie obecny na wielu stronach. Szczerze mówiąc, żadna z nich nie jest zbyt atrakcyjna. Biorąc pod uwagę obecne trendy rozwojowe jquery, html5 itd. Pomyślałem, bo powinny już być dużo bardziej atrakcyjne rozwiązania niż te, które spotkałem wcześniej. Więc. Po spędzeniu dnia udało się znaleźć ogromne ilości skrypty. Z całej tej góry postanowiłem wybrać tylko, bo kocham, jak już zauważyliście z poprzednich postów.
Galeria obrazów dotyczy nie tylko z albumami ze zdjęciami. Skrypt może być użyty, myślę, że będzie jeszcze bardziej poprawny, ponieważ portfolio dla fotografów, projektantów itp. efekty jquery pomoże przyciągnąć uwagę odwiedzających i po prostu doda elegancji Twojej stronie.
Więc. Kolekcja dla twojej uwagi Wtyczki do galerii obrazów jquery dla strony internetowej.
Nie zapomnij skomentować i pamiętaj, aby nie zgubić tej kolekcji, możesz dodać ją do ulubionych, klikając gwiazdkę na dole artykułu.

FOTOBOX
Bezpłatna, lekka, responsywna galeria obrazów, w którym wszystkie efekty, przejścia są wykonywane za pomocą css3. Idealny do stworzenia strony z portfolio dla fotografa.

Galeria S
Atrakcyjny Wtyczka galerii obrazów jquery. Animacja działa z CSS3.

DIAMENTY.JS
Oryginał wtyczka galerii obrazów. Miniatury są ukształtowane romb co jest obecnie bardzo popularne. Ten formularz jest wykonany w CSS3. Jedynym minusem tej galerii jest brak lightboxa, który otwierałby zdjęcie w pełnym rozmiarze. Oznacza to, że musisz przymocować wtyczkę lightbox za pomocą raków. Ten skrypt generuje adaptacyjną siatkę obrazu w kształcie rombu.

Superbox
Nowoczesna galeria obrazów przy użyciu jquery, css3 i html5. Wszyscy jesteśmy przyzwyczajeni do tego, że po kliknięciu podglądu pełny obraz otwiera się w lightbox (okno pop-up). Twórcy tej wtyczki uznali, że lightbox już przeżył swoją przydatność. Obrazy w tej galerii otwierają się pod podglądem. Sprawdź demo i zobacz, jak to rozwiązanie wygląda znacznie nowocześniej.
|
Gładka przekątna galeria zanikania
Nowoczesna galeria obrazów, w której podglądy są rozmieszczone na całej powierzchni ekranu. Skrypt może skanować folder ze zdjęciami na serwerze, to znaczy nie trzeba wstawiać każdego obrazu osobno. Wystarczy wgrać zdjęcia do folderu na serwerze i określić ścieżkę do katalogu w ustawieniach. Wtedy skrypt zrobi wszystko sam.

Galeria Gamma
Stylowa, lekka, responsywna galeria obrazów z siatką w stylu Pinterest, która jest teraz bardzo popularna. Skrypt działa dobrze, ponieważ komputery stacjonarne, wkrótce urządzenia mobilne z dowolną rozdzielczością ekranu. Świetne rozwiązanie do tworzenia portfolio projektanta stron internetowych.

SIATKA MINIATUR Z ROZWIJAJĄCYM SIĘ PODGLĄDEM
Wtyczka jest adaptacyjna siatka obrazu. Kliknięcie poniżej spowoduje wyświetlenie większego zdjęcia i opisu. Dobry do budowania portfela.

jGaleria
jGaleria jest pełnoekranowa, responsywna galeria obrazów. Efekty, przejścia, a nawet styl można łatwo dostosować.

Glisse.js
Prosta, ale bardzo skuteczna wtyczka galerii obrazów. To jest właśnie rozwiązanie, gdy potrzebujesz stworzyć album ze zdjęciami. Wtyczka obsługuje albumy i ma bardzo fajny efekt odwracania.

Mozaika przepływu
Prosty, adaptacyjny galeria obrazów z siatką w stylu Pinterest.

Galeria
Kolejna stylowa galeria w stylu Pinterest z filtrem kategorii. Działa w przeglądarkach: Chrome, Safari, Firefox, Opera, IE7+, przeglądarka Android, Chrome mobile, Firefox mobile.

najmniej.js
Doskonały bezpłatna galeria obrazy Z używając JQUERY, 5 i CSS3. Ma bardzo atrakcyjny wygląd i na pewno przyciągnie uwagę odwiedzających.

flipLightBox
Prosta galeria obrazów. Po kliknięciu podglądu w lightbox otworzy się cały obraz.

galeria blueimp
Elastyczna galeria. Zdolny do wyprowadzania okno modalne nie tylko zdjęcia, ale także wideo. Działa świetnie na urządzenia dotykowe. Łatwo konfigurowalny i możliwe jest rozszerzenie funkcjonalności o dodatkowe wtyczki (patrz następna wtyczka).