JavaScript Slideshow

W kolejnym moim wpisie chciałbym opisać jak można zrobić prostym sposobem efektowny i automatyczny pokaz slajdów na stronie internetowej. Nasze zdjęcia będą wyświetlane za pomocą języka JavaScript a dokładniej skryptu Drop-in Slideshow Script.

Przykładowy screen

Tworzymy

Na początku pobieramy przygotowany przez ze mnie pakiet ze skryptami tutaj i rozpakowujemy archiwum. Następnie dodajemy skrypty do wybranej przez nas strony znajdujące w się dwóch plikach tekstowych: krok 1 w sekcji head.txt (wklejamy w sekcji head), krok 2 w sekcji body.txt (wklejamy w sekcji body) i plik dropinslideshow.js wgrywamy na serwer. Teraz musi odpowiednio przygotować nasze zdjęcia, czyli, w jakiej rozdzielczości mają być wyświetlane na stronie internetowej. Przykładowo fotki mogą mieć rozdzielczość ok. 500 x375 pikseli a rozmiar możemy zmienić za pomocą programu Fotosizer.

Edytujemy skrypt w sekcji {body}

{script type="text/javascript"}

//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"] var myimages=new Array() myimages[0]=["fotki/1.jpg"] - ścieżka do obrazka myimages[1]=["fotki/2.jpg"] myimages[2]=["fotki/3.jpg"]

//Create new drop-in slideshow //Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation) new dropinslideshow(myimages, 500, 400, 3000) - szerokość i wysokość obrazka, opóźnienie pokazu

{/script}

Pokazujemy

Przykładowy pokaz slajdów moje zdjęcia z HotZlotu 2010 click

Moja ocena

Pokaz slajdów wykonany przy użyciu skryptu Drop-in Slideshow Script to klasyczny na zasadzie spadających obrazków w dół sposób na opublikowanie naszych fotek w Internecie. Ciekawą funkcją jest możliwość zatrzymania pokazu poprzez najechanie kursorem myszki na dane zdjęcie. Moim zdaniem prezentacja zdjęć tym sposobem to efektowny gadżet na naszej stronie internetowej.

Pozdrawiam.