Galeria zdjęć JS, CSS3 (wersja beta)

Prosta galeria zdjęć, animowana przy pomocy właściwości CSS3.

Galeria zdjęć JS, CSS3 (wersja beta)

Galeria zdjęć jako moduł na stronę internetową jest jednym z popularniejszych dodatków wykorzystywanych w procesie tworzenia aplikacji internetowych. Analizując strony znajdujące się w sieci postanowiłem stworzyć prosty ale jednocześnie kompleksowy moduł galerii zdjęć wyposażony w najpopularniejsze funkcjonalności. W celu uruchomienia galerii niezbędna będzie moja autorska biblioteka COMP która wykorzystywana jest przez większość modułów prezentowanych na tym blogu. Trwają pracę nad przystosowaniem biblioteki w sposób umożliwiający całkowitą zamianę jej poprzez bibliotekę jQuery, stąd zbieżność nazw metod i podobna konstrukcja. Galeria posiada następujące funkcjonalności:

  • Komentarze do zdjęć
  • Animacje CSS3
  • Zapętlanie listy zdjęć
  • Wczytywanie zdjęć z innego źródła
  • Albumy
  • Nawigacja
  • RWD

DEMO:

HTML:

  <a class="gallery" href="uploads/images/blog/1.jpg">Pierwsza miniaturka</a>
  <a class="gallery" href="uploads/images/blog/2.jpg">Druga miniaturka</a>
  <a class="gallery" href="uploads/images/blog/3.jpg">Trzecia miniaturka</a>
  <a class="gallery" href="uploads/images/blog/4.jpg">Czwarta miniaturka</a>
  <a class="gallery" href="uploads/images/blog/5.jpg">Piąta miniaturka</a>
  <a class="gallery" href="uploads/images/blog/6.jpg">Szósta miniaturka</a>
  <a class="gallery" href="uploads/images/blog/7.jpg">Siódma miniaturka</a>
  <a class="gallery" href="uploads/images/blog/8.jpg">Ósma miniaturka</a>

CSS:

.gallery-content {
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  margin-bottom: 1rem;
  text-align: center;
}

.gallery-content a {
  background: no-repeat center / cover;
  border: 3px solid #737c85;
  display: inline-block;
  height: 120px;
  margin: 5px;
  width: 120px;
}

.gallery-content a:hover {
  border-color: #ffc000;
}

.compsoul-gallery-mask {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100vh;
  left: 0rem;
  position: fixed;
  top: 0rem;
  width: 100vw;
  z-index: 999;
}

.compsoul-gallery-mask.active {
  display: block;
}

.compsoul-gallery-mask-before {
  height: 100vh;
  left: 0rem;
  position: fixed;
  top: 0rem;
  width: 100vw;
}

.compsoul-gallery-mask-before-button {
  background: #000;
  content: "";
  cursor: pointer;
  height: 4vw;
  right: 0rem;
  position: fixed;
  top: 0rem;
  width: 4vw;
  z-index: 1;
}

.compsoul-gallery-mask-before:after {
  color: #fff;
  content: "\f105\f104";
  cursor: pointer;
  font-family: "FontAwesome";
  font-size: 2vw;
  letter-spacing: -0.1875rem;
  line-height: 2vw;
  right: 2vw;
  position: fixed;
  top: 2vw;
  transform: translate(50%, -50%);
  z-index: 1;
}

.compsoul-gallery img {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0.0625rem;
  margin: -0.0625rem; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 0.0625rem;
}

.compsoul-gallery .gallery-comment {
  background: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  bottom: 0;
  color: #fff;
  padding: 10px;
  position: absolute;
  width: 100%;
}

.compsoul-gallery-prev, .compsoul-gallery-next {
  background: #000;
  cursor: pointer;
  font-size: 0;
  height: 4vw;
  letter-spacing: 0;
  line-height: 0;
  right: 0rem;
  overflow: hidden;
  position: fixed;
  text-indent: 100%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  width: 4vw;
  z-index: 1;
}

.compsoul-gallery-prev {
  left: 0rem;
}

