Filed under:
Drupal + PrettyPhoto + Views
Tutorial działa dla D6 i D7
PrettyPhoto to klon lightboxa napisany w Jquery.
Dlaczego prettyPhoto
- jest ładne
- łatwa instalacja
- możliwość połączanie z Views
- nie tylko zdjęcia, wsparcie dla flash, możliwość ładowania treści, filmików z YT, Vimeo, filmy QuickTime.
- integracja z social media
Przykład galerii wykorzystującej prettyPhoto i Views
Instalacja
Do działania PF potrzebna jest obsługa jquery.
Drupal standardowo obsługuje jquery więc nic z tym nie musisz robić
Skrypt
Ściągnij go ze strony twórcy - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Po rozpakowaniu zmień nazwę katalogu na prettyphoto,
katalog ten wrzuć do katalogu z aktualnie używaną skórką.
W katalogu skórki powinieneś mieć katalog "prettyphoto" a w nim katalogi
"js", "css", "images"
Ładowanie skryptu i styli.
W katalogu ze skórką w pliku nazwaskorki.info dodaj wpis:
scripts[] = prettyphoto/js/jquery.prettyPhoto.js
stylesheets[all][] = prettyphoto/css/prettyPhoto.css
W pliku page.tpl.php na górze w sekcji <body> dodaj
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
i to wszystko, teraz jak wyczyścisz cache strony, podejrzysz źródło
to w sekcji <head> zobaczysz nowy skrypt.
Zrób test
Utwóż blok z taką treścią (filtr daj na full html)
<a href="sciezka/do/pliku/duzy.jpg" rel="prettyPhoto[pp_gal]" title="Stopka">
<img src="sciezka/do/pliku/maly.jpg" width="60" height="60" alt="" />
</a>
Jeżeli skrypt działa poprawnie to w bloku wyświetli się
zdjęcie maly.jpg po kliknięciu na nie odpali się lightbox ze
zdjęciem duzy.jpg.
Views
Przepis jak zrobić prostą galerię w oparciu o Views i prettyPhoto.
W przypadku D6 i Views 2 przyda się moduł Imagecache - służy do automatycznego formatowania zdjęć.
D7 ma ten moduł wbudowany.
Dla D7 potrzeba jeszcze http://drupal.org/project/image_url_formatter
aby w widokach były dostepne adresy URL do obrazków
Dodaj nowy widok typ Segment (wyswietlanie zawartości)
Pola:
1. Zawartość: zdjecie z galerii - format URL to file
- będzie potrzebny adres do obrazka aby
wyświetlić go za pomocą prettyPhoto.
Jeżeli chcesz aby w pf otwierało się zdjęcie okreslonych rozmiarów (imagecache)
w formacie ustaw: nazwapresetu URL
2. Zwartość: zdjęcie z galerii - format preset imagecache
- zdjęcie do wyświetlenia
W opcjach zaznacz przy Rewrite the output of this field
i w polu dodaj cos takiego
<a href="[field_zdjecie_fid_1]" rel="prettyPhoto[pp_gal]">[field_zdjecie_fid]</a>
W sekcji Replacement patterns (Symbole służące do podmian)
będziesz miał tokeny odpowiadające twoim polom
Tutaj tokeny
[field_zdjecie_fid_1] - adres url do zdjęcia
[field_zdjecie_fid] - zdjęcie
