galeria portfolio jquery. Wtyczka do tworzenia portfolio. Wdrożenie strony „Zaproponuj projekt”.

Dmitrija Semenowa
to galeria obrazów jQuery i wtyczka suwaka treści. Jest całkowicie responsywny, przyjazny dla dotyku i ma modułową architekturę, która pozwala uwzględnić tylko te funkcje, które są potrzebne do optymalizacji rozmiaru pliku i wydajności.

autorstwa Andy’ego – The Coffeescripter
Wysoce konfigurowalna wtyczka galerii/prezentacji dla jQuery.

przez Trenta
Galleriffic to wtyczka jQuery, która zapewnia bogate doświadczenie bez konieczności wysyłania wiadomości zwrotnych, zoptymalizowane do obsługi dużej liczby zdjęć przy jednoczesnym oszczędzaniu przepustowości.

Galeria Tonic — Galeria portfolio jQuery XML | 6 dolarów

przez Aino
Galleria to framework galerii obrazów JavaScript zbudowany na bazie biblioteki jQuery. Celem jest uproszczenie procesu tworzenia profesjonalnych galerii zdjęć na potrzeby Internetu i urządzeń mobilnych.

przez CatchMyFame
Któregoś dnia zacząłem szukać prostego sposobu wykorzystania jQuery do przełączania między zestawami obrazów na stronie. Jako programista postanowiłem więc stworzyć własną wtyczkę.

przez Thomasa Kahna
Smooth Div Scroll to wtyczka jQuery, która przewija zawartość poziomo w lewo lub w prawo. Oprócz wielu innych wtyczek przewijania napisanych dla jQuery, Smooth Div Scroll nie ogranicza przewijania do odrębnych kroków.

autor: Victor Zambrano – frwrd.net
Minishowcase to mała i prosta internetowa galeria zdjęć php/javascript, obsługiwana przez AJAX, która pozwala łatwo wyświetlać obrazy online, bez skomplikowanych baz danych i kodowania, co pozwala na utworzenie działającej galerii w ciągu kilku minut.

przez Caspara Davida Friedricha
EOGallery to internetowa animowana galeria pokazów slajdów stworzona w jQuery. Do wyświetlania większych obrazów wykorzystuje tylko podstawowe funkcje jQuery i Thickbox Cody'ego Lindleya.

przez Arnaulta Pachota
Wieloformatowa karuzela dla jQuery. Nienarzucające się i dostępne portfolio obsługujące wiele multimediów: zdjęcia, wideo (flv), audio (mp3). Ta wtyczka do jQuery automatycznie wykryje rozszerzenie każdego multimediów i zastosuje dostosowany odtwarzacz.

Ściana – Galeria multimediów – oparta na jQuery | 5 dolarów

przez Stefana Petre
Kolejna wtyczka galerii obrazów z efektem kosmicznym, bardzo lekka i prosta wtyczka.

autorstwa Moreno Di Domenico
jmFullWall to wtyczka jQuery służąca do tworzenia imponującego portfolio.

przez Fabrizio Calderana
Mosaiqy to wtyczka jQuery do przeglądania i powiększania zdjęć działająca w Operze 9+, Firefox 3.6+, Safari 3.2+, Chrome i IE7+. Zdjęcia są pobierane ze struktury danych JSON/JSONP i losowo przenoszone wewnątrz siatki. Wszystkie drogie animacje są przejmowane przez procesor graficzny w najnowszych przeglądarkach przy użyciu przejść CSS3, minimalizując obciążenie procesora.

przez Cody'ego
Poniższa wtyczka jQuery przekształca zestaw obrazów w małą galerię z kilkoma opcjami. Galeria mikroobrazów umożliwia przełączanie pomiędzy widokiem siatki, który pokazuje podgląd obrazów w postaci miniatur, a pojedynczym widokiem przedstawiającym tylko jeden obraz.

VION – wtyczka galerii obrazów jQuery | 7 dolarów

przez Malihu
Prosta, ale elegancka pełnoekranowa galeria obrazów utworzona przy użyciu frameworka jQuery i prostego CSS.