.compsoul-gallery-prev:before, .compsoul-gallery-next:before {
  display: block;
  color: #fff;
  content: "\f105";
  font-family: "FontAwesome";
  font-size: 2vw;
  line-height: 4vw;
  height: 4vw;
  text-align: center;
  text-indent: initial;
  width: 4vw;
}

.compsoul-gallery-close:after {
  float: left;
  margin-left: 0.1875rem;
  text-align: right;
  width: 2vw;
}

.compsoul-gallery-prev:before {
  content: "\f104";
}

.compsoul-gallery-first-element, .compsoul-gallery-second-element {
  background: no-repeat center / cover;
  left: 50%;
  max-height: 90vh;
  max-width: 90vw;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
}

.compsoul-gallery-first-element.active {
  animation: active linear 0.4s forwards;
}

.compsoul-gallery-first-element.next, .compsoul-gallery-second-element.next {
  animation: next-of linear 0.4s forwards;
}

.compsoul-gallery-first-element.prev, .compsoul-gallery-second-element.prev {
  animation: prev-of linear 0.4s forwards;
}

.compsoul-gallery-first-element.next.active, .compsoul-gallery-second-element.next.active {
  animation: next linear 0.4s forwards;
}

.compsoul-gallery-first-element.prev.active, .compsoul-gallery-second-element.prev.active {
  animation: prev linear 0.4s forwards;
}

.compsoul-gallery-loader {
  opacity: 0;
}

.compsoul-gallery-loader.active {
  animation: active linear 0.4s forwards 0.4s;
}

.compsoul-gallery-loader.none {
  animation: none;
  transition: opacity 0.4s;
}

.compsoul-gallery-loader:before, .compsoul-gallery-loader:after {
  animation: turn linear 1s infinite;
  border: solid #fff;
  border-radius: 100%;
  content: "";
  display: block;
  height: 2rem;
  left: 50%;
  margin: -1rem 0 0 -1rem;
  position: fixed;
  top: 50%;
  width: 2rem;
}

.compsoul-gallery-loader:before {
  border-width: 0 0.125rem 0.125rem 0;
}

.compsoul-gallery-loader:after {
  animation-direction: reverse;
  border-width: 0.125rem 0 0 0.125rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  width: 4rem;
}

@keyframes active {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes next {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes next-of {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-100%, -50%);
  }
}

@keyframes prev {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes prev-of {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, -50%);
  } 
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  } 
}

JS:

  <script src="comp.js"></script>
  <script src="gallery.js"></script>
  <script>
    (function ($) {
      $(".gallery").gallery();
    })(Comp);
  </script>

Instalacja:

Na początku musimy umieścić na naszej stroni internetowej kod HTML odpowiadający za wyświetlanie się miniaturek, linków. Kod możemy wkleić w dowolnym miejscu na stronie internetowej. Należy pamiętać jednak że import plików js jak i deklaracja instancji powinna znajdować się pod kodem HTML:

  <a class="gallery-text" href="uploads/images/blog/1.jpg">Pierwsza miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/2.jpg">Druga miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/3.jpg">Trzecia miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/4.jpg">Czwarta miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/5.jpg">Piąta miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/6.jpg">Szósta miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/7.jpg">Siódma miniaturka</a>
  <a class="gallery-text" href="uploads/images/blog/8.jpg">Ósma miniaturka</a>

Powyższy kod HTML da następujący rezultat:

Pierwsza miniaturka Druga miniaturka Trzecia miniaturka Czwarta miniaturka Piąta miniaturka Szósta miniaturka Siódma miniaturka Ósma miniaturka

