Prosty skrypt galerii zdjęć z efektem Highslide - wersja 2
Jak stworzyć silnik galerii zdjęć przy wykorzystaniu technologii Ajax do ich efektywnej prezentacji. Przedstawiam drugą wersję skryptu.
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.
1. Struktura plików i katalogów
W tym punkcie nie ma zmian, wszystko zostaje jak w poprzedniej wersji. 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,
2. Silnik galerii w PHP
W tym punkcie nastąpiła ewolucja i to dosłownie. Dodałem zaproponowane przez Was rzeczy, które wydały mi się najbardziej istotne.
2a. Sortowanie
Druga wersja galerii zdjęć domyślnie zawiera sortowanie obrazków po nazwie pliku. Wiele osób pytało o tą funkcjonalność.
2b. Opis zdjęcia
Pod każdym zdjęciem pojawia się kolejny numer obrazka, od 0 do np. 30. To jest opcjonalne, w opcjach dodałem możliwość wyłączenia opisu.
2c. Paginacja
W tej wersji można ustalić, ile obrazków ma się znajdować na 1 stronie. Pojawia się nawigacja pod galerią, dzięki której możemy przejść do poprzedniej/kolejnej strony z określoną ilością.
Pierwszy etap to stworzenie pliku głównego index.php, który będzie napędzać naszą galerię zdjęć. Poniżej jego zawartość.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Prosty skrypt galerii zdjęć z efektem Highslide - wersja 2</title>
<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),
<div id="galeria">
<ul>
<?php
$katalog = "obrazki";
$katalogMiniaturki = "miniaturki";
$naStronie = 6;
$opisZdjecia = true;
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.
W zmiennej $naStronie określimy, ile obrazków ma się znajdować na jednej stronie. Natomiast linijkę niżej możemy włączyć lub wyłączyć opis zdjęcia - kolejny numer zaczynając od 0 - analogicznie true lub false.
$ilosc = count(glob("./$katalog/*"));
$iloscStron = ceil($ilosc/$naStronie);
Pierwsza linijka kodu ustala, ile obrazków zostało umieszczonych w katalogu. Druga linijka kodu oblicza - wg tego ile obrazków może być na jednej stronie - ile stron wygenerować dla galerii.
$pliki = glob($katalog.'/*.jpg');
$i = 0;
foreach($pliki as $key => $value){
$tab[$i] = $value;
$i++;
}
sort($tab);
for($i = 0; $i < $ilosc; $i++){
if($opisZdjecia) $opisZdjecia = '<span>Obrazek nr '.$i.'</span>';
$tablica[$i] = '<li><a href="'.$tab[$i].'" class="highslide" onclick="return hs.expand(this)" title="Obrazek nr '.$i.'"><img width="200" height="133" src="'.str_replace($katalog, $katalogMiniaturki, $tab[$i]).'" alt="Obrazek nr '.$i.'" />'.$opisZdjecia.'</a></li>';
}
Odczyt listy katalogów i plików ze wskazanej lokalizacji umożliwia nam funkcja glob() - tę wartość przypisujemy zmiennej $galeria. Tworzymy tablicę, w której umieszczamy kolejne obrazki z katalogu i przy okazji liczymy ile ich jest.
Dzięki funkcji sort() obrazki są posortowane wg nazwy od najmniejszej liczby do największej. Funkcja rsort() malejąco. Pętla for() generuje nam wykaz z kolejnymi obrazkami. Lista ta odnosi się nie tylko do lokalizacji dużego obrazka, miniaturki obrazka, ale również efektu Highslide.
if($_GET['strona'] && $_GET['strona'] > 0 && $_GET['strona'] <= $iloscStron) $strona = $_GET['strona']-1;
else $strona = 0;
$poczatek = $strona * $naStronie;
if($poczatek >= $ilosc) $poczatek = 0;
$koniec = $poczatek + $naStronie;
if($koniec >= $ilosc) $koniec = $ilosc;
for($i = $poczatek; $i < $koniec; ++$i){
echo $tablica[$i]."n";
}
?>
</ul>
Stawiamy warunek, który sprawdza wybrany przez Użytkownika aktualny numer strony. Kolejne zmienne regulują ilość obrazków na danych podstronach, a pod koniec wyświetlają pełną galerię.
<ul id="nawigacja">
<?php
if($strona > 0) echo '<li><a href="index.php?strona='.($strona).'" >[<]</a></li>';
for($i = 1; $i <= $iloscStron; ++$i){
echo '<li><a href="index.php?strona='.$i.'" >['.$i.']</a></li>';
}
echo $linki;
if($strona < $iloscStron-1) echo '<li><a href="index.php?strona='.($strona+2).'" >[>]</a></li>';
?>
</ul>
</div>
</body>
</html>
Umieszczamy nawigację w naszej galerii, która zawiera link do poprzedniej/następnej strony oraz odnośniki do kolejnych stron.
3. 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/.
4. 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ść.
#galeria{
width: 700px;
margin: 50px auto 0 auto;
color: #555;
font: 12px Arial, Verdana;
}
#galeria ul li{
float:left;
margin:0 15px 15px 0;
list-style-type:none;
text-decoration:none;
}
#galeria img{
border: 1px solid #bbb;
padding: 1px;
}
#galeria ul span{
display:block;
color:#555;
text-align:center;
}
#galeria ul#nawigacja li{
margin-top:15px;
}
#galeria ul#nawigacja li a{
text-decoration:none;
color:#555;
}
/* 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. Wszelkie propozycje i uwagi umieszczajcie w komentarzach pod spodem, chętnie na nie odpowiem.
Kategorie: HTML + CSS, PHP + MySQL. Tagi: #ajax, #css, #grafika, #html, #php, #skrypty. Źródło obrazków: Pixabay, Font awesome.
Zobacz także
87 komentarzy
Marcin
15.02.2014, 20:14
ale gdy test.php wyeksportuje na serwer i wpisze jego adres, to zwraca tabelkę "php Ver. 5.2.8" w polu [code]error_reporting =6143[/code]
Marcin
15.02.2014, 20:03
Pytam, bo próbowałem już w konsoli wpisywać to polecenie zwraca informacje, że nazwy php nie rozpoznaje jako polecenie, drugą metoda, stworzyłem plik test.ini wkleiłem zawartość, ale w jaki sposób ma zwrócić informację?? plik skojarzyło z przeglądarką, gdy otwieram otwiera się strona bez zawartości,
Marcin
15.02.2014, 13:20
gdzie wpisać to polecenie [code] php -i | grep php.ini [/code]
Bartosz Stefanicki
15.02.2014, 18:35
Autor
W konsoli, ale możesz też spróbować drugiej metody :)
Odpowiedz
Marcin
14.02.2014, 20:39
nie odnalazłem pliku php.ini , gdzie on powinien się znajdować, mogę utworzyć taki. Z błędami mogę sobie poradzić podmieniając linijką 78 i zakasowując linijkę 103. Problem jest, że po podmianie Pana plików graficznych na moje nic się nie wyświetla, oprócz pustych ramek i błędów.
Bartosz Stefanicki
15.02.2014, 00:00
Autor
Zobacz tu: http://itporady.pl/faq-baza-wiedzy#gdzie-znajduje-sie-plik-php-ini
Odpowiedz
Marcin
14.02.2014, 10:04
jestem początkujący jeżeli chodzi o html, php. Czy może Pan podać swój mail, podam login i hasło do wydzielonej części mojego dysku na którym są pliki pobrane z tego forum
Bartosz Stefanicki
14.02.2014, 18:22
Autor
Marcin, mogę postarać się pomóc, ale tylko tutaj. Znajdź ten plik i spróbuj wstawić powyższy kod, on wykluczy te błędy.
Odpowiedz
Marcin
13.02.2014, 18:15
pliki usuwam i kopiuje używając programu Totalcomander
Bartosz Stefanicki
13.02.2014, 18:35
Autor
Używaj znacznika [code][/code] , będzie to wszystko czytelniejsze. Marcin, jeśli wklejasz kod prosto stąd, bez modyfikowania, to wyświetla się Tobie taki błąd?
Odpowiedz
Bartosz Stefanicki
13.02.2014, 19:06
Autor
Spróbuj w php.ini wyłączyć raportowanie błędów typu notice, napisz jaki efekt:
[code]error_reporting = E_ALL & ~E_NOTICE[/code]
Odpowiedz
Marcin
13.02.2014, 18:13
pobrane pliki umieszczam na własnym serwerze NSA310, w folderze o nazwie "www". Kiedy wpisuję adres zewnętrzny serwera wyświetla się Notice: Undefined index: strona in /i-data/6a540b5d/public/www/index.php on line 78, poniżej obrazki miniaturki, poniżej Notice: Undefined variable: linki in /i-data/6a540b5d/public/www/index.php on line 103,
Zgodnie z instrukcjami na forum,
linijkę 78 zmień na:
if(isset($_GET['strona']) && $_GET['strona'] > 0 && $_GET['strona'] <= $iloscStron) $strona = $_GET['strona']-1;
Problem 2 rozwiążesz usuwam linijkę nr 103.
Po tej zmianie wyświetlają się miniaturki bez błędów,
na pulpicie mam gotowe foldery "obrazki" i "miniaturki" z własnymi zdjęciami, pliki .jpg w obydwu folderach mają takie same nazwy, z tym że miniaturki pomniejszone są do rozdzielczości 200x jak wyjdzie px,
po usunięciu pierwotnych plików i skopiowaniu swojej galerii 11 plików, wyświetlają się opisane wyżej błędy,
Marcin
11.02.2014, 21:35
Po podmianie zdjęć w folderze "obrazki" i "mianiatury" (rodzielczość 200x150 wyswietla błąd
'sort() expects parameter 1 to be array, null given in line 69'
nie wyświetla miniatur jedynie puste małe ramki
Bartosz Stefanicki
12.02.2014, 00:36
Autor
Hmm, ciekawa sytuacja. Czy zmieniałeś coś w kodzie?
Odpowiedz
Salvation
13.02.2014, 00:13
Wklej tą 69 linijkę tutaj używając znacznika [code]
Odpowiedz
Marcin
10.02.2014, 23:33
Po umieszczeniu plików na serwerze wyświetla obrazki, pod nimi błąd "Notice: Undefined variable: linki in /i-data/6a540b5d/public/www/index.php on line 103"
Marcin
10.02.2014, 23:24
Witam, mam problem z dodaniem zdjęć do strony. Gdy wklejam zdjęcia do katalogu "obrazki" i o tych samych nazwach do "miniaturki" wyświetla mi się błąd na stronie:
Warning: sort() expects parameter 1 to be array, null given in /i-data/6a540b5d/public/www/index.php on line 69
Notice: Undefined index: strona in /i-data/6a540b5d/public/www/index.php on line 78
Obrazek nr 0
Obrazek nr 1
Obrazek nr 2
Obrazek nr 3
Obrazek nr 4
Obrazek nr 5
Obrazek nr 6
Obrazek nr 7
Obrazek nr 8
[1]
[2]
Notice: Undefined variable: linki in /i-data/6a540b5d/public/www/index.php on line 103
w folderze miniaturki znajdują się pomniejszone obrazki do rozmiaru szer 200 x w zależności od zdjęcia
Monika
03.01.2014, 12:30
Dziękuję za ekspresową odpowiedź. Już sprawdzam. :)
Monika
03.01.2014, 12:15
@Bartek Stefanicki@ czy będziesz mógł opublikować poradę na temat, z którym mam problem? Pozdrawiam.
Bartosz Stefanicki
03.01.2014, 12:26
Autor
Monika,
Opublikowałem - http://itporady.pl/php-mysql/zmniejszanie-zdjec-za-pomoca-php-biblioteka-phpthumb/ .
Odpowiedz
k
02.01.2014, 23:46
Po wpisaniu kodu pojawia mi się błąd
'sort() expects parameter 1 to be array, null given in line 69'
co jest nie tak?
Rafał
11.12.2013, 12:25
Problem:
Mam kilka różnych galerii na jednej stronie (np. po 3-5 zdjęć). Miniaturki wyświetlają się ok, tzn w tych miejscach co są w kodzie html. Po kliknięciu na powiększenie i przeglądaniu galerii wyświetlane są wszystki zdjęcia na tej stronie.
Jak zrobić by tylko 1 galeria była wyświetlana w powiększeniu (każda oddzielnie)
Monika
06.12.2013, 01:52
Dziękuję za odpowiedź. Pozdrawiam, Monika
Monika
05.12.2013, 13:54
Pytam przecież o automatyczne tworzenie miniaturek w galerii! Jakim cudem więc odbiegam od tematu skryptu galerii? To jakiś żart? Znalazłam dwa inne skrypty z funkcjonalnością, która mi potrzebna. Problem w tym, że o ile skrypt o który pytam jest przyjazny dla mnie i prawie zrozumiały to cała reszta jest zbyt skomplikowana. Czy ktoś ma chęć mi pomóc czy mam sobie poprostu odpuścić?
Salvation
05.12.2013, 15:51
Poczytaj troszkę o zmniejszaniu obrazków w PHP. Google aż się ugina od przykładów. Niestety więcej nie mogę tu napisać, ake zawsze możesz odezwać się do mnie na maila.
Odpowiedz
Monika
05.12.2013, 10:29
Rozgryzam temat bazując na innych przykładach ale nadal czekam na Waszą pomoc. Wcześniej pracowałam nad stronami, które buduje się przy użyciu CMS Joomla więc sami rozumiecie, że to był "pikuś" w porównaniu z tym co teraz chcę zrobić. Wy używacie fachowych określeń w swojej działce ja używam w swojej przy zarządzaniu barwą, dtp, przygotowaniu do druku. Dlatego proszę o pomoc. Ten skrypt jest świetny ale brakuje mi jednej funkcjonalności. Przeglądałam już kilkanaście innych skryptów. Mam do wrzucenia na stronę kilkadziesiąt (na początek) zdjęć. Ta liczba będzie z czasem dużo większa. Tworzenie miniaturek ręcznie w PS i wstawianie ich na stronę to będzie koszmar. Pomóżcie mi z tym skryptem. Będę bardzo ale to bardzo wdzięczna. :))
Salvation
05.12.2013, 12:02
Jeżeli chcesz wrzucać fotki na serwer i automatycznie je zmniejszać, to takie coś robi się skryptem PHP. Pełno jest przykładów w necie.
Drugą opcją jest np. wyświetlanie dużych obrazków pomniejszonych przez CSS na stronie.
W obu przypadkach zawsze tracisz na jakości fotki. I niestety odbiegłaś już od tematu skryptu galerii.
Odpowiedz
Bartosz Stefanicki
05.12.2013, 17:05
Autor
Cześć Monika :-) W weekend postaram sie opublikować poradę na ten temat.
Odpowiedz
Monika
02.12.2013, 20:34
Jako laik nie rozumiem..."Ehh... Filtracja... Do znacznika img w HTML wystarczy dopisać class="jakas_nazwa" i przestawić ścieżkę z miniaturek na obrazki. Będzie działać." Mogę prosić o podpowiedź gdzie to wstawić... do której linijki i jako przykład...?
Monika
02.12.2013, 20:28
:) nic nie widzę, nic nie widzę...
Może podpowiedź. Wyświetlasz obrazki poprzez: (nie widać kodu)
wystarczy teraz, że dodasz: (nie widać kodu)
a w CSS dodasz:
.jakas_nazwa {width:150px; height:50px;
}
:)
Potestuję opcję ze znacznikiem img w HTML i dam znać czy mi się udało...
Monika
02.12.2013, 02:49
@Salvation dziękuję, pomogłeś. Trochę zmieniłam kod by podgląd miniaturek nie był dzielony na strony. Czy jest możliwość dopisania kodu do istniejącego skryptu, dzięki któremu będą generowane miniaturki? Ręczne ich tworzenie i dodawanie w dużej ilości doprowadza mnie do szału. Bardzo bym prosiła o tę część kodu, jeżeli ktoś takową posiada. :)
Salvation
02.12.2013, 19:45
Może podpowiedź. Wyświetlasz obrazki poprzez:
[code][/code]
wystarczy teraz, że dodasz:
[code][/code]
a w CSS dodasz:
[code].jakas_nazwa {width:150px; height:50px;
}[/code]
Pozdrawiam, Piotr.
Odpowiedz
Salvation
02.12.2013, 20:08
Ehh... Filtracja... Do znacznika img w HTML wystarczy dopisać class="jakas_nazwa" i przestawić ścieżkę z miniaturek na obrazki. Będzie działać.
Pozdrawiam, Piotr.
Odpowiedz
