Tworzymy prostą galerię

14 July 2008 Comments

Skrypt "Lightbox" dostępny na stronie www.huddletogether.com w bardzo ładny sposób potrafi wyświetlać zdjęcia. Wystarczy kliknąć w zaprezentowane tam grafiki przykładowe by to zobaczyć.

Wykonanie

- Pobierz archiwum ze skryptem
- Wykorzystamy CI z pociętym w poprzednim warsztacie szablonem. (można stosować dowolny)
- Stwórz katalog "galeria" w "system/application/"
- Przenieś do niego zawartość rozpakowanego skryptu.
- Do index.php widoku (szablonu) dołącz wymagane pliki JS i CSS:

< script type="text/javascript" src="<?PHP echo base_url(); ?>system/application/galeria/js/prototype.js"></script>
< script type="text/javascript" src="<?PHP echo base_url(); ?>system/application/galeria/js/scriptaculous.js?load=effects"></script>
< script type="text/javascript" src="<?PHP echo base_url(); ?>system/application/galeria/js/lightbox.js"></script>
<link rel="stylesheet" href="<?PHP echo base_url(); ?>system/application/galeria/css/lightbox.css" type="text/css" media="screen" />

- Otwórz system/application/galeria/css/lightbox.css i zamień wszystkie ścieżki do grafik z ../images/ na system/application/galeria/images:

#prevLink, #nextLink{
        width: 49%;
        height: 100%;
        background: transparent url(system/application/galeria/images/blank.gif) no-repeat; /* Trick IE into showing hover */
        display: block;
        }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(system/application/galeria/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(system/application/galeria/images/nextlabel.gif) right 15% no-repeat; }

- Otwórz system/application/galeria/js/lightbox.js i popraw ścieżki do grafik (zaraz na początku pliku):

var fileLoadingImage = "system/application/galeria/images/loading.gif";                
var fileBottomNavCloseImage = "system/application/galeria/images/closelabel.gif";

- Skrypt gotowy do użycia. W widoku można już dodać odpowiednie URLe do grafik. Ja skorzystam z widoku "element.php" zawierającego obecnie "przykładowego newsa".

- By dany link do grafiki był obsługiwany przez lightboxa trzeba dodać rel="lightbox", np:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

- Jeżeli chcemy pokazać serię zdjęć to dodajemy rel="lightbox[roadtrip]":

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

- Bazując na grafikach zawartych w paczce skryptu dodanie do widoku linku:

<a href="<?PHP echo base_url(); ?>system/application/galeria/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Powinno dać link, po kliknięciu na który pojawi się grafika z ładnym efektem.

Galeria z listowaniem grafik z katalogu

Ręczne wpisywanie linków do masy zdjęć to męczarnia i bezsens. Każemy PHP wylistować zawartość katalogu i wyświetlić odpowiednie linki.
- Stwórz katalog system/application/galeria/foto, który będzie zawierał grafiki do wyświetlenia, umieść kilka już teraz :)
- W PHP4 by wylistować zawartość katalogu skorzystać trzeba z kodu typu:

<?PHP
$katalog = @dir('ścieżka/do/katalogu') or die ("Nie można listować");
while ($plik_kat = $katalog->read())
        {
        echo $plik_kat.'<BR>';
        }
$katalog->close();
?>

Gdzie w pętli while będą po kolei wyświetlane nazwy plików (zmienna $plik_kat). W PHP5 można wykorzystać ten sposób lub Iteratory.
- Edytuj nasz kontroler, zmień go na:

<?php
class Test extends Controller
{
function index()
        {
        $galeria = '';
        $katalog = @dir('system/application/galeria/foto') or die ("Nie można listować");
        while ($plik_kat = $katalog->read())
                {
                IF(strpos($plik_kat, '.jpg') or strpos($plik_kat, '.png') or strpos($plik_kat, '.gif'))
                        {
                        $galeria .= $this->load->view('metrohacker/element', array('plik' => $plik_kat), True);
                        }
                }
        $katalog->close();
        $this->load->view('metrohacker/index', array('galeria' =>$galeria));
        }
}

Krótkie omówienie - wstawiliśmy do kontrolera nasz kod listujący katalog, podaliśmy ścieżkę "system/application/galeria/foto". Następnie w pętli dodaliśmy instrukcję "if". Funkcja strpos(łańcuch, podłańcuch) zwraca pierwszą pozycję w podanym łańcuchu przy której znajdzie podany podłańcuch, np: strpos('ala ma kota', 'ma') - zwróci pozycję 4. Jeżeli nie znajdzie to zwróci wartość logiczną "Fałsz". W naszym przypadku by warunek if został spełniony przynajmniej jedno wywołanie funkcji musi zwrócić wartość inną niż fałsz. Funkcja jest wywołana trzy razy i sprawdzamy czy nazwa pliku zawiera ".jpg", ".gif" czy ".png" (czyli czy ten plik to plik graficzny"). Jeżeli plik jest grafiką to robimy coś takiego:

<?php
$galeria .= $this->load->view('metrohacker/element', array('plik' => $plik_kat), True);

Ładuje to widok "element", przekazuje w tablicy nazwę pliku oraz ma dodatkowo trzeci parametr "TRUE" - powoduje on że metoda ładująca widok nie wyświetli go lecz zwróci (poprzez return) dzięki czemu można przypisać go do zmiennej. Wyrażenie

$galeria .= 'Kolejne Dane'

to dodanie wartości do zmiennej, równoznaczne z

$galeria = $galeria.'kolejne dane';

W pętli do zmiennej $galeria będą stopniowo dodawane dane. Zmienną tą dodajemy do widoku index szablonu i wyświetlamy.
- Widok element.php:

<p><a href="<?PHP echo base_url(); ?>system/application/galeria/foto/<?PHP echo $plik; ?>" rel="lightbox[roadtrip]"><?PHP echo $plik; ?></a></p>

W widoku index.php natomiast zamiast:

load->view('metrohacker/element'); ?>

dajemy:

< ?PHP echo $galeria; ?>

- I gotowe
- Po wejściu na naszą stronę powinniśmy zobaczyć listę odnośników do grafik a po kliknięciu na dowolny - lightbox w akcji. By przejść do kolejnego wystarczy kliknąć na wyświetlane zdjęcie.

Kod do pobrania stąd - wystarczy zastąpić istniejący katalog "application" i poprawić ścieżki w config/config.php
Zachęcam do chwalenia się swoimi osiągnięciami na forum.

Podsumowanie

- Wykorzystaliśmy zewnętrzny skrypt JS
- Poprawiliśmy ścieżki do plików, których wymagał
- Użyliśmy go w naszych widokach

RkBlog

Kurs Code Igniter, 14 July 2008