Zauważ że w środku tagu <a> mogą znajdować się nie tylko zdjęcia ale i teksty, filmy czy inne ciekawe elementy, ważne jest tylko aby atrybut href wskazywał na zdjęcie wykorzystane w procesie uruchamiania galerii. Poniżej przykładowy kod wykorzystujący zdjęcia jako miniaturki:

  <a class="gallery-image" href="uploads/images/blog/1.jpg"><img src="uploads/images/blog/1-thumb.jpg" alt="Pierwsza miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/2.jpg"><img src="uploads/images/blog/2-thumb.jpg" alt="Druga miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/3.jpg"><img src="uploads/images/blog/3-thumb.jpg" alt="Trzecia miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/4.jpg"><img src="uploads/images/blog/4-thumb.jpg" alt="Czwarta miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/5.jpg"><img src="uploads/images/blog/5-thumb.jpg" alt="Piąta miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/6.jpg"><img src="uploads/images/blog/6-thumb.jpg" alt="Szósta miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/7.jpg"><img src="uploads/images/blog/7-thumb.jpg" alt="Siódma miniaturka"></a>
  <a class="gallery-image" href="uploads/images/blog/8.jpg"><img src="uploads/images/blog/8-thumb.jpg" alt="Ósma miniaturka"></a>

Powyższy kod HTML da następujący rezultat:

Pierwsza miniaturka Druga miniaturka Trzecia miniaturka Czwarta miniaturka Piąta miniaturka Szósta miniaturka Siódma miniaturka Ósma miniaturka

Nadajemy wygląd naszemu modułowi:

Kolejnym krokiem instalacyjnym będzie dodanie poniższych styli CSS do naszego głównego arkusza. Style możemy dodać w dowolnym miejscu arkusza. Domyśle style korzystają z ikon http://fontawesome.io/, nie widzę jednak przeszkód aby edytować ikony wykorzystane w galerii i zastąpić je własnymi znakami graficznymi. Kod CSS:

.gallery-content {
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
  margin-bottom: 1rem;
  text-align: center;
}

.gallery-content a {
  background: no-repeat center / cover;
  border: 3px solid #737c85;
  display: inline-block;
  height: 120px;
  margin: 5px;
  width: 120px;
}

.gallery-content a:hover {
  border-color: #ffc000;
}

.compsoul-gallery-mask {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100vh;
  left: 0rem;
  position: fixed;
  top: 0rem;
  width: 100vw;
  z-index: 999;
}

.compsoul-gallery-mask.active {
  display: block;
}

.compsoul-gallery-mask-before {
  height: 100vh;
  left: 0rem;
  position: fixed;
  top: 0rem;
  width: 100vw;
}

.compsoul-gallery-mask-before-button {
  background: #000;
  content: "";
  cursor: pointer;
  height: 4vw;
  right: 0rem;
  position: fixed;
  top: 0rem;
  width: 4vw;
  z-index: 1;
}

.compsoul-gallery-mask-before:after {
  color: #fff;
  content: "\f105\f104";
  cursor: pointer;
  font-family: "FontAwesome";
  font-size: 2vw;
  letter-spacing: -0.1875rem;
  line-height: 2vw;
  right: 2vw;
  position: fixed;
  top: 2vw;
  transform: translate(50%, -50%);
  z-index: 1;
}

.compsoul-gallery img {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0.0625rem;
  margin: -0.0625rem; 
  overflow: hidden; 
  padding: 0;
  position: absolute; 
  width: 0.0625rem;
}

.compsoul-gallery .gallery-comment {
  background: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  bottom: 0;
  color: #fff;
  padding: 10px;
  position: absolute;
  width: 100%;
}

.compsoul-gallery-prev, .compsoul-gallery-next {
  background: #000;
  cursor: pointer;
  font-size: 0;
  height: 4vw;
  letter-spacing: 0;
  line-height: 0;
  right: 0rem;
  overflow: hidden;
  position: fixed;
  text-indent: 100%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  width: 4vw;
  z-index: 1;
}

.compsoul-gallery-prev {
  left: 0rem;
}

.compsoul-gallery-prev:before, .compsoul-gallery-next:before {
  display: block;
  color: #fff;
  content: "\f105";
  font-family: "FontAwesome";
  font-size: 2vw;
  line-height: 4vw;
  height: 4vw;
  text-align: center;
  text-indent: initial;
  width: 4vw;
}

