Archiwum tagu: plugin jQuery

Farbtastic: wybór koloru w jQuery

Farbtastic jest wtyczką jQuery, która może dodać jeden lub więcej widżetów wyboru koloru na stronie. Każdy widżet jest połączony z istniejącym element (np. z polem tekstowym) i będzie aktualizował wartości elementu, gdy kolor zostanie wybrany.

Farbtastic wykorzystuje warstwowo przezroczyste PNG, aby odtworzyć gradient nasycenia/jasności wewnątrz odcieni okręgu.

Wypróbuj sam!

farbtastic

DOWNLOAD

Sam skrypt można zobaczyć tutaj:
http://acko.net/files/farbtastic_/farbtastic.js

źródło: acko.net


Galleria

Galleria to plugin umożliwiający stworzenie w bardzo prosty i szybki sposób efektownej galerii zdjęć. Plugin ten zdecydowanie upraszcza proces tworzenia profesjonalnej galerii zdjęć w Internecie i urządzeniach mobilnych.

galleria

Plugin ten ma wiele praktycznych opcji, jak automatyczne przewijanie zdjęć, opisy, efekty przejścia, które możemy użyć do dostosowania naszej galerii do konkretnych potrzeb. Możemy również upodobnić ją do galerii w stylu LightBox’a i o wiele więcej. Dzięki niemu stworzymy niepowtarzalną galerię zdjęć.

TUTORIAL ¦¦  DEMO ¦¦  DOWNLOAD

Powodzenia :)

źródło: galleria.aino.se


Efekt przejścia w ImageSwitch

Plugin ImageSwitch jest prosty, szybki i łatwy w użyciu, a przy tym umożliwia naprawdę genialne efekty przechodzenia pomiędzy zdjęciami.

Wtyczka idealnie nadaje się do części wizerunkowej na twojej stronie internetowej, a czas wdrożenia tego rozwiązania jest naprawdę niewielki.

Składnia wtyczki ImageSwitch z wartościami domyślnymi:

$.ImageSwitch({
Type: "FadeIn", // Type of effect to run the function
NewImage: "", //The new image will be loaded in
EffectOriginal: true,
Speed: 1000, //Speed of the effect
StartLeft: 50, //The position the effect start compare
                 to original position could be (-)
StartTop: 0,
StartOpacity: 0, //Which start opacity it would be
EndLeft: -50, //The position the effect end compare
                to the original position could be (-)
EndTop: 0,
EndOpacity: 0, //Which start opacity it would be
Direction: "RightLeft", //Which Way the image will be sroll
Door1: "", //The image for the door 1
Door2: "" //The image for the door 2
}, function);

Oczywiście, aby zastosować plugin musisz posiadać jQuery javascript, a następnie ściągnąć i zainstalować plugin ImageSwitch.

Kod HTML:

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" 
                  src="Groject.ImageSwitch.js"></script>   

Następnie nalezy utworzyć <IMG>, który będzie używany do załadowania nowego obrazu. Możesz zastosować dowolną nazwę. W naszym przykładzie jest to: TestImg. Potrzebny jest też przycisk do wyzwalania efektu. Możesz go umieścić za pomocą linku.

<img id="TestImg" src="Image%20Path">
<a href="http://www.hieu.co.uk/blog/index.php/
         imageswitch/docs/#" id="TestTrigger"></a> 

Pełny kod użycia ImagSwitch:

$(document).ready({  
$("#TestTrigger").click(function(){  
$("#TestImg").ImageSwitch({NewImage:"image2"});
 });  
}); 

To wszystko :)  Ściągnij i ciesz się świetnymi efektami ImageSwitch :)

DOWNLOAD


Plugin SPACEGALLERY

Przeszukując sieć można trafić na wiele ciekawych przykładów pokazujący możliwości jQuery. Ostatnio, natknęłam się na bardzo interesujący sposób wyświetlania galerii. A mianowicie, chodzi mi o spacegallery. Prosty plugin, ale jak imponujący efekt. Sami zobaczcie! :)

