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