.compsoul-gallery-close:after {
  float: left;
  margin-left: 0.1875rem;
  text-align: right;
  width: 2vw;
}

.compsoul-gallery-prev:before {
  content: "\f104";
}

.compsoul-gallery-first-element, .compsoul-gallery-second-element {
  background: no-repeat center / cover;
  left: 50%;
  max-height: 90vh;
  max-width: 90vw;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
}

.compsoul-gallery-first-element.active {
  animation: active linear 0.4s forwards;
}

.compsoul-gallery-first-element.next, .compsoul-gallery-second-element.next {
  animation: next-of linear 0.4s forwards;
}

.compsoul-gallery-first-element.prev, .compsoul-gallery-second-element.prev {
  animation: prev-of linear 0.4s forwards;
}

.compsoul-gallery-first-element.next.active, .compsoul-gallery-second-element.next.active {
  animation: next linear 0.4s forwards;
}

.compsoul-gallery-first-element.prev.active, .compsoul-gallery-second-element.prev.active {
  animation: prev linear 0.4s forwards;
}

.compsoul-gallery-loader {
  opacity: 0;
}

.compsoul-gallery-loader.active {
  animation: active linear 0.4s forwards 0.4s;
}

.compsoul-gallery-loader.none {
  animation: none;
  transition: opacity 0.4s;
}

.compsoul-gallery-loader:before, .compsoul-gallery-loader:after {
  animation: turn linear 1s infinite;
  border: solid #fff;
  border-radius: 100%;
  content: "";
  display: block;
  height: 2rem;
  left: 50%;
  margin: -1rem 0 0 -1rem;
  position: fixed;
  top: 50%;
  width: 2rem;
}

.compsoul-gallery-loader:before {
  border-width: 0 0.125rem 0.125rem 0;
}

.compsoul-gallery-loader:after {
  animation-direction: reverse;
  border-width: 0.125rem 0 0 0.125rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  width: 4rem;
}

@keyframes active {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes next {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes next-of {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-100%, -50%);
  }
}

@keyframes prev {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

@keyframes prev-of {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(0%, -50%);
  } 
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  } 
}

Instalacja skryptów JS:

Po wykonaniu powyższych kroków pozostała nam "instalacja" skryptów JS. Aby nasz skrypt działał poprawnie, musimy dodać do naszej strony następujące pliki:

  • COMP (Kliknij aby otworzyć w nowym oknie, następnie zapisz plik za pomocą komendy zapisz bądź kombinacji klawiszy ctrl + s) - Wspomniana wcześniej biblioteka. W przyszłości można będzie używać alternatywy w postaci jQuery, nie będzie to jednak zalecane.
  • GALERIA (Pobieramy w identyczny sposób) - Plik zawierający skrypt z galerią.

Kiedy już pobierzemy niezbędne pliki, zapisujemy je w odpowiednim katalogu. Kod znajdujący się poniżej wskazuje na katalog główny (w większości przypadków ścieżka do plików powinna zostać zmieniona). Po zaimportowaniu biblioteki COMP i jej metody GALERIA, musimy wskazać które elementy zostaną pobrane do listy zdjęć. Deklaracja nowej instancji (nowej listy zdjęć, galerii) odbywa się poprzez edycję podanego fragmentu kodu: $(".gallery") , takie ustawienie gwarantuje nam że każdy element z klasą CSS "gallery" zostanie dołączony do listy naszych zdjęć, tutaj chciałbym zaznaczyć że należy uważać aby na stronie przypadkowo nie używać podanej wcześniej klasy CSS. Całość implementacji JS polega na dodaniu następującego kodu tuż przed zamknięciem znacznika body:

  <script src="comp.js"></script>
  <script src="gallery.js"></script>
  <script>
    (function ($) {
      $(".gallery").gallery();
    })(Comp);
  </script>

Voilà, nasza galeria na stronie jest już gotowa! Poniżej postaram się opisać ustawienia galerii jak uruchomić komentarze czy album i wiele innych interesujących ustawień.

Ustawienia:

