Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

GalleryView jako widget

W internecie znajduje się bardzo wiele różnorodnych sliderów i galerii. Przeszukałem internet w poszukiwaniu prostej do zaimpletowania, ale zarazem funkcjonalnej galerii i znalazłem - GalleryView. Strona projektu znajduje się tutaj, znajdziemy tam kilka przykładów. W tym tutorialu pokaże, jak przerobić tę galerię na widget.

Na początek pobieramy całą paczkę *.zip ze strony projektu ("Download Current ZIP File" po prawej stronie). Rozpakowujemy są na nasz dysk. W pobranej paczce znajdują sie trzy główne katalogi: "css", "demos", "js". W katalogu css dodatkowo znajduję sie katalog "themes", w którym znajdują się dwie wersje - jasna "light" oraz ciemna "dark".

Teraz tworzymy w naszym systemie czysty widget o dowolnej nazwie, przykładowo "GalleryView". Do katalogu css wrzucamy zawartość tego samego katalogu z naszej pobranej paczki. Tą samą czynność wykonujemy odnośnie katalogu js. Do katalogu "img" naszego widgetu dodajemy pliki z wybranego przez nas stylu - light lub dark - oraz jeden plik "img-loader.gif" (z katalogu css). 

Przechodzimy do katalogu css (w naszym widgecie) i otwieramy plik ​"jquery.galleryview-3.0-dev.css". Zmieniamy tam ścieżki wszystkich plików graficznych na ../img/nazwapliku (np.: zamiast "url(img-loader.gif)" wpisujemy "url(../img/img-loader.gif)" albo zamiast "themes/light/play-big.png" piszemy "../img/play-big.png"). 

Teraz wchodzimy do katalogu js i otwieramy plik main.js. Zgodnie z tym co znajduje się w przykładach (z katalogu "demos") wklejamy tam następujący kod:
$(function(){
     $('#GalleryView').galleryView({
            transition_speed: 1000,
            transition_interval: 4000,
            panel_width: 600,
            panel_height: 400,
     });
});
Dzięki niemu działania naszej galerii będzie zainicjowane dla bloku #GalleryView. Możemy tutaj ustawić wysokość i szerokość panelu z galerią oraz przerwę (transition_interval) i czas przejścia ( transition_speed).

Teraz przejdźmy do pliku galleryviewController.class.php. Musimy w nim przygotować obiekt, dzięki któremu będziemy pobierać dane z tabeli 'images' w naszej bazie. Kod końcowy to:
 
< ?php
Class galleryviewController extends widgetMainController
{
       public function run() {
               $imagesDB = new imagesDB();
               return array("imagesDB" => $imagesDB);
       }
}
? >

Zwracamy nasz obiekt w  tablicy $data, którą odczytamy w pliku galleryviewView.tpl. Tyle z działania na polu PHP w naszym widgecie.

Teraz przejdźmy do pliku  galleryviewView.tpl. W przykładzie użytkowania GalleryView widzimy jaki kod ma galeria:
kod-galleryview
Widziamy powtarzający się element - listy, a w niej zawsze kolejny obrazek, z tego wynika, że będziemy musieli użyć pętli. 

Cały zarys wydgetu wyglądać ma podobine jak tego domyślnego (galleryFancybox). Użytkownik będzie mógł za pomocą 'wstawiacza widgetów' ustawić szerokość zdjęcia, jego wysokość, dopsowanie zdjęcia (domyślne ''smart' przycina zdjęcia do wymiaru, bez utraty jakości), filtry zdjęcia, bucket (koszyk z którego będą pobierane zdjęcia) lub images (też służy do pobiera zdjęć). 

Początek kodu odnośnie wstawiacza prezentuje się następująco:
poczatek-kodu
Tworzymym tutaj cztery if'y, które pobierają dane z konfiguracji systemu w przypadku, gdy ktoś nie uzupełni tych pół podczas wstawiania na stronę.

Cały kod widgetu od strony pliku tpl wygląda tak:
caly-kod Następny if, przypisuje nam do zmiennej $results ({assign results ...}) albo obrazki z podanego przez nas koszyka ( assign results $data.imagesDB->getByBucket($params.bucket)} ), jeśli nie wpiszemy koszyka to widget pobierze obrazki z podanej wartości images({assign results $params.images}). Jeśli nie podamy żadnej z tych wartości podczas wstawiania, galeria nie zadziała! ​

Następnie w elemencie "ul" tworzymym pętlę ({foreach $results as $image}), w której to każdy kolejny element z $results jest przypisywany jakos zmienna $images. Następnie tworzymy juz tylko listę (zgodnie z takim szablonem jaki mamy od 'producenta' naszej galerii). Zamiast linku do zdjęcia wpisujemy "{$HOME}image/{$image->ekey}/{$params.width}/{$params.height}/{$params.fit}/{$params.filter}/".
- {$HOME} - stała, która wyświetla link do strony
- {$image->ekey} - pobiera indywidualny klucz zdjęcia
- {$params.width}/{$params.height}/{$params.fit}/{$params.filter} - pobieramy wszystkie te wartości, o których mówiłem we wcześniejszej części tutoriala.

Kończymy naszą pętlę ({/forech}) i zamykamy nasz element ul. I to byłoby na tyle jeśli chodzi o plik galleryviewView.tpl.

Na koniec musimy jeszcze dodać pola do naszego wstawiacza widgetów. W tym celu przechodzimy do katalogu "doc", a następnie pliku "helper.ini". W nim wklejamy taki kod:

bucket.name = "bucket"
bucket.rule = ""
bucket.inputType = "select"
bucket.dateType = "php"
bucket.date = "$pagesDB=new pagesDB(); $pagesArray = $pagesDB->getGroupsArrayForWidgetInserter('type=12'); $inputData=array('option'=>$pagesArray);"

fit.name = "fit"
fit.rule = ""
fit.inputType = "select"
fit.dateType = "php"
fit.date = "$inputData=array('option'=>image::$imageProcessorArray);"

filter.name = "filter"
filter.rule = ""
filter.inputType = "select"
filter.dateType = "php"
filter.date = "$inputData=array('option'=>image::$filtersArray);"

width.name = "width"
width.rule = "numeric"
width.inputType = "input-text"
width.dateType = "string"
width.date = ""

height.name = "height"
height.rule = "numeric"
height.inputType = "input-text"
height.dateType = "string"
height.date = ""

Tworzenie pól do widgetów zostało omówione już tutaj
Widget jest już skończony. Uwaga! Przed pierwszym użyciem mussz wyczyścić cache! (wchodząc w zakładkę system, po lewej stronie przycisk "Czyść cache"). 
Teraz wystraczy, wejść w zakładkę treść dodać przykładową stronę, kliknąć przycisk "Widget" i uzupełnić pola. 

Przykładowy kod wygenerowany przez wstawiacz widgetów:
{{W name=GalleryView width=400 height=500 bucket=737}}

 Zobacz demo  Pobierz paczkę *.zip z widgetem