Kompetentnie skomponowana i zaprojektowana wizualnie, w naszym przypadku jest to osobna strona, jest ważnym elementem osobistej strony internetowej lub bloga każdego specjalisty, który osiągnął określony poziom umiejętności w swojej działalności zawodowej.
Strona portfolio to rodzaj raportu lub wizualnego podsumowania, za pomocą którego możesz w przejrzysty sposób zaprezentować czytelnikom i odwiedzającym Twoją witrynę/blog zestaw najbardziej udanych ukończonych prac, czy to fotografii, artykułów, publikacji, elementów projektu itp.
Nie mam takiej strony i z mojej strony jest to irytujące pominięcie, które należy jak najszybciej poprawić, nad czym aktualnie pracuję.
W rozległych obszarach globalnej sieci można znaleźć ogromną liczbę gotowych szablonów stron do organizowania portfolio, a różnorodność takich stron jest naprawdę imponująca. Tak więc ci, którym nie zależy na zagłębianiu się we wszystkie zawiłości projektowania i tworzenia stron internetowych, zawsze będą mogli znaleźć odpowiednią opcję dla siebie. Cóż, dla tych, którym brakuje wiedzy na temat budowania stron internetowych, proponuję przyjrzeć się przykładowi układu adaptacyjnego, prostej strony portfolio, z filtrowaniem gotowych prac według kategorii, wykonanych w , rozcieńczonych atrakcyjnym efektem przejścia, z elementami animacji.

Układ strony, wykonywalny JavaScript i niektóre elementy projektu zostały stworzone przez wspaniałego projektanta i programistę stron internetowych Kevina Liewa (queness.com). Przy wyborze optymalnego rozwiązania liczyła się dla mnie łatwość wdrożenia, funkcjonalność wtyczki jQuery, poprawność działania we wszystkich współczesnych przeglądarkach, a przy rosnącej popularności korzystania z różnych urządzeń mobilnych do surfowania po Internecie, możliwość adaptacji wtyczki projekt przyszłej strony. Żadnych wymyślnych, designerskich wodotrysków i ciężkich wtyczek.

Podstawowy układ składa się z dwóch głównych elementów interfejsu użytkownika, które musimy zbudować, nawigacji po zakładkach w celu filtrowania kategorii przesłanych prac oraz samej siatki miniatur z efektem najechania myszką, po której pojawia się podpis.
Na początek, aby wszystko w końcu działało, będziesz potrzebować jQuery w wersji 1.7.0 lub wyższej. Jeśli jeszcze nie masz połączenia, dodaj przed tagiem następującą linię:

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

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