Nasza galeria posiada następujące opcje, poniżej zostały zaprezentowane domyślne ustawienia:

  <script>
    (function ($) {
      $(".gallery").gallery({
        animation: "slide",
        animationPrev: "prev",
        animationNext: "next",
    
        album: false,
        albumClass: ".gallery-album",
    
        mask: "compsoul-gallery-mask",
        maskBefore: "compsoul-gallery-mask-before",
        maskBeforeButton: "compsoul-gallery-mask-before-button",
        content: "compsoul-gallery",
        close: "compsoul-gallery-close",
        closeText: "",
        nav: true,
        prev: "compsoul-gallery-prev",
        prevText: "Poprzedni",
        next: "compsoul-gallery-next",
        nextText: "Następny",
        firstElement: "compsoul-gallery-first-element",
        secondElement: "compsoul-gallery-second-element",
        loader: "compsoul-gallery-loader",
        comment: "gallery-comment",
    
        hiddenScroll : true,
        hiddenScrollClass : "hidden-scroll",
    
        activeNameClass: "active",
        inactiveNameClass: "none",
        errorNameClass: "error",
        prevNameClass: "prev",
        nextNameClass: "next",
    
        parent: false
      });
    })(Comp);
  </script>

album: false

Zaprezentowana galeria posiada możliwość kliknięcia w jedno zdjęcia i wczytanie listy zdjęć z podanego łącza. Przykładowo ustawiam album na wartość true:

<script>
  (function ($) {
    $(".gallery-album").gallery({
      album: true,
      albumClass: ".gallery-album"
    });
  })(Comp);
</script>

... a w kodzie html jako href podaje link do pliku html w którym znajduje się moja lista zdjęć, czyli wszystkie <a> z klasą "gallery-album" (albumClass: ".gallery-album"):

<a class="gallery-album" href="http://blog.compsoul.pl/uploads/galeria-album-demo/"><img src="uploads/galeria-album-demo/album.jpg" alt="Miniaturka"></a>

Miniaturka

comment: "gallery-comment"

<script>
  (function ($) {
    $("gallery-comment-a").gallery({
      comment: "gallery-comment"
    });
  })(Comp);
</script>

Aby dodać komentarz do naszej galerii wystarczy wewnątrz <a> dodać <div class="hidden gallery-comment">Treść komentarza</div> przykładowo:

  <a class="gallery-comment-a" href="uploads/images/blog/1.jpg">
    <img src="uploads/images/blog/1-thumb.jpg" alt="Pierwsza miniaturka">
    <div class="hidden gallery-comment">Wunsz!!!</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/2.jpg">
    <img src="uploads/images/blog/2-thumb.jpg" alt="Druga miniaturka">
    <div class="hidden gallery-comment">Ryś</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/3.jpg">
    <img src="uploads/images/blog/3-thumb.jpg" alt="Trzecia miniaturka">
    <div class="hidden gallery-comment">Kot</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/4.jpg">
    <img src="uploads/images/blog/4-thumb.jpg" alt="Czwarta miniaturka">
    <div class="hidden gallery-comment">Burki</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/5.jpg">
    <img src="uploads/images/blog/5-thumb.jpg" alt="Piąta miniaturka">
    <div class="hidden gallery-comment">Kraaaaaaa</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/6.jpg">
    <img src="uploads/images/blog/6-thumb.jpg" alt="Szósta miniaturka">
    <div class="hidden gallery-comment">Tysz wunsz!!!</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/7.jpg">
    <img src="uploads/images/blog/7-thumb.jpg" alt="Siódma miniaturka">
    <div class="hidden gallery-comment">Gołąb</div>
  </a>
  <a class="gallery-comment-a" href="uploads/images/blog/8.jpg">
    <img src="uploads/images/blog/8-thumb.jpg" alt="Ósma miniaturka">
    <div class="hidden gallery-comment">Znowu kot</div>
  </a>

Oto rezultat:

Pierwsza miniaturka Druga miniaturka Trzecia miniaturka Czwarta miniaturka Piąta miniaturka Szósta miniaturka Siódma miniaturka Ósma miniaturka

