Archiwum tagu: biblioteka jQuery

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


jPong - 3d pong / gra w jQuery

jQuery można zastosować naprawdę do wszystkiego. Nie wierzycie? … jPong to niesamowita gierka stworzona w jQuery. Przypomina “ping ponga”, tylko że w 3D. Sprawdźcie sami i zobaczcie jak działa!

jpong

Oto lista cech, które są zawarte w tej grze:

  • Pokaż wynik
  • Wpływać na piłkę po uderzeniu go (krzywa)
  • Włączanie / wyłączanie zasilania, aby stworzyć “ściany” panele po krzywej piłkę

A teraz uruchom grę i graj :) Uważaj, bo łatwo stracić piłkę :)

Play jPong Download jPong

POWODZENIA :)

źródło: marcofolio.net


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


jQuery PhotoShoot Plugin - zdjęcia z wizjera

jquery-photoshoot

Plugin  PhotoShoot umożliwia tworzenie efektu robienia zdjęć za pomocą wizjera na tle rozmazanego obrazka. Efekt i sposób działania pluginu pokazuje poniższy obrazek.

Dostępne opcje pluginu to:

  • image - URL obrazka (wymagany)
  • blurLevel - poziom rozmazania obrazka
  • opacity - poziom przezroczystości obrazka w tle - zakres od 0 do 1 - im mniejszy tym obrazek bardziej przezroczysty
  • viewFinder - obiekt definiujący obszar "wizjera":
    • width - szerokość,
    • height - wysokość,
    • img - obrazek (domyślnie pusty ciąg znaków).
  • onClick - funkcja wywoływana po kliknięciu - przekazuje w parametrze do funkcji obiekt z własnościami top oraz left definiującymi położenie lewego górnego rogu migawki.

Obsługa pluginu jest bardzo prosta. Po załadowaniu pliku js oraz css z biblioteką wystarczy podać ścieżkę do zdjęcia i już możemy cieszyć się z uruchomionego efektu.

źródło: tutorialzine.com


Animacje w jQuery/plugin InnerFade

InnerFade to mała wtyczka do jQuery JavaScript Library. Dzięki niej stworzysz własny pasek najnowszych wiadomości, czy animacji, np. pokaz swojego portfolio lub blok reklamowy na Twoją stronę. Elementy mogą być dowolne, np. zdjęcia, listy, artykuły, DIV.

To bardzo łatwe :) Zobacz jak działa :)

HTML

$('ID or class of the element containing the fading objects')
                                                   .innerfade({
animationtype: Type of animation 'fade' or 'slide'
               (Default: 'fade'),
speed: Fadingspeed in milliseconds or keywords
       (slow, normal or fast)(Default: 'normal'),
timeout: Time between the fades in milliseconds
         (Default: '2000'),
type: Type of slideshow: 'sequence', 'random'
      or 'random_start' (Default: 'sequence'),
containerheight: Height of the containing element
                 in any css-height-value (Default: 'auto')
runningclass: CSS-Class which the container
              get’s applied (Default: 'innerfade')
});


<script type="text/javascript">
	$(document).ready(
		function(){
			$('#news').innerfade({
				animationtype: 'slide',
				speed: 750,
				timeout: 2000,
				type: 'random',
				containerheight: '1em'
			});

			$('#portfolio').innerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '220px'
			});

			$('.fade').innerfade({
				speed: 'slow',
				timeout: 1000,
				type: 'sequence',
				containerheight: '1.5em'
			});
		}
	);
</script>

DOWNLOAD

jquery.innerfade.zip (124kb)

źródło: medienfreunde.com


Otwieranie linków w nowym oknie

Dość często pojawia się pytanie?

Jak zrobić by link podany w tekście notatki otwierał się w nowym oknie?

Jest taki sposób! :) Co więcej, jest bardzo ciekawy, a przede wszystkim przydatny, bo bez potrzeby ingerowania w kod strony automatycznie nadaje wszystkim linkom wychodzącym z serwisu atrybut target=”_blank”.

jquery_30

Działanie poniższego kodu jest bardzo proste. Nie sprawdza on domen, adresów IP itp. Wyszukuje on po prostu linki, których atrybut href rozpoczyna się od ciągu znaków http://, ale jednocześnie nie znajduje się w domenie strony, na której umieszczony jest link.

$("a[href^='http://']").each(function(){
     var thehref = $(this).attr('href');
     if(!thehref.match(window.location.host)){
        $(this).attr('target', '_blank');
     }
});

Po prostu wystarczy dodać kilka linijek kodu do pliku ze skryptami JavaScript lub wewnątrz tagów <script></script>, a wszystko zadziała.

Sprawdź! :)

źródło: blog.ibeq.pl


Niezastąpiony “Scroll to top” - wybierz najlepszy

“Scroll to top”  to nic innego jak przyciski sterowania będące doskonałym dodatkiem do stron z dużą ilością treści, jak np. blogi. Dzięki temu rozwiązaniu, odwiedzający płynnie przewijają stronę w górę, a Twoja strona staje się bardziej przyjazna dla użytkowników.

Poniżej polecam kilka takich rozwiązań. Zobaczcie, oceńcie sami i wybierzcie coś dla siebie :)

1.  “TopLink” Plugin

Plugin, stworzony przez Davida Walsha, uruchamiający się po użyciu scrolla.

2. Disappearing “Scroll to top”

Ciekawy efekt :) przycisk “Scroll to top” pojawia się, gdy użytkownik przesuwa się w dół i znika, gdy jest na górze strony :)