$(function () ( var filterList = ( init: funkcja () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", efekty: ["fade"], wygładzanie : "snap", // wywołaj efekt najechania onMixEnd: filterList.hoverEffect() )); ), hoverEffect: funkcja () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(.label").stop().animate((na dole: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((na górze: -30 ), 500, "easeOutQuad"); ), funkcja () ( $(this).find(.label").stop().animate((dół: -40), 200, "easeInQuad"); $( this).find("img").stop().animate(((góra: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Nie ma sensu rozważać wszystkich opcji wtyczki osobno, opcja domyślna jest całkiem optymalna. No cóż, jeśli ktoś ma ochotę poeksperymentować z parametrami, to proszę zrobić wszystko, co w jego mocy.

Aby utworzyć układ strony i wygląd elementów, podłącz kilka plików do dokumentu. , jeden dla podstawowych stylów, nazwijmy go np.: układ.css i drugi mały plik CSS normalize.css, aby zapewnić lepszą spójność przeglądarki w standardowym projekcie elementów:

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

A teraz spójrzmy na wszystko po kolei, jeśli to możliwe bez niepotrzebnej wody, w sposób przystępny i zrozumiały, 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

Na panelu nawigacyjnym umieszczamy całą listę prac, podzieloną na kategorie. Musimy powiązać każdą kategorię portfela poprzez atrybut data-cat z tym lub innym elementem paska nawigacyjnego zgodnie z wartością atrybutu data-filter. Dopasowując wartości data-filter do data-cat, pozycje portfela zostaną przefiltrowane według kategorii.
Dodatkowo do miniaturki dodamy, na razie ukryty, mały panel z nazwą pracy i tytułem kategorii, który wyskakuje dopiero po najechaniu kursorem na zdjęcie. A żeby ułatwić kształtowanie wyglądu całej tej struktury w CSS, przypiszmy elementom 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" >Rozpocznij hosting. Ru< span class = "text-category" >Logo< div class = "label-bg" > .........

Hosting Beget.Ru Logo.........

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

CSS

Przejdźmy teraz spokojnie do najciekawszej części, czyli do tworzenia w CSS ogólnych stylów interfejsu użytkownika naszej strony portfolio i jej wersji adaptacyjnej. W artykule wskażę tylko podstawowe (domyślne) wartości, czyli bez żadnych obrazów tła i powiązanych czcionek; wszystko to dla tych, którzy tego potrzebują, można zobaczyć w wersji demo lub znaleźć w archiwum z kodem źródłowym .

.container ( pozycja : względna ; szerokość : 960 pikseli ; margines : 0 auto ; /* Będziesz mógł zobaczyć łańcuch przejść podczas zmiany rozmiaru okna przeglądarki */ -webkit-transition: all 1s easy; -moz-transition: all 1s łatwość; -o -przejście: wszystkie 1s łatwość; przejście: wszystkie 1s łatwość; ) #filters (margines: 1%; dopełnienie: 0; styl listy: brak; ) #filters li ( float: left ; ) #filters li span (wyświetlanie: blok; dopełnienie: 5px 20px; dekoracja tekstu: brak; kolor: #666; /* dodaj mały cień do tekstu */ text-shadow: 1px 1px #FFFFFF; kursor: wskaźnik ; ) /* zmień tło kategorii po najechaniu myszką */ # filtry li span: hover ( tło: #34B7CD ; tekst-cień: 0 0 2px #004B7D ; kolor: #fff ; ) /* tło aktywnego elementu kategorii */ #filters li span. aktywny (tło: rgb (62, 151, 221); cień tekstowy: 0 0 2px #004B7D; kolor: #fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-size: border-box ; szerokość: 23%; marża: 1%; Nie wyświetla się; pływak: w lewo; przepełnienie: ukryte; ) .portfolio-wrapper ( przepełnienie : ukryte ; pozycja : względna ! ważne ; tło : #666 ; kursor : wskaźnik ; ) .portfolio img ( max-width : 100% ; pozycja : względna ; ) /* podpisy są domyślnie ukryte * / .portfolio .label ( pozycja : bezwzględna ; szerokość : 100% ; wysokość : 40px ; dół : -40px ; ) .portfolio .label-bg ( tło : rgb (62 , 151 , 221 ) ; szerokość : 100% ; wysokość: 100% ; pozycja: bezwzględna; góra: 0; lewa: 0; ) .portfolio .label-text (kolor: #fff; pozycja: względna ; indeks-z: 500; dopełnienie: 5px 8px ; ) .portfolio .text-category (wyświetlacz: blok; rozmiar czcionki: 9px;)

Kontener ( pozycja: względna; szerokość: 960 pikseli; margines: 0 auto; /* Będziesz mógł zobaczyć łańcuch przejść podczas zmiany rozmiaru okna przeglądarki */ -webkit-transition: łatwość wszystkich jedynek; -moz-transition: wszystkie jedyneki łatwość; -o- przejście: łatwość wszystkich jedynek; przejście: łatwość wszystkich jedynek; ) #filters ( margines:1%; dopełnienie:0; styl listy:brak; ) #filters li ( float:left; ) #filters li span ( wyświetlacz: blok; dopełnienie: 5px 20px; dekoracja tekstu: brak; kolor: #666; /* dodaj mały cień do tekstu */ text-shadow: 1px 1px #FFFFFF; kursor: wskaźnik; ) /* zmień tło kategorii po najechaniu myszką */ #filters li span:hover ( tło: #34B7CD; tekst-cień: 0 0 2px #004B7D; kolor:#fff; ) /* tło aktywnego elementu kategorii */ #filters li span.active ( tło: rgb(62, 151, 221 ); cień tekstowy: 0 0 2px #004B7D; kolor: #fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : border-box; -o-box- sizeing: border-box; szerokość:23%; margines:1%; display:brak; float:left; overflow:ukryty; ) .portfolio-wrapper ( overflow:ukryty; pozycja: względna !ważna; tło: #666; kursor:wskaźnik; ) .portfolio img ( max-width:100%; pozycja: względna; ) /* podpisy są domyślnie ukryte */ .portfolio .label ( pozycja: bezwzględna; szerokość: 100%; wysokość: 40px; dół: -40px; ) .portfolio .label-bg ( tło: rgb(62, 151, 221); szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; ) .portfolio .label-text ( kolor: # fff; pozycja: względna; indeks Z:500; dopełnienie: 5px 8px; ) .portfolio .text-category ( display:block; rozmiar czcionki:9px; )

W drugiej części, bezpośrednio w tym samym arkuszu stylów, korzystając z kilku zapytań o media, utworzymy alternatywne sekcje CSS. Aby mieć pewność, że układ naszej strony będzie poprawnie wyświetlany na ekranach różnych urządzeń mobilnych, do tych sekcji dodamy również alternatywne reguły CSS dla różnych ekranów. W ten sposób możemy łatwo zastąpić wszelkie reguły ustawione wcześniej w naszej tabeli CSS dla zwykłych przeglądarek i osiągnąć tak pożądane możliwości adaptacji.

/* Tablet */ Tylko ekran @media i (min-width: 768px) i (max-width: 959px) ( .container ( szerokość : 768px ; ) ) /* Mobile - Uwaga: projekt dla szerokości 320px*/ tylko @media ekran i (max-width: 767px) ( .container ( szerokość : 95% ; ) #portfoliolist .portfolio ( szerokość : 48% ; margines : 1% ; ) ) /* Mobile - Uwaga: projekt dla szerokości 480px */ @media tylko ekran i (min. szerokość: 480px) i (maks. szerokość: 767px) (.container (szerokość: 70%;))

/* Tablet */ Tylko ekran @media i (min. szerokość: 768px) i (maks. szerokość: 959px) ( .container ( szerokość: 768px; ) ) /* Urządzenie mobilne — Uwaga: projekt dla szerokości 320px*/ tylko @media ekran i (max-width: 767px) ( .container ( szerokość: 95%; ) #portfoliolist .portfolio ( szerokość:48%; margines:1%; ) ) /* Mobile - Uwaga: projekt dla szerokości 480px */ @media tylko ekran i (min. szerokość: 480px) i (maks. szerokość: 767px) ( .container ( szerokość: 70%; ) )

To wszystko. Nasza wspaniała strona pod pojemnym tytułem „Portfolio” jest już gotowa, pozostaje tylko wypełnić ją Waszymi równie wspaniałymi i wybitnymi pracami i wystawić ją na widok całego świata. Nadal możesz zachować spokój, skromność, dumę z siebie. Najważniejsze, żeby nie przesadzić w tej kwestii.
Spójrz na przykład jeszcze raz i, jeśli to konieczne, weź kod źródłowy, w wolnym czasie, w cichym otoczeniu domowym, możesz doprowadzić tę pracę do perfekcji.

Podczas tworzenia lekcji wykorzystano następujący materiał: . Znajduje się tam oryginalna, nieskazitelna, prosto spod pióra autora strona portfolio.

Życzę wszystkim powodzenia i miłej reszty tego krótkiego lata!

1. Implementacja portfolio z wykorzystaniem galerii jQuery

Miniatury projektów przewijają się po najechaniu kursorem myszy w lewą kolumnę. W obszarze zawartości wyświetlany jest większy obraz z nazwą projektu, opisem i listą zastosowanych technologii. Podczas poruszania się między miniaturami informacje o projekcie zmieniają się wzajemnie, tworząc oszałamiający efekt animacji. Po kliknięciu obrazu na stronie opisu zostanie on powiększony za pomocą animacji jQuery. Chciałbym również zwrócić uwagę na oszałamiający elegancki wygląd całej strony portfolio. Obejrzyj demonstrację.

2. Super wdrożenie strony portfolio z wykorzystaniem CSS i jQuery

Doskonała realizacja strony portfolio fotografa. Po kliknięciu pozycji menu z kwadratów rozsianych po ekranie składa się obszar o stałej wysokości i szerokości. Aby zmieścić więcej informacji w ustalonym obszarze, zawartość można przewijać. Realizacja wyświetlania prac z portfolio jest nietypowa: po kliknięciu w miniaturę zdjęcie wyświetla się jako obraz tła, który jest automatycznie skalowany w przypadku zmiany rozmiaru okna przeglądarki.

3. Ściana portfolio z jQuery

Autorskie rozwiązanie do tworzenia portfolio online. Bloki projektu (miniatury i krótki opis z linkiem) wyświetlane są kilka razy w rzędzie, przy zmianie okna przeglądarki bloki rozkładają się równomiernie na stronie z animowanym efektem. Każdy projekt może posiadać kilka miniaturek, pomiędzy którymi przejście odbywa się za pomocą strzałek. Kliknięcie w link otwiera stronę z pełnym opisem, na której tekst umieszczony jest na półprzezroczystym bloku o stałej wysokości z możliwością przewijania. Jako tło strony zastosowano skalowalny obraz projektu. Wygląda nieźle – obejrzyj demo.

4. Płynne przewijanie strony jQuery

Implementacja przewijania w pionie i poziomie.

5. Wtyczka jQuery „Przeciągana siatka ramek obrazów”

Przeciągalna siatka składająca się z bloków treści i obrazów. Siatkę można przeciągać za pomocą myszki (naciśnij dowolny przycisk myszy i przeciągnij w żądanym kierunku). Po kliknięciu miniatury główny obraz powiększa się na całą szerokość ekranu. Po kliknięciu ciemnego bloku z tekstem otwiera się obszar z bardziej szczegółowym opisem.

6. Jednostronicowa witryna portfolio

Jednostronicowa witryna internetowa z animowanymi zmianami treści. Na stronie demonstracyjnej poruszaj się po zakładkach menu, aby zobaczyć efekt.

7. Zmiana typu wyświetlania blokowego na jQuery

Za pomocą tej wtyczki jQuery „Switch Display Options” możesz zaimplementować na stronie przełącznik, za pomocą którego odwiedzający przełączy się z tabelarycznego wyświetlania informacji na pełny widok z opisem bloków. Idealny do realizacji portfela.

8. Szablon strony restauracji z galerią jQuery i mapą Google

Autorskie rozwiązanie jQuery stworzone na potrzeby serwisu kawiarnianego. W szablonie zaimplementowano ciekawą galerię jQuery służącą do wyświetlania dań z menu. Obrazy w galerii są skalowane w zależności od wielkości okna przeglądarki. Najpierw galeria wyświetla miniatury z nazwą i krótkim opisem potraw, natomiast pełnowymiarowe zdjęcie jest przyciemnione w tle. Poruszaj się pomiędzy dostępnymi zdjęciami za pomocą strzałek lub kółka myszy. Kliknięcie myszką w trybie galerii spowoduje usunięcie miniaturek z opisami i umożliwi oglądanie oryginalnych, dużych obrazów rozciągniętych na całą szerokość okna. Aby powrócić do menu witryny z galerii, kliknij link w prawym górnym rogu. Oprócz eleganckiej galerii jQuery, z szablonem bardzo skutecznie zintegrowana jest mapa od Google.

9. Wtyczka Plasm The Wall

Aby utworzyć unikalne „ściany” ze zdjęć lub bloków HTML, które można przeciągać myszką po ekranie w ustalonym obszarze.

10. Wtyczka do wyświetlania elementów w okręgu

Wyświetla różne elementy na stronie wzdłuż okręgu o zadanej średnicy.

11. Strona zastępcza „Witryna w przygotowaniu”

Strona posiada możliwość przesłania adresu e-mail, który jest zapisany w bazie i na który można wysłać powiadomienie o otwarciu serwisu. Stronę ozdobiono także małym pokazem slajdów opartym na wtyczce jQuery Nivo Slider v. 2.3.

12. Wtyczka QuickFlip 2

Za jego pomocą można stworzyć ciekawy efekt obracania się wizytówki po kliknięciu w link.

13. Mapa kliknięć JQuery

Pomysł polega na śledzeniu kliknięć użytkowników. Aby zobaczyć wtyczkę w działaniu na stronie demonstracyjnej, kliknij myszką, a następnie kliknij przycisk „Analizuj”. Punkty, w które kliknąłeś myszką, zostaną wyświetlone na przezroczystym tle.

Implementacja ładnej klawiatury ekranowej. Nigdy nie wiadomo, do czegoś się to przyda.

15. Notatki samoprzylepne jQuery

Realizacja arkuszy notatek. Tekst można edytować, a same notatki można usuwać lub przesuwać po ekranie. Aby zobaczyć przykład, przejdź do zakładki „Demo” na stronie demonstracyjnej.

16. Ocena jQuery 17. HoverAttribute

Ciekawy projekt linku: po najechaniu kursorem na link zmienia się jego kotwica. Wygląda fajnie.

18. jQuery Fantazyjne captcha do formularza rejestracyjnego

Implementacja captcha dla formularza rejestracyjnego. Wtyczka to zestaw liczb, które należy ustawić w kolejności rosnącej, przeciągając je. Całkiem ciekawy sposób na potwierdzenie, że rejestracji dokonuje prawdziwa osoba, a nie robot.

Na dole ekranu znajdują się przyciski, za pomocą których można płynnie przewijać stronę w górę lub w dół.

20. Tłumacz. Wtyczka jQuery „jTextTranslate”

Wtyczka korzysta z API języka Google i może tłumaczyć tekst na dowolne języki udostępniane przez Google. Aby przetłumaczyć, należy kliknąć ikonę obok akapitu i z rozwijanej listy wybrać język, na który chcemy przetłumaczyć.

21. Wtyczka jQuery do nawigacji po stronach

Doskonała implementacja linków przewijanych do nawigacji po stronie. Zaimplementowano przy użyciu jQuery.

22. Wtyczka jQuery „Notatki”

Dzięki tej wtyczce jQuery zaimplementujesz „papierowe” notatki na swojej stronie internetowej.

23. Wtyczka jQuery „Catch404” 24. Wtyczka jQuery jBreadCrumb

Wtyczka do tworzenia animowanego łańcucha nawigacji nawigacyjnej

25. Wtyczka „Reel” 26. Wtyczka jQuery „Dance Floor”.

Wtyczka jQuery do implementacji strony produktowej. Po kliknięciu na zdjęcie produktu pojawia się jego opis.

27. Wtyczka jQuery „chmura etykiet 3D” 28. Wolumetryczne przyciski CSS 29. Animowane poziome przewijanie strony

Efekt jQuery polegający na przewijaniu strony w pionie. Idealny do realizacji stron typu one page oraz stron portfolio. Aby zobaczyć efekt, kliknij pozycję menu na stronie demonstracyjnej.

30. Wtyczka jQuery „System ocen”

Efekt jQuery do implementowania oceny czegoś. Kolor kółek i tekstu pod nimi zmienia się w zależności od tego, nad którym z nich najedziesz kursorem myszy.

31. Magia panelu jQuery

Wtyczka implementująca nawigację w witrynie. W tym przypadku Twoja witryna prezentowana jest jako siatka dokumentów, pomiędzy którymi dokonuje się przejścia z ciekawym efektem jQuery.

Możesz łatwo używać tej wtyczki do tworzenia małych stron internetowych i aplikacji internetowych. Dobrze będzie wyglądać także na stronach portfolio.

32. Wskaźnik ładowania na Mootools, wtyczka „MoogressBar”.

Efektywny wskaźnik obciążenia.

33. Wtyczka Mootools „CwComplete”

Podczas wypełniania pola wtyczka zasugeruje możliwe opcje wypełnienia za pomocą Ajaxu, natomiast odfiltruje i wyświetli tylko te opcje, które odpowiadają tekstowi już wpisanemu w polu.

34. Świetny czat ajaxowy przy użyciu jQuery i CSS3

Przed rozpoczęciem rozmowy odwiedzający musi podać swój nick i adres e-mail. Prawa kolumna pokazuje, ile osób jest zalogowanych na czacie. Wykorzystane technologie: PHP, MySQL, jQuery, CSS.

35. Implementacja strony „Zaproponuj projekt”.

Odwiedzający mogą dodać nową propozycję lub zagłosować na istniejącą. Świetne rozwiązanie dla tych, którzy chcą dowiedzieć się, co o serwisie myślą ich odbiorcy. Możesz także wykorzystać tę stronę do gromadzenia nowych pomysłów na dalszy rozwój swojego projektu. Wykorzystane technologie: PHP, MySQL, jQuery, CSS

36. Implementacja głosowania/ankiety przy użyciu PHP i jQuery 37. Głosowanie przy użyciu Ajaxa „TinyEditor”

Dokładna realizacja ankiet na stronie. Wykorzystane technologie: JQuery, Ajax, PHP i MySQL.

Bardzo ciekawe rozwiązanie umożliwiające realizację głosowania na stronie internetowej. Przeciągając bloki w górę i w dół oraz chwytając obrazki myszką, możesz ułożyć je na stronie w dowolnej kolejności. Im wyżej opuścisz blok, tym lepiej go oceniłeś i odpowiednio, jeśli blok znajduje się na samym dole, oznacza to, że najmniej Ci się podobał. Po ułożeniu bloków w żądanej kolejności należy kliknąć przycisk „Prześlij ankietę”, aby głos został uwzględniony. Strona wyników wyświetla wyniki głosowania i liczbę odwiedzających, którzy głosowali. Wykorzystane technologie: CSS, PHP, MySQL, jQuery.

Prosty system komentowania Ajax z weryfikacją poprawności wprowadzonych informacji. Komentarze są przechowywane w bazie danych. Implementacja przy użyciu: PHP, MySQL, CSS, jQuery.

40. Licznik liczby pobrań plików 41. Notatki na stronie wykorzystującej PHP

Wykorzystane technologie: PHP, jQuery, CSS.

Podczas poruszania się po pozycjach menu zawartość jest ładowana bez ponownego ładowania strony. Wykorzystane technologie: PHP, jQuery, CSS.

43. Przeszukiwanie witryn jQuery z wykorzystaniem technologii firmy Google

Implementacja wyszukiwania w witrynie przy użyciu Google AJAX Search API. Możesz zapewnić odwiedzającemu możliwość wyszukiwania zarówno w Twojej witrynie, jak i w Internecie. W tym przypadku wyszukiwanie może odbywać się nie tylko według stron witryny, ale także obrazów i plików multimedialnych.

44. Efekt jQuery polegający na nałożeniu opisu na obraz

Bardzo ciekawy efekt, który można wykorzystać przy realizacji portfolio. Po kliknięciu na obraz, ciemnieje on z półprzezroczystym tłem i pojawia się podpis opisujący, na co należy zwrócić uwagę.

45. Implementacja strony pytań i odpowiedzi przy użyciu jQuery

Implementacja jQuery strony FAQ na stronie. Lista pytań wyświetla się na górze strony. Po kliknięciu na pytanie strona płynnie przewinie się do wybranego przez Ciebie pytania, a aktywne pytanie wraz z odpowiedzią zostanie podświetlone innym kolorem. Link do powrotu do listy pytań pojawia się także w polu aktywnej odpowiedzi.

46. ​​​​Strona internetowa na temat Ajaxu. Treść ładuje się bez przeładowywania strony 47. Zmiana kolorów tła i tekstu za pomocą jQuery

Kolor zmienia się po najechaniu na niego myszką. Możesz losowo zmienić kolor.

48. Przewodnik po witrynie Korzystanie z jQuery

Za pomocą tej ciekawej wtyczki możesz zapoznać odwiedzającego z głównymi funkcjami Twojej witryny, jeśli odwiedza ją po raz pierwszy. Po załadowaniu strony w prawym górnym rogu pojawia się blok z prośbą o obejrzenie witryny. Jeśli odwiedzający odwiedza Twoją witrynę po raz pierwszy, może skorzystać z krótkiego przewodnika, aby zapoznać się z głównymi funkcjami. W takim przypadku strona jest przyciemniana i na każdym kroku zaznaczane są niezbędne bloki. Jeśli odwiedzający był już na Twojej witrynie, może po prostu zamknąć okno oferujące wycieczkę po witrynie.

49. Wirtualny spacer po witrynie Joyride Kit

Za pomocą tej wtyczki możesz zapoznać odwiedzającego z główną funkcjonalnością strony. Odbywa się to w formie sekwencyjnego, wyskakującego opisu elementów. Odwiedzający może zobaczyć wszystkie wskazówki, klikając przycisk Dalej lub zamknąć wycieczkę online (jeśli nie jest to pierwsze wejście na tę stronę) za pomocą krzyżyka.