Zaznaczam iż galeria jest w fazie beta i mogą pojawić się nieoczekiwane błędy. Jak zawsze zachęcam do komentowania (komentarz zostanie wyświetlony na stronie po zaakceptowaniu).

Gotowe szablony stron www z wdrożeniem!

Komentarze:

Admin

27.04.2019
@hirka8860 - Na pewno nie jest tak źle, proszę o link do strony drogą mailową, postaram się pomóc.

hirka8860

27.04.2019
Niestety nie działa mi ta galeria pomimo zrobienia wszystkiego według instrukcji :(

hirka8860

27.04.2019
Chyba jestem ułomna i nie potrafię tego :( Nic totalnie nie chce mi wyjść

Admin

16.03.2019
Dzięki za wykorzystanie skryptu, odnośnie rozmiarów strzałek, trzeba zatrzymać ich skalowanie na urządzeniach mobilnych. https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

luk

16.03.2019
Dzięki za wrzucenie kodu! Da się zrobić by w wersji mobilnej strony pojawiały się większych rozmiarów strzałki ?

Admin

18.02.2019
@Mikołaj - Najprawdopodobniej ma Pan złe ścieżki do plików, proszę wcisnąć F12 i podać treść błędu wyświetlanego w konsoli.

Admin

18.02.2019
@gkryss - Proszę dopisać w arkuszu CSS: .hidden { display: none; }

Mikołaj

18.02.2019
Witam, mam problem, mianowicie gdy klikam na zdjęcie to otwiera się ono w nowym oknie, nie ma żadnych strzałek etc. Wydaje mi się że jest to problem z fontem, ponieważ nie potrafię go zainstalować i nie wiem czy wszystkie odnośniki już są czy powinienem jakieś dodać. Wysyłam panu wszystko na maila i proszę o pomoc, pozdrawiam.

gkryss

17.02.2019
Bardzo mi się podoba ta galeria, tylko u mnie jak dodaje komentarz to pojawia się również pod miniaturką a tu na stronie nie ma pod miniaturką komentarzy. Na razie testuje lokalnie na komputerze.

Admin

04.02.2019
@Granit - Proszę o adres strony na maila, zobaczę co jest nie tak.

Granit

04.02.2019
Witam, po wklejałem wszystko zgodnie z instrukcjami i galeria mi nie działa. Masz może jakieś gotowce ? Dodałbym do tego php i wszystko by fajnie śmigało :) Z góry dzięki za pomoc

Admin

31.01.2019
Funkcja album korzysta z obiektu XMLHttpRequest i nie będzie działała lokalnie. Proszę sprawdzić w konsoli (F12) błąd.

Darek

31.01.2019
Bardzo fajna galeria ale u mnie funkcja "album" nie działa - kombinuje na wszystkie strony i nie działa. Stronę robię na razie na komputerze, nie w sieci, więc to raczej nie kwestia błędnych ścieżek. Po wywołaniu albumu na środku ekranu kręcą się dwa kółka jakby komputer myślał, ale niestety album zdjęć się nie wyświetla. Może jakaś porada, co może być źle ?

Admin

28.12.2018
@Piotr - Style CSS dla miniatur zostały nadane wstępnie, zamysłem takiego zabiegu było stworzenie domyślnego wyglądu który należy dostosować do strony docelowej. Jeżeli nie może Pan sobie poradzić z CSS zapraszam na mojego maila.

Piotr

27.12.2018
Po dodaniu opisów obrazków Opis, kolejne miniaturki nie są w poziomych rzędach tylko w jednej pionowej kolumnie. tak jakby po każdej miniaturce była zmiana linii .

Admin

07.11.2018
@Asia - Musisz zainstalować odpowiedni font https://fontawesome.com/v4.7.0/get-started/, bądź obserwować tablicę z aktualnościami ewentualnie wysłać mi link na pocztę: daniel@compsoul.pl

Asia

06.11.2018
Dzieki za artyuł. Tez mam problem z X - czy udało się wam to jakoś rozwiązać?

Radek

26.10.2018
@Admin Dzięki, kombinowałem trochę, ale szczerze mówiąc nie mam wiedzy w JavaScriptach i nie podołam :-) Z utęsknieniem będę czekał na aktualkę w przyszłości, póki co działa świetnie :)

