Prosty skrypt galerii zdjęć z efektem Highslide
Posiadasz wiele fotografii które chciałbyś zaprezentować, lecz nie masz czasu na wykonanie skryptu, który by to wszystko obsługiwał? Poniżej zobaczysz, jak stworzyć prosty silnik galerii zdjęć przy wykorzystaniu technologii Ajax do ich efektywnej prezentacji.
Skrypt Highslide którego użyjemy do stworzenia galerii, to podobnie jak Lightbox, Litebox, Thickbox, GreyBox etc. - ostatnio popularny efekt prezentacji zdjęć. Polega na przyciemnieniu ekranu oraz płynnym rozwinięciu ramki ze zdjęciem podczas powiększenia.
Struktura plików i katalogów
Galeria składać się będzie z następujących folderów i dokumentów.
- /css/ - katalog z arkuszem stylów
- /javascript/ - katalog ze skryptem Highslide
- /obrazki/ - katalog z dużymi obrazkami
- /miniaturki/ - katalog z miniaturkami
- /index.php - skrypt galerii
#1: Silnik galerii w PHP
Pierwszy etap to stworzenie pliku głównego index.php, który będzie napędzać naszą galerię zdjęć. Poniżej jego zawartość.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript" src="javascript/highslide-with-gallery.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript">
hs.graphicsDir = 'javascript/images/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>
<body>
- hs.graphicsDir = 'javascript/images/' - adres do katalogu z obrazkami
- hs.align = 'center' - wyrównanie dużego obrazka
- hs.transitions = ['expand', 'crossfade'] - efekt przejścia między obrazkami
- hs.outlineType = 'rounded-white' - obramowanie zdjęć
- hs.fadeInOut = true - przezroczystość podczas powiększania
- //hs.dimmingOpacity = 0.75 - przyciemnienie ekranu podczas oglądania zdjęć (domyślnie nieaktywne)
- interval: 5000 - czas pomiędzy slajdami w pokazie zdjęć
- repeat: false - powtarzanie pokazu (domyślnie nieaktywane)
- useControls: true - pasek kontrolny z przyciskami (domyślnie aktywne)
- fixedControls: 'fit' - pozycja kontrolek
- opacity: .75 - przezroczystość paska kontrolnego
- position: 'bottom center' - pozycja paska kontrolnego (na dole, wyśrodkowany)
- hideOnMouseOut: true - ukrywanie paska gdy myszka jest ustawiona poza ramką ze zdjęciem (domyślnie aktywne)
<ul><?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
$galeria = opendir( $katalog );
Rozpoczynamy tworzenie silnika galerii, którą obejmujemy znacznikiem DIV "galeria". Zmiennna $katalog zawiera nic innego, jak nazwę katalogu z obrazkami, $katalogminiaturki analogicznie zawiera nazwę katalogu z miniaturkami.
Odczyt listy katalogów i plików ze wskazanej lokalizacji umożliwia nam funkcja opendir() - tę wartość przypisujemy zmiennej $galeria.
Otwieramy pętlę, w której zmiennej $zdjecie przypisujemy ścieżki do plików z katalogu "obrazki". Następnie dzięki funkcji pathinfo() otrzymujemy tablicę zawierającą informacje o wskazanych ścieżkach tj. nazwę katalogu, nazwę pliku i rozszerzenie.
Nam potrzebna będzie trzecia wartość czyli rozszerzenie, dla której robimy warunek - jeżeli jest to format ".jpg" to przechodzimy do generowania galerii zdjęć.
}
}
closedir($galeria);
?>
</ul>
</div>
</body>
</html>
Sortowanie zdjęć według nazwy
Powyższy kod nie zawiera funkcji, która sortowałaby zdjęcia według nazwy pliku. Na prośbę użytkowników napisałem kod, który zmienia postać rzeczy. Funkcja sort() układa rosnąco, natomiast rsort() malejąco.
<ul>
<?php
$katalog = "obrazki";
$katalogminiaturki = "miniaturki";
$pliki = glob($katalog.'/*.jpg');
//lista plików trafia do tablicy
$i=0;
foreach($pliki as $key => $value){
$tab[$i] = $value;
$i++;
}
sort($tab);
//wyświetlenie listy zgodnie z datą
for($nr = 0; $nr < $i; $nr++){
print '<li><a href="'.$tab[$nr].'" class="highslide" onclick="return hs.expand(this)" rel="nofollow"><img width="200" height="133" src="'.str_replace($katalog, $katalogminiaturki, $tab[$nr]).'" /></a></li>';
}
?>
</ul>
</div>
#2: JavaScript
Archiwum ze skryptem Highslide dostępne jest na stronie autorów, highslide.com/download.php. Nas interesuje plik highslide-with-gallery.js wraz z katalogiem /images/.
#3: Arkusz stylów CSS
Drugi etap to stworzenie pliku style.css, który będzie zawierać style dla naszej galerii zdjęć - umieszczamy go w katalogu /css/. Poniżej jego zawartość.
width: 700px;
margin: 50px auto 0 auto;
color: #555;
font: 12px Arial, Verdana;
}
#galeria ul li{
display: inline;
margin:0 10px 10px 0;
}
#galeria img{
border: 1px solid #bbb;
padding: 1px;
}
/* AJAX */
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
outline: none;
text-decoration: none;
}
.highslide img {
border: 2px solid silver;
}
.highslide:hover img {
border-color: gray;
}
.highslide-active-anchor img, .highslide-active-anchor:hover img {
border-color: black;
}
.highslide-image {
border-width: 2px;
border-style: solid;
border-color: white;
background: gray;
}
.highslide-wrapper, .rounded-white {
background: white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border-top: none;
font-size: 1em;
padding: 5px;
background: white;
}
.highslide-heading {
display: none;
font-weight: bold;
margin-bottom: 0.4em;
}
.highslide-dimming {
position: absolute;
background: black;
}
.highslide-loading {
display: block;
color: black;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border: 1px solid white;
background-color: white;
padding-left: 22px;
background-image: url(../javascript/images/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
width: 195px;
height: 40px;
background: url(../javascript/images/controlbar-white.gif) 0 -90px no-repeat;
margin-right: 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.highslide-controls ul {
position: relative;
left: 15px;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
background: url(../javascript/images/controlbar-white.gif) right -90px no-repeat;
}
.highslide-controls li {
float: left;
padding: 5px 0;
}
.highslide-controls a {
background-image: url(../javascript/images/controlbar-white.gif);
display: block;
float: left;
height: 30px;
width: 30px;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
}
.highslide-move a {
cursor: move;
}
/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}
Style umieszczone po komentarzu "AJAX" należą do skryptu Highslide, przed nim znajdziemy opcjonalne style galerii tj. obramowanie zdjęć, marginesy i szerokość strony.
Podobne porady
- Zmiana i rozjaśnienie obrazka po najechaniu kursorem
- Dynamiczne zakładki (tabs) w Ajax
- Weryfikacja adresu e-mail
Komentarze (124)
-
@Łukasz:
Skrypt galerii zdjęć został napisany przeze mnie i możesz go używać, zarówno na witrynach prywatnych jak i komercyjnych. Inną kwestią jest nakładka graficzna (efekt prezentacji zdjęć, pokaz slajdów itp.) która ma określone w licencji w jaki sposób można z niej korzystać:
- Non-commercial: Free
- Commercial Single Website: $29
- Commercial Unlimited: $179 -
Kasia pisze:
Na stronie mam kilka osobnych galerii przedzielonych tekstami, nagłówkami. Przy oglądaniu jednej galerii (powiększaniu) automatycznie przechodzi się do następnej, pomimo tego, że zdjęcia kolejnej galerii są w innych katalogach. Czy można zatrzymać przeglądanie na ostatnim zdjęciu TEJ galerii?? a nie na ostatnim z ostatniej galerii?
-
ADAM pisze:
a jak zrobić by miniaturki miały ramkę ?
-
warto by było dodać, że jak ktoś chce zmienić lokalizacje swoich plików tak aby miał pożądek to panie Bartku mozna by poinformować o tym, że w css trzeba zmienić lokalizacje wyswietlanych w środku pasku nawigacji ikony . !!!!
-
adaś pisze:
Bartek to co obejmuje licencja dokładniej ?
-
Rafał pisze:
Jak zrobić by ten skrypt pobierał zdjęcia z innego serwera ??
-
@Adaś:
Licencja skryptu Highslide, który obsługuje animacje i powiększanie zdjęć w galerii jest tutaj: http://shop.highsoft.com/highslide.html.@Rafał:
Skrypt pracuje lokalnie - to znaczy podajesz ścieżkę do katalogu na tym samym serwerze. Jeśli chcesz korzystać ze ścieżki zewnętrznej to poszukaj odpowiedniej funkcji/rozwiązania na http://php.net. -
Piotrek pisze:
A jaki kod trzeba dodać na podstronie na której ma się wyświetlić galeria?
-
Witam... Mam prozbę czy mógłbyś mi napisać zmianę tego kodu ponieważ zabawę z PHP dopiero zaczynam ??
-
@Piotrek:
Kopiujesz kod zawarty w pkt. 1 porady, następnie linkujesz do arkusza stylów CSS (warto zapisać go w osobnym pliku i potem tylko się do niego odwoływać).@Rafał:
Poszukaj na wskazanej stronie, w Google, forach dla webmasterów/programistów. -
Kod z pierwszego punktu czyli dokładnie całość pliku index.php?
-
@Piotrek:
Tak, z pominięciem znaczników html, head, body etc.Skopiuj zawartość nagłówka z powyższego przykładu i przenieś w odpowiednie miejsce do pliku swojej podstrony. Podobnie z kodem galerii - wklej ją w miejsce, w którym chcesz żeby się wyświetlała.
W razie dalszych pytań, pisz.
-
Ok już zrozumiałem jak to ma zadziałać. Przyznaje że zabawę z php dopiero zaczynam. Mam jeszcze jedno pytanie aby posortować fotki według nazwy wystarczy podmienić zawartość div id="galeria" na te z punktu Sortowanie zdjęć według nazwy? Bo coś mi to nie działa
-
@Piotrek:
Zgadza się, nie zapomnij podmienić nazw katalogów. Jeśli dalej nie będzie działać to sprawdź czy odpowiednie funkcje masz włączone na serwerze. -
kamel pisze:
witam. Bardzo mi sie podoba ten skrypt, ale poniewaz jestem bardzo poczatkujacy to mam klopot z ulozeniem zdjec w dwuch kolumnach. Jak zmienic, aby miniaturki bylu w dwuch a nie trzech kolumnach?
-
@Kamel:
Zmniejsz szerokość głównego bloku, który obejmuje galerię:#galeria{
width: 700px;
}Na wartość np. 500 px, ponieważ u mnie obrazki mają szer. 200 px.
-
Gregory pisze:
Witam, mam pytanie, podkreślam od razu że dopiero uczę się tworzenia stron więc proszę o wyrozumiałość...pytanie brzmi... jak podpiąć ten skrypt do strony
-
strona napisana jest w html
-
Kamil pisze:
hej! u mnie w galerii odstępy między wierszami a kolumnami są różne, da się zrobić aby były jednakowe?
-
@Gregory:
Zapisz plik strony pod rozszerzeniem .php. Twój serwer musi obsługiwać PHP, ale z tym raczej nie ma problemów.
-
@Kamil:
Rozwiązanie problemu podałem w komentarzu tu: http://itporady.pl/php-mysql/prosty-skrypt-galerii-zdjec-z-efektem-highslide/comment-page-1/#comment-3532
-
Wojciech pisze:
WItam , mam dwa takie same zdjecie (czarnobiale i kolorowe) na poczatku jest czarnobiale ale chcialbym aby po najechaniu (a:hover) bylo kolorowe . Moze ktos mi podpowiedziec??
-
Seba pisze:
Witam
Mógłbyc powiedzieć jak dodać tutaj automatyczne generowanie miniaturek? Bez twgo mam po prostu liste plików. -
Błażej pisze:
Cześć, dlaczego nie działają mi przyciski? To znaczy są ale niewidoczne :<
-
@Wojciech,
Należy skorzystać z JavaScript. Wkrótce na łamach tego serwisu porada na ten temat :)
-
@Seba,
Ten skrypt generuje galerię zdjęć wraz z efektywną prezentacją, wystarczy wgrać dwa rodzaje obrazków: duże i miniaturki - wtedy wszystko działa.
-
@Błażej,
Sprawdź czy na pewno wgrałeś wszystkie pliki na serwer. Upewnij się czy mają nadane odpowiednie uprawnienia dostępu (przez klienta FTP).
-
Dervi pisze:
Czyli jeśli chciał bym użyć na stronie która jest wizytówką mojej firmy muszę zapłacić za highslide?
A w przypadku gdy zmienię szatę graficzna na grafikę mojego autorstwa będe mógł korzystać za darmo z tego skryptu ?
-
@Dervi,
Dla mnie wizytówka to strona firmowa czyli komercyjna, gdzie istnieje taka konieczność. Opłata jest zapewne za całość czyli kod javascript + wygląd.
-
Witam chciałbym umieścić index html na mojej stronie ale gdy wklejam kod nie wyświetla obrazów.
To jest animacja którą bym chciał umieścić http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.htmla to kod który uzyskałem z indeksu.html
<!-- saved from url=(0057)http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html -->WOWSlider generated by WOWSlider.com
<!-- Start WOWSlider.com HEAD section -->
a#vlb{display:none}
<!-- End WOWSlider.com HEAD section --><!-- Start WOWSlider.com BODY section -->
<a href="http://wowslider.com/" rel="nofollow">WOWSlider.com</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows0" title="" rel="nofollow">1</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows1" title="" rel="nofollow">2</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows2" title="" rel="nofollow">3</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows3" title="" rel="nofollow">4</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows4" title="" rel="nofollow">5</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#wows5" title="" rel="nofollow">6</a><a href="http://wowslider.com/" rel="nofollow">jQuery Slider Caption by WOWSlider.com v2.0</a>
<a href="http://178.21.20.102/~lukasz/dupa/WOW%20Slider/index.html#" rel="nofollow"></a>
<!-- End WOWSlider.com BODY section -->Proszę o Pomoc
Pozdrawiam. -
witam, mam na swojej stronie "index.html" na dole trzy obrazki i chciałbym aby po kliknieciu w nie otwierala sie wlasnie w taki sposob galeria, dodalem arkusz galeria.css i ten od javascript, dopisałem kod w index i po umieszczeniu w miejscu gdzie sa te obrazki nic mi sie nie wyswietla, jestem jeszcze zielony w te klocki i pewnie cos przeoczylem tylko nie wiem co
-
@Lukasz,
ta porada dotyczy skryptu Highslide, a powyższy kod zawiera dodatkowo PHP - to może być przyczyną.
-
@Mariusz,
1. Do linka dodaj wartość:
2. W ramach head umieść:
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript" src="javascript/highslide-with-gallery.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript">
hs.graphicsDir = 'javascript/images/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
</head>Na koniec sprawdź czy wszystkie pliki znajdują się na serwerze i odniesienia do nich.
-
Witam.
Prubuję zrobić przekierowanie strony index.php z ramki ::i nic się nie pojawia -- proszę o pomoc co robię źle..
-
Chciałem to podpiac pod moja strone ale nie wiadomo czemu nie czyta pliku style.css :/
-
Co musi być zainstalowane na serwerze żeby działało? PHP5 + Apache 2 + Mysql + co jeszcze ? :D
-
@Mateusz,
Sprawdź uprawnienia dla pliku style.css i czy na pewno znajduje się na serwerze. Musisz mieć PHP.
-
Dodałem css do pliku "galerie.php" header wyglada tak:
Galeria
Tutaj css
Zdawało mi się ze może być.
Serwer sam instalowałem na VPSie lecz nie mogłem nic znaleźć na temat tego czy muszę coś odhaczyć żeby php działało z JavaScript :( link podałem jako adres strony jezeli chcesz spojrzeć :) -
Dodałem css do pliku "galerie.php" header wyglada tak:
Galeria
Tutaj cssZdawało mi się ze może być.
Serwer sam instalowałem na VPSie lecz nie mogłem nic znaleźć na temat tego czy muszę coś odhaczyć żeby php działało z JavaScript :( link podałem jako adres strony jezeli chcesz spojrzeć :)Edit wcięło mi trochę tekstu :(
-
Proszę o usuniecie moich komentarzy do czasu aż nie napisze dobrze bo cos jest nie tak :(
-
Ok dodam moje pytanie jako zdjęcie bo co dodam od razu mi przerabia z kodu na normalny widok :(
http://taap.pl/images/3Ijzs.jpg
Reklama
Przeglądaj porady
Najpopularniejsze
Prosty skrypt galerii zdjęć z efektem Highslide
124 komentarzy
Prosty formularz kontaktowy w PHP
26 komentarzy
Zaokrąglanie rogów bez użycia grafik
8 komentarzy
Ostatnie komentarze
Mateusz: Ok dodam moje pytanie jako zdjęcie bo co dod... Prosty skrypt galerii zdjęć z efe...
Tagi
Linux Ubuntu ajax cms skróty Internet Explorer formatowanie tekstu formularze internet Mozilla Firefox Google ustawienia systemowe mikroblog system operacyjny strona internetowa skrypty
Czy można tego skryptu używać za darmo?