Zapraszam do ściągnięcia :)

DOWNLOAD: spacegallery.zip (205 kb)


Ponownie, seria wtyczkek do jQuery

Ostatnio pisałam już o pluginach do jQuery. Jednak postanowiłam  kontynuować ten temat i dodać kilka ciekawych pozycji do poprzedniej listy.

4. AviaSlider to plugin umożliwiający bardzo ciekawe efekty przejścia pomiędzy kolejnymi obrazkami. Wiele dostępnych opcji pozwala nawet ustawić preloader, autoplay, czy zatrzymanie po wyznaczonym czasie.

jquery_25

ZOBACZ DEMO

5. Sliding boxes to wtyczka pozwalającą na świetną kombinacją obrazków, opisów i efektów. Oczywiście, wszystko po to, żeby uatrakcyjnić Twoją galerię internetową czy portfolio. Po najechaniu na obrazek pokazuje się jego opis z wykorzystaniem jednej z dostępnych animacji.

jquery_26ZOBACZ DEMO

6. Interaktywny obrazek to bardzo pomysłowa realizacja, który posiada zagnieżdżone tooltipy z informacjami o poszczególnych detalach znajdujących się na tymże obrazku.

jquery_27ZOBACZ DEMO

Napiszcie, które są naprawdę ciekawe!


3 niezbędne pluginy jQuery dla Twojej strony

Pluginów do jQuery jest coraz więcej, … ale jak wybrać te najciekawsze?  Jak dodać atrakcyjności naszej stronie internetowej? W niniejszym artykule przedstawiamy niezbędny zestaw wtyczek, których nie możecie ominąć.

A więc zacznijmy, …

1. gMap