Admin

22.10.2018
@Radek przy pomocy https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events jest to do zrobienia, pracy myślę nie dużo, kwestia wsparcia. Dziękuję za uwagę, pomyślę przy aktualizacji :)

Admin

22.10.2018
@Brawid Ciężko jest mi powiedzieć co dokładnie poszło nie tak, należy sprawdzić czy ścieżki do plików z fontami są poprawne oraz czy nazwa fontu w pliku CSS pokrywa się z tą w deklaracji @font-face. Jeżeli problem nie zostanie rozwiązany, zapraszam na maila: daniel@compsoul.pl

Radek

22.10.2018
Rewelacja, udało mi się, jednak mam pytanko :-) Czy istnieje możliwość skonfigurowania w jakiś sposób galerii, aby na telefonie można "przesuwać" zdjęcia palcem? To duża ingerencja w kod? Z taką opcją byłby to ideał :D

Brawid

22.10.2018
Dobra robota! Mam jednak jeden problem z ikonkami po kliknięciu na zdjęcie. Powinienem mieć strzałeczki i X, a nie widzę nawet żadnego kwadracika. Najprawdopodobniej popełniłem gdzieś jakiś głupi błąd, lecz jednak bardzo proszę o pomoc. Dodam, że cały folder "font-awesome" jest w głównym folderze strony gdzie mam indexa dlatego tak podpiąłem cssa: . Byłbym wdzięczny za rozwiązanie mojego problemu.

Admin

18.10.2018
@Lito wyślij proszę adres swojej strony na mój email daniel@compsoul.pl postaram się zweryfikować co się stało :)

Lito

18.10.2018
Hej! dzieki za galerie! prawie wszystko dziala :) otoz, nie dziala mi opcja z 'Album: true', podlinkowalem Twojá galerie do jednego zdjecia na mojej stronie i niestety tak jakby nic sie nie dzialo. klikam i nic. natomiast jesli wpisze wartosc 'album: false' to pojawia mi sie ekran galerii ze strzalkami i 'spirala' ladowania. zero obrazka. oprocz tego normalne zdjecia dzialaja mi w galerii, tylko opcja klikniecia w jedno zdjecie i rozwiniecie galerii z innej strony(Twojej str demo) nie dziala, a przyznam, ze takie 'albumowanie' byloby najlepsze w moim przypadku. masz moze jakis pomysl, jak to naprawic? z góry dzieki. Lito

Hubert

30.09.2018
Witam szanownego Admina Dzięki za świetną robotę i pomoc dla nowicjuszy... czyli m.in. dla mnie :) Mam problem z uruchomieniem galerii, tzn. jej wywołaniem. W moim przypadku wystarczy jeśli możliwe będzie przeglądanie zdjęć galerii po wywołaniu jej z linku tekstowego (bez miniatur). Szczegóły wysyłam pod wcześniej podany mail daniel@compsoul.pl. Domyślam się że popełniłem jakiś podstawowy szkolny błąd. Proszę o pomoc i radę. Pozdrawiam i czekam z niecierpliwością na odpowiedź - o czym nie omieszkam dać znać w komentarzach. Miłego dnia.

Admin

21.09.2018
@Michał - Aby dodać przyciski nawigacyjne należy edytować pozycje CSS .compsoul-gallery-prev:before, .compsoul-gallery-next:before lub dodać https://fontawesome.com/v4.7.0/get-started/ jeżeli będą problemy z instalacją zapraszam na daniel@compsoul.pl

Michał

21.09.2018
Witam, mam problem z ikonkami przy galerii, gdzie je mam dodać w kodzie by zamiast pustego miejsca były strzałki i krzyżyk na zamknięcie strony, ewentualnie jak wrzucić je ze strony fontawesome??

Bug

