Z uwagi na dużą liczbę wpisów stworzonych bez wątpienia wyłącznie w celu pozycjonowania stron na określone frazy, dodaliśmy do wszystkich linków (w postach i podpisach) atrybut rel="nofollow". Z tego względu wszystkie dodane linki straciły swoją moc pozycjonerską. Forum jest dla Was, dlatego prosimy o zamieszczanie wyłącznie "prawdziwych" tematów i odpowiedzi.

Ajax i JSON – problem z dodawaniem zdjęć

Dreamweaver, XHTML, CSS, JavaScript, jQuery
  • Wiadomości
Offline

tjezierski

  • Posty: 4
  • Rejestracja: 10 paź 2016, o 13:20

Ajax i JSON – problem z dodawaniem zdjęć

Post10 paź 2016, o 13:43

Witam serdecznie,
od paru dni jestem bliski rwania włosów z głowy, próbując znaleźć rozwiązanie poniższego problemu:
tworzę prostą stronę, gdzie chcę umieścić galerię, która domyślnie po załadowaniu strony wyświetli określoną ilość zdjęć, powiedzmy 8. Następnie klikająć w przycisk „pokaż więcej”, chciałbym dołączyć do tej galerii resztę zdjęć, zgodnie z zapisem w pliku JSON.


Nie potrafię poradzić sobie ze zmienną, umownie nazwaną counter. Jej obecny zapis jest rozpaczliwą próbą odnalezienia rozwiązania :) Założenie jest takie, że dla każdego, kolejno dodawanego z pliku JSON zdjęcia, zmienia się ścieżka dostępu, czyli kolejno dodaje zdjęcia – assets/img/1.jpg, 2.jpg, 3.jpg itd.

Kod: Zaznacz cały
$(function(){

   var $button = $('.portfolio__link--show');
   var $grid = $('.grid');
   var counter = images.images[i];

   function addImages(image) {
      $('<a href/>').attr('style', 'background-image: url' + '(assets/img/'+counter.image).appendTo($grid);
      $(this).addClass('thumb-link thumb-link-new');

   }


   $button.on('click', function(event) {
      event.preventDefault();

      $.ajax({
         url: 'assets/json/photos.json',
         success: function(images){
            $.each(images, function(i, image){
               addImages(image);
            });
         },

         error: function() {
            alert('Something went wrong...');
         }
      });
   });
});


Prosty plik JSON
Kod: Zaznacz cały
{"images":[
  {
    "image": "1.jpg"
  },
  {
    "image": "2.jpg"
  },
  {
    "image": "3.jpg"
  },
  {
    "image": "4.jpg"
  }
]
}


Nie trudno zauważyć, że jestem osobą początkującą, szczególnie jeśli chodzi o JS – będe niezmiernie wdzięczny za wszelką pomoc i wytknięicie każdego, możliwego błędu logicznego.

Pozdrawiam
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 685
  • Rejestracja: 24 kwie 2012, o 00:37

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post10 paź 2016, o 14:24

Obrazek
Offline

tjezierski

  • Posty: 4
  • Rejestracja: 10 paź 2016, o 13:20

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post11 paź 2016, o 17:16

Dziękuje Piotrze za pomoc, natomiast po zastosowaniu kodu od Ciebie, po kliknięciu w obiekt odpowiedzialny za wykonanie funkcji, otrzymuję następujący błąd w konsoli:

Uncaught TypeError: imagesArr.slice is not a function (linia 18 w kodzie)
pomimo szczerych chęci tego również nie potrafię pokonać :)
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 685
  • Rejestracja: 24 kwie 2012, o 00:37

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post12 paź 2016, o 14:36

Mój błąd, w 28 linijce kodu, który podałem zamień:
Kod: Zaznacz cały
imagesArr = images;
na
Kod: Zaznacz cały
imagesArr = JSON.parse(images);
bo przecież przesłany JSON to zwykły tekst, a więc aby był tablicą, musimy go sparsować :)
Obrazek
Offline

tjezierski

  • Posty: 4
  • Rejestracja: 10 paź 2016, o 13:20

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post13 paź 2016, o 01:48

Hmm, niestety nadal nie działa, po kliknięciu pojawia się w konsoli błąd:

Uncaught SyntaxError: Unexpected token o in JSON at position 1

Czytałem i próbowałem kilku rzekomych rozwiązań i żadne nie pomogło w tej kwestii (nawet myślałem, że to jakiś ukryty znak w pliku json – nic z tego)
Offline
Awatar użytkownika

Piotr Palarz

Ekspert

Ekspert

  • Posty: 685
  • Rejestracja: 24 kwie 2012, o 00:37

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post13 paź 2016, o 12:31

A wyświetl poprzez console.log(images) i zobacz co faktycznie jest zwracane z serwera. Jest to tekst pliku JSONowego?
Obrazek
Offline

tjezierski

  • Posty: 4
  • Rejestracja: 10 paź 2016, o 13:20

Re: Ajax i JSON – problem z dodawaniem zdjęć

Post13 paź 2016, o 12:44

Otrzymuję:
Uncaught ReferenceError: images is not defined

Wróć do Projektowanie w XHTML i CSS

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość

cron