gMap jest prostym pluginem, który ułatwia osadzanie map Google na stronie www. Za pomocą polecenia typu $(”#map”).gMap() wstawimy mapę, co uczyni pracę z mapami dużo łatwiejszą i przyjemniejszą.

jquery_221ZOBACZ DEMO ¦¦ DOWNLOAD

2. jText Translate

Kolejny plugin nie wymaga opisu. Prosty i praktyczny, sprowadza się do tłumaczenia wybranych fragmentów strony  za pomocą polecenia $(element).translate().  Wykorzystywane jest do tego Google Language API. W wyskakującym oknie dokonujemy wyboru języka i tłumaczenia.

jquery_23ZOBACZ DEMO ¦¦ DOWNLOAD

3. FlyoutRibbon

FlyoutRibbon jest pluginem, którego zadaniem jest uatrakcyjnić menu na stronie internetowej. W tym przypadku menu ma postać wysuwającej się wstęgi z boku naszej strony.

jquery_24ZOBACZ DEMO ¦¦ DOWNLOAD

Miłej pracy!


Niesamowity plugin jParallax

Jeśli chcesz w nietuzinkowy sposób uatrakcyjnić nagłówek swojej strony to  nic nie zrobi tego lepiej jak plugin jParallax do jQuery.

Spójrz jak działa!

jquery_20ZOBACZ DEMO

Za pomocą tego pluginu wybrane elementy na stronie będą reagować na ruch kursora, przemieszczając się tym samym po wyznaczonym obszarze. Efekt ten po prostu przesuwa warstwy w odpowiedzi na myszy i w zależności od ich wymiarów (i opcji inicjalizacji layer), przechodzą przez różne wysokości i tworzą głębokości.

jquery_211

Zainstalowanie i użycie wtyczki jest naprawdę proste, a efekt jest po prostu genialny.

DOWNLOAD

Źródło: webdev.stephband.info


Plugin Kalendarz do jQuery

W sieci istnieje coraz więcej stron korzystających z kalendarzy online. Część z nich jest prostą wtyczką, umożliwiającą wybranie daty z graficznego UI, zwiększając w ten sposób usability strony. Inne z kolei są pełnymi kalendarzami, wielokrotnie pełniące funkcję odrębnych aplikacji webowych. Dzisiaj przedstawię 2 proste i fajne pluginy kalendarz do jQuery.

1. FullCalendar

Kalendarz FullCalendar jest złożonym, a jednocześnie prostym w użyciu pluginem do JQuery, który oferuje szeroką gamę zastosowań. Do najważniejszych funkcji kalendarza należą:

  • działanie na zasadzie drag-and-drop (przeciągnij i upuść)
  • możliwość integracji z Google Calendar
  • możliwość obsługi zdarzeń poprzez JSON
  • możliwość osadzenia w pełnym rozmiarze

jquery_12

ZOBACZ DEMO

Dodatkowo kalendarz umożliwia łatwą zmianę styli całości pluginu jQuery, a ponadto istnieje możliwość własnego dostosowania zdarzeń kalendarza jQuery (np. zdarzenie kliknięcia lub przeciągnięcia elementu w kalendarzu).

2. wdCalendar

wdCalendar powstał na podstawie kalendarza Google. Stąd też, większość funkcji jest taka sama. Zasada działania jest również podobna, czyli za pomocą metody “przeciągnij i upuść”.


jquery_13

ZOBACZ DEMO

Źródło: devcurry.com


Roundabout w jQuery, czyli efekt ruchu

Roundabout to kolejny plugin do jQuery, dzięki któremu możemy uzyskać efekt ruchu na stronie.

jquery_91

ZOBACZ DEMO

Roundabout jest bardzo nowatorskim pluginem do jQuery umożliwijacym w bardzo prosty sposób umieszczenie interaktywnej karuzeli statycznych elementów HTML-owych na stronie. Sama konfiguracja jest bardzo prosta i domyślnie animuje listy, ale po chwili konfiguracji możliwa jest animacja dowolnych elementów HTML-owych. Dodatkowym plusem jest łatwa integracja z innymi pluginami typu lightbox.

Przykłady zastosowania:

1. Implementacja zegara

jquery_103

2. Integracja z formularzem

jquery_11
Źródło: fredhq.com


Plugin Tooltip/jQuery

Plugin Tooltip jest naprawdę prosty, a jego zastosowanie do wyświetlania konkretnego elementu stwarza praktycznie nieograniczone możliwości.

Zaprezentuję zastosowanie pluginu w dwóch przykładach.

1. wyświetlanie tooltipu po najechaniu na link

2. wyświetlanie podglądu zdjęcia po najechaniu na jego miniaturkę

Więc, … zaczynamy.

Tooltip tekstowy

Najprostszy sposób zobrazowania możliwości tooltipu, czyli po najechaniu na link wyświetlany jest element, którego nazwa klasy została podana w atrybucie title linku.

<a href="#" class="PreviewTooltip" title="toolText">
Najedź na link by zobaczyć tooltip</a>

i nasza podpowiedź:

<div class="toolText">
<p>To ja, <b>Twój</b> tooltip</p>
</div>

DEMO

Tooltip - podgląd zdjęcia

Podgląd zdjęcia wykonywany jest w podobny sposób jak w poprzednim przypadku. Aby wykorzystać plugin do podglądu, należy nadać w linku atrybut title=”toolImgPrev”. Nazwa ta sygnalizuje, że plugin będzie działał w trybie podglądu i zacznie przeszukiwać link w poszukiwaniu elementu img. Ściezka pliku wykorzystanego do podglądu pobierana jest z atrybutu src, natomiast sam link może prowadzić do dowolnej lokacji.

<a href="#" class="PreviewTooltip" title="toolImgPrev">
<img class="smallImage" src="images/img2.jpg"
alt="jquety plugin tooltip"/>
</a>

W tym przypadku możemy dodać opis do podglądu, poprzez zamieszczenie w znaczniku img atrybutu title, którego treść zostanie wyświetlona pod zdjęciem w podglądzie.

<a href="#" class="PreviewTooltip" title="toolImgPrev">
<img class="smallImage" src="images/img2.jpg"
title="jestem Twoim podpisem" alt="jquety plugin tooltip"/></a>

DEMO

Powodzenia!

Źródło: alchemycode