08.09.2018
Problem został rozwiązany, Dziękuję bardzo za pomoc. Polecam jak najbardziej tego Bloga, a w szczególności osobę która go prowadzi. :)

Admin

02.09.2018
@Bug - Możesz podesłać link online? Jeżeli nie chcesz w komentarzu, podeślij na daniel@compsoul.pl .

Bug

01.09.2018
Bardzo pomocny i dobrze opisany sposób działania galerii w artykule. Niestety mam problem z ustawieniem albumów, po kliknięciu w miniaturę nic się nie dzieje, album się nie otwiera w formie galerii. (kiedy próbuję samą galerię bez funkcji albumów działa)

Admin

19.06.2018
@Paweł - masz błędne ścieżki do plików.

Admin

17.06.2018
@Paweł - Proszę o podesłanie linku do strony z zaprezentowaniem przykładu, będę mógł pomóc dopiero w środę, gdyż obecnie jestem na urlopie.

Paweł

17.06.2018
Witam. tu ponownie ja, mam teraz problem z galeria tą o jednym z zdjęciu z którego "wychodzi" kilka, ponieważ tak jakby nie czyta mi tych reszty zdjęć, tylko wyświetla mi się goły plik html z zawartością.

Admin

14.06.2018
@michal55568 - Problem udało się rozwiązać za pośrednictwem naszego FB, Michał zwrócił uwagę że brakuje mu nawigacji za pomocą strzałek na przeglądarce Chrome. Czy macie podobne odczucia w tym temacie?

michal55568

14.06.2018
Witam, mam ten sam problem co kolega Paweł, czy mógłby mi ktoś pomóc gdzie mam szukać błędu żeby mi nie pokazywało zdjęć w nowej karcie, tylko żeby były wyświetlone tak jak tu na stronie? (Chodzi mi o przewijanie zdjęć w tle, nie moge rozwiązać tego problemu)

Admin

13.06.2018
@Paweł nie ma sprawy, zmniejsz rozmiar i wagę zdjęć gdyż długo się wczytują. Zachęcam do polubienia naszego FB - https://www.facebook.com/compsoulpl/

Paweł

13.06.2018
Dziękuje za pomoc, brakowało kropki już wszystko działa. Pozdrawiam

Admin

13.06.2018
@Paweł zdjęcia powinny mieć klasę która została użyta podczas wywoływania metody, czyli w Twoim przypadku ".gallery" . Jeżeli zdjęcia będą miały taką klasę galeria odpali się poprawnie, link od Ciebie działa.

Paweł

13.06.2018
Gdy zrobię za pomocą "gallery-image" zdjęcia otwierają si jakby w nowym oknie, a gdy zrobię samo "gallery" otwiera się poprawnie, ale tylko na dysku

Admin

13.06.2018
@Paweł pierwsza miniatura ma złą klasę "gallery-image", poza tym w zdjęciu numer 6 jest niedomknięty href.

Paweł

13.06.2018
link został przesłany na maila, pozdrawiam!

Admin

13.06.2018
@Paweł - Możesz podesłać link online? Jeżeli nie chcesz w komentarzu podeślij na daniel@compsoul.pl .

Paweł

13.06.2018
Witam, mam pewien problem po wprowadzeniu całego kodu, gdy uruchamiam z dysku wszystko pięknie działa, a gdy wrzucę na hosting zdjęcia ładują się niepoprawnie

Admin

04.06.2018
@Topsi - Musisz mieć dodany "FontAwesome" w wersji 4.x w przyszłości postaram się wyeliminować tę zależność. Możesz również ustawić tło przyciskom za pomocą CSS z odpowiednimi grafikami.

Topsi

04.06.2018
Wszystko fajnie działa, tylko mam problem ze strzałkami w galerii, zamiast nich mam prostokąty. Gdzie szukać błędu?

Admin

21.05.2018
Korzystaj, testuj a w razie uwag pisz śmiało :)

toja123

20.05.2018
Serdecznie dziękuję! Przydało się, obecnie śledzę resztę bloga :)

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".