HTML gallery generator 2.0.38 beta

Wybierz tryb generowania:

Ustawienia

Ustawienia generatora

Wielkość liter ma znaczenie. Podanie tej wartości jest wymagane tylko dla trybu generowania: Automatyczny. Możesz podać ścieżkę do folderu lokalnego na serwerze, tak jak na przykładzie (jednak nie będziesz mógł zobaczyć podglądu wygenerowanego kodu). Możesz też wpisać pełną ścieżkę do folderu ze zdjeciami np: https://www.twoja-domena.pl/images/big/ (zalecane) Możesz podać folder lokalny na serwerze tak jak powyżej lub pełną ścieżkę do folderu z miniaturami np: https://www.twoja-domena.pl/images/thumbs/ (zalecane)

Wielkość miniatur (Uwaga! Ta opcja nie tworzy miniatury zdjęcia, służy tylko do ustalenia rozmiarów wyświetlanych na ekranie)

Stałe proporcje

Co mam wygenerować?

Co jeśli nazwa mojego zdjęcia nie jest numerem?

W sekcji 'body' na swojej stronie wklej

Super! Ale to nie wszystko. Pozostało jeszcze kilka drobnych kroków do sukcesu. A więc do dzieła.

Skopiuj poniższy kod javascript i wklej do swojego edytora html lub bezpośrednio do strony

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

Skrypt galerii

<script type="text/javascript">
$(document).ready(function(){
$(".photo a").fancybox({
protect: true,
loop: true,
smallBtn: false,
buttons: [
"close"
],
idleTime: 3,
image: {
preload: true,
},
btnTpl: {
arrowLeft:
'<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="Poprzednie zdjęcie">' + "<img src='../img/player/prev.png'" + "</button>", arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="Następne zdjęcie">' + "<img src='../img/player/next.png' />" + "</button>", close: '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Zamknij podgląd">' + '<img src="../img/close.png" />' + "</button>", }
})
</script>

Style css

<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'/>

Skopiuj i wklej te obrazki do kalatolgu o nazwie 'img'

Może to być inny katalog, ale pamiętaj, aby w dołączonym skrypcie galerii zmienić ścieżki w tagu img

Wrzuć zdjęcia oraz kod galerii na serwer.

Gotowe!

Powrót do strony głównej

© Karol Smyczyński 2019