WP Pretty Photo czyli z lightboxem zabawy

utworzone przez | Lis 16, 2010 | Blog, Branżowe, WordPress | 0 komentarzy

Od jakiegoś czasu zauważyłem, że drażni mnie standardowy lightbox. Po prostu przejadł mi się ten schemat animowania, zwłaszcza że standardowego lightboxa ostatnimi czasy można zobaczyć już praktycznie wszędzie. Nie oznacza to jednak, że mam zamiar na znak jakiegoś protestu obrażać się na ten skrypt. Postanowiłem znaleźć nową wtyczkę , która będzie klonem legendarnego lightboxa, ale efekt samej animacji będzie trochę inny. Na pierwszy ogień poszły wszystkie tickboxy, highslide’y i tego typu podobne. Jednak najbardziej spodobał mi się znaleziony całkiem przypadkiem, podczas szukania czegoś innego znalazłem wtyczkę Pretty Photo.

Co daje nam ta wtyczka?

Pretty Photo jak możemy przeczytać w opisie jest klonem lightboxa. W tym momencie już mnie kupili, dokładnie tego szukałem. Zgłębiając opis doczytałem się, że to bardzo fajna wtyczka, daje mi możliwość wyświetlania w przybajerzony sposób zdjęć, filmików z YouTube, inne strony internetowe, oraz kod HTML (dokładniej własne elementy strony), a i obiekty flash da radę wstawić.

Dokładniejszy opis działania poszczególnych elementów znajdziemy na stronie autora .

Jak ją zainstalować?

Instalacja wtyczki może przebiegać dwojako. Możemy zainstalować wtyczkę standardowo.

Wchodzimy w panelu admina we Wtyczki-> Dodaj Nową, następnie w wyszukiwarce wpisujemy WP-prettyPhoto, klikamy zainstaluj i hokus pokus wtyczka działa. Jak ktoś nie lubi automatycznie, wtedy pobieramy wtyczkę ze strony WordPress.org, rozpakowujemy i poprzez połączenie FTP wgrywamy katalog „wp-prettyphoto” do wp-content/plugins/

A drugi sposób?

Wtyczkę możemy zainstalować też ręcznie, i zintegrować ją z naszym tematem graficznym. Jak więc to zrobić?

1) Pobieramy ze strony autora skrypty, i rozpakowujemy paczkę.

2)Dla wygody tworzymy nowy folder

3)Z rozpakowanego folderu prettyPhoto przerzucamy pliki: prettyPhoto.css, jquery-1.3.2.min.js, jquery.prettyPhoto.js, oraz foldery backgrounds i prettyPhoto (ten który znajduje się w tym który rozpakowaliśmy)

4)To co żeśmy przerzucili do naszego nowego folderu, przez FTP wgrywamy do folderu z używanym przez nas tematem graficznym

5)Przechodzimy do edycji tematu graficznego w panelu admina: Wygląd->Edytor

6)Z listy plików wybieramy plik header.php i w nim znajdujemy znaczniki <head>…</head>

7) Między wymienionymi znacznikami wklejamy:

<script src="<?php bloginfo('template_url'); ?>/jquery-1.3.2.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="<?php bloginfo('template_url'); ?>/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

8)Przechodzimy do pliku footer.php i szukamy teraz znacznika </body> i tuż przed nim wstawiamy:

[html]&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;
$(document).ready(function(){
$(&quot;a[rel^=’prettyPhoto’]&quot;).prettyPhoto();
});
&lt;/script&gt;[/html]

0 komentarzy

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.