Stosując specjalny skrypt, który automatycznie otwiera pliki w nowym oknie bez potrzeby tworzenia dodatkowych stron, można zautomatyzować tworzenie galerii. Ponadto aktualizacja nie będzie w tym przypadku utrudniona - dodanie nowego zdjęcia będzie się wiązało tylko z dopisaniem jednej dodatkowej linijki bez potrzebny tworzenia całej galerii od nowa.
Wymagana wiedza:
Aby wstawić na stronę skrypt galerii zdjęć, należy zapisać przedstawiony poniżej kod w dowolnym pliku z rozszerzeniem *.js - np. galeria.js:
/** * @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Galeria(id, zdjecia, css, ochrona, zaladuj) { this.kolumny = 2; this.naStronie = 10; this.id = id; this.zdjecia = zdjecia; this.ochrona = typeof ochrona != 'undefined' ? ochrona : false; this.css = css; if (typeof zaladuj != 'undefined' && zaladuj) { for (var i = 0; i < this.zdjecia.length; i++) { new Image().src = this.zdjecia[i][0]; } } this.wyswietl = function(strona) { if (typeof strona == 'undefined') strona = 1; var html = ''; for (var i = start_ = (strona - 1) * this.naStronie, stop_ = Math.min(start_ + this.naStronie, this.zdjecia.length); i < stop_; i++) { if (i > start_ && !(i % this.kolumny)) html += '</tr><tr>'; html += '<td>' + '<a href="' + (this.ochrona ? 'javascript:void(0)' : this.zdjecia[i][1]) + '" onclick="return !' + this.id + '.pokaz(' + i + ')" onkeypress="return !' + this.id + '.pokaz(' + i + ')"><img src="' + this.zdjecia[i][0] + '" alt=""' + (this.ochrona ? ' onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" galleryimg="no"' : '') + ' /></a>' + (typeof this.zdjecia[i][2] != 'undefined' ? '<div>' + this.zdjecia[i][2] + '</div>' : '') + '</td>'; } if (html) html = '<table><tr>' + html + '</tr></table>'; if (this.zdjecia.length > this.naStronie) { html += '<div class="stronicowanie">'; if (strona > 1) html += '<a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + (strona - 1) + '); return false" onkeypress="' + this.id + '.wyswietl(' + (strona - 1) + '); return false">«</a>'; for (var i = 1, stop_ = Math.ceil(this.zdjecia.length / this.naStronie); i <= stop_; i++) { html += ' ' + (i == strona ? i : '<a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + i + '); return false" onkeypress="' + this.id + '.wyswietl(' + i + '); return false">' + i + '</a>'); } if (strona < stop_) html += ' <a href="javascript:void(0)" onclick="' + this.id + '.wyswietl(' + (strona + 1) + '); return false" onkeypress="' + this.id + '.wyswietl(' + (strona + 1) + '); return false">»</a>'; html += '</div>'; } document.getElementById(this.id).innerHTML = '<div class="galeria">' + html + '</div>'; } this._pokaz = function(i) { var numer = (i + 1) + '/' + this.zdjecia.length; if (this.zdjecia.length < 2) var stronicowanie = ''; else { var stronicowanie = '<div class="stronicowanie" style="white-space: nowrap">' + (i > 0 ? '<a href="javascript:void(0)" onclick="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i - 1) + ')); document.close(); document.close()\', 1); return false" onkeypress="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i - 1) + ')); document.close(); document.close()\', 1); return false">« Wstecz</a> ' : '') + numer + (i < this.zdjecia.length - 1 ? ' <a href="javascript:void(0)" onclick="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i + 1) + ')); document.close()\', 1); return false" onkeypress="setTimeout(\'document.write(window.opener.' + this.id + '._pokaz(' + (i + 1) + ')); document.close()\', 1); return false">Dalej »</a>' : '') + '</div>'; } var html = '<html>' + '<head>' + '<title>' + (typeof this.zdjecia[i][2] != 'undefined' ? this.zdjecia[i][2].replace(/<[^>]+>/g, '') + (numer ? ' (' + numer + ')' : '') : numer) + '</title>' + (typeof this.css != 'undefined' && this.css ? '<link rel="Stylesheet" type="text/css" href="' + this.css + '" />' : '') + '<'+'script type="text/javascript">' + 'function dopasuj() { window.resizeTo(Math.min(screen.availWidth, Math.max(document.getElementById(\'img\').width + 50, document.getElementById(\'body\').offsetWidth)), Math.min(screen.availHeight, document.getElementById(\'body\').offsetHeight + 80)); }' + (this.ochrona ? 'window.onblur = function() { if (document.getElementById(\'body\')) document.getElementById(\'body\').style.visibility = \'hidden\'; try { clipboardData.clearData(); } catch (e) {} }; window.onfocus = function () { if (document.getElementById(\'body\')) document.getElementById(\'body\').style.visibility = \'visible\'; };' : '') + '<'+'/script>' + '</head>' + '<body style="margin: 0; padding: 0" onload="dopasuj(); dopasuj()"' + (this.ochrona ? ' oncontextmenu="return false" onbeforeprint="document.getElementsByTagName(\'body\')[0].style.visibility = \'hidden\'; window.alert(\'Wydruk jest niedostępny!\')" onafterprint="document.getElementsByTagName(\'body\')[0].style.visibility = \'visible\'"' : '') + '>' + '<div id="body">' + '<div id="zdjecie">' + (typeof this.zdjecia[i][2] != 'undefined' || numer ? '<h1>' + (typeof this.zdjecia[i][2] != 'undefined' ? this.zdjecia[i][2] : numer) + '</h1>' : '') + '<div style="text-align: center"><img id="img" src="' + this.zdjecia[i][1] + '" alt=""' + (this.ochrona ? ' onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false" ondragstart="return false" ondrag="return false" galleryimg="no"' : '') + ' /></div>' + (typeof this.zdjecia[i][3] != 'undefined' ? '<div>' + this.zdjecia[i][3] + '</div>' : '') + stronicowanie + '</div>' + '</div>' + '</body>' + '</html>'; return html; } this.pokaz = function(i) { try { Galeria.okno.close() } catch (e) {} Galeria.okno = window.open('', this.id, 'menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,width=400,height=400'); if (!Galeria.okno) return false; Galeria.okno.document.close(); Galeria.okno.document.write(this._pokaz(i)); Galeria.okno.document.close(); Galeria.okno.focus(); return true; } document.write('<div id="' + this.id + '"></div>'); this.wyswietl(); } Galeria.okno = null;
Na samym początku w wyróżnionych miejscach można zmienić podstawowe ustawienia konfiguracyjne: ilość kolumn, w których będą wyświetlane miniatury oraz ilość obrazków miniatur umieszczanych na jednej stronie.
Następnie na stronie, gdzie ma być umieszczona galeria, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić:
<script type="text/javascript" src="galeria.js"></script>
W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku galeria.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod:
<script type="text/javascript"> // <![CDATA[ var galeria = new Galeria('galeria', new Array( new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis'), new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis'), new Array('miniatura', 'zdjęcie', 'Tytuł', 'Opis') )); // ]]> </script>
UWAGA!
Zwróć uwagę, że po każdym elemencie, wprowadzającym do galerii kolejne zdjęcie ("miniatura, zdjęcie, Tytuł, Opis"), oprócz ostatniego
musi być postawiony przecinek. Pominięcie przecinka lub postawienie go
po ostatnim elemencie spowoduje błędy w skrypcie i galeria wcale się nie
wyświetli!
Jak w każdym skrypcie JavaScript, w wartościach zmiennych ujętych w apostrofy (tutaj jest to Tytuł i Opis) nie wolno już używać apostrofów ("'") ani odwróconych ukośników ("\"). Jeżeli musimy ich użyć, należy poprzedzić je dodatkowym znakiem "\" - np. "\'", "\\". Poza tym wartości tych zmiennych muszą się znajdować w jednej linijce, tzn. absolutnie niedozwolone jest przełamywanie wiersza klawiszem Enter.
Zwróć również uwagę na wyróżnione wyrazy galeria: muszą być one w obu miejscach dokładnie identyczne,
a dodatkowo nie mogą zawierać znaków zabronionych w identyfikatorach,
tj. innych niż angielskie litery, cyfry (ale nie na początku) i
podkreślniki ("_").
Aby umieścić w jednym dokumencie kilka
oddzielnych galerii, należy powtórzyć tylko powyższą część kodu,
modyfikując w nim właśnie wyróżniony identyfikator galeria - inny dla każdej galerii.
Ostatnie dwa parametry są nieobowiązkowe, tzn. można je pominąć:
new Array('miniatura', 'zdjęcie') new Array('miniatura', 'zdjęcie', 'Tytuł') new Array('miniatura', 'zdjęcie', '', 'Opis')
W opisie można bez przeszkód używać znaczników HTML, np. aby wprowadzić formatowanie tekstu lub podzielić treść na akapity.
Ponadto aby odpowiednio wystylizować galerię, można do niej dołączyć np. taki arkusz CSS:
.galeria { text-align: center; } .galeria table { margin-left: auto; margin-right: auto; } .galeria td { padding: 5px 5px 10px 5px; } .galeria td img { border: 1px solid black; }
Najwygodniej będzie zapisać go w osobnym pliku z rozszerzeniem *.css - np. galeria_zdjec.css i osadzić w nagłówku dokumentu za pomocą znacznika:
<link rel="Stylesheet" type="text/css" href="galeria_zdjec.css" />
Oczywiście można go również dołączyć do już istniejącego arkusza stylów serwisu.
Jak przekształcić kolorowe zdjęcie (obrazek, grafikę) na czarno-białą fotografię?
Jak stworzyć negatyw zdjęcia (fotografii)?
Jak wstawić galerię zdjęć (grafik) na stronie WWW? Co zrobić, aby po kliknięciu miniaturki obrazka, otworzyło się okno z jego dużą kopią?
30.10.2014 09:05
Dzięki
za link chodziło o wielkość liter, niektóre obrazki były zapisane jako
.jpg a inne .JPG na co nie zwróciłam wcześniej uwagi :)
Zobacz więcej
23.10.2014 08:23
Hej,
Jestem
strasznym laikiem przy tworzeniu stron, a pracuję właśnie nad własną
stroną i mam mały problem mianowicie przy tworzeniu swojej galerii zdjęć
w kedzie w wersji roboczej wszystko jest w porządku i ładnie mi się
wyświetla, ale jak tylko wrzucam to na serwer, nie otwierają się
niektóre...
Zobacz więcej
07.09.2014 14:49
a
gdzie jest w kodzie fragment dot. miniatuerk? wprowadziłabym żeby
mianiaturka była zdjęciem odpalanym na nowej stronie ale pomniejszonym. O
wiele ułatwiłoby to mi prace.
Zobacz więcej
19.06.2014 23:59
Przepraszam :)
Zobacz więcej
19.06.2014 23:56
Szukaj pod hasłem "lightbox" i nie dubluj postów z łaski swojej.
Zobacz więcej
19.06.2014 23:52
A dało by sie pisac na tej stronie co nam sie wyswietla po kliknieciu? Jezeli tak to w jaki sposob :)
Zobacz więcej
03.05.2014 11:13
Witajcie.
jak wycentrować okienko, ktore wyskakuje ze zdjeciem? obecnie mam tak,
ze 1/4 zdjecia jest poza przeglądarką i trzeba ciągle okno przesuwać w
lewo, by zobaczyc cale zdjecie. z gory dziekuje!!!
Zobacz więcej
03.03.2014 15:40
Witam
forumowiczów. Wiem że temat ten się przewijał już na tym forum m.in. na
stronie 3 i 4 ale nadal nie znalazłem rozwiązania na problem.
Mianowicie mam galerię zdjęć, stworzoną za pomocą skryptu ze strony http://www.kurshtml.edu.pl/skrypty/skrypt_galerii,galeria.html i ładnie z miniaturek...
Zobacz więcej
25.02.2014 18:23
Kac: "Jak zmodyfikować JS żeby przyciski Wstecz i Dalej znalazły się nad zdjęciem?".
Odpowiada za to fragment zaczynający się od: var html =
Kac: "Ponadto chciałbym żeby okienko podglądu było na pełny ekran. Da radę?".
http://stackoverflow.com/questions/10297168/how-to-open-maximized-window-with...
Zobacz więcej