Fancybox slideshow

Założony przez  szymex71.

Adres forum:
www.citiesskylines.pl


Wersja silnika:
1.8.6


Opis problemu:
Jako że na forum wrzuca się dużo zdjęć często w jednym poście od dłuższego czasu staram się jak najbardziej usprawnić wszystko co związane z dodawaniem/przeglądaniem zdjęć na forum. I tu właśnie trafiłem na fancyboxa który niby działa, ale jeżeli ma zostać w takiej formie to szczerze jest bezużyteczny. Generalnie chodzi o to, że czy to zdjęcia są wrzucone do posta przez załącznik, czy przez plugin ABP imgur, czy przez zwykłe "wstaw obrazek" z linku nie działa slideshow. A to głównie na nim mi zależy.
Tak więc, co trzeba zrobić aby działał on w każdym przypadku? (póki co nie działa w ogóle)
Z góry dzięki.
Nie używałem fancybox, ale wiem, że możesz łatwo to osiągnąć dzięki: http://lokeshdhakar.com/projects/lightbox2/
Patrzysz w dokumentacje, dodajesz kod do szablonów i gotowe.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Gdybym wiedział co, jak i gdzie dodać to bym raczej sobie poradził nawet i z tym fancybox-em ;)
Z tych dokumentacji rozumiem tylko tyle, że gdybym dodawał jakieś zdjęcia w szablonie na stronie albo w html w odpowiedzi to mam to zrobić np. tak:
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
Ale ja chce by to działało przy dodaniu każdego zdjęcia w byle jaki sposób. Żeby działo się to tak jakby automatycznie.
(24.03.2018, 21:25)szymex71 napisał(a): Gdybym wiedział co, jak i gdzie dodać to bym raczej sobie poradził nawet i z tym fancybox-em ;)
Z tych dokumentacji rozumiem tylko tyle, że gdybym dodawał jakieś zdjęcia w szablonie na stronie albo w html w odpowiedzi to mam to zrobić np. tak:
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
Ale ja chce by to działało przy dodaniu każdego zdjęcia w byle jaki sposób. Żeby działo się to tak jakby automatycznie.
To może wyszukuj wszystkie IMG w danym divie posta i dodawaj odpowiedni atrybut? Oczywiście w JS
Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
Cytat:ale z tą nazwą to fyeem ma racje  ~ Divir 29.07.2019 16:08
Co jak co ale JS to już w ogóle czarna magia dla mnie. Na prawdę nie ma żadnego gotowego rozwiązania na taki slideshow w postach?
Dołącz lightbox2 i dodaj skrypt:
$(document).ready(function() {
  $('.post_body img').each(function() {
    $(this).closest("a").attr("data-lightbox", "roadtrip");
  });
});

Testowane na tym wątku: http://citiesskylines.pl/temat-Konkurs-n...Sztokholmu

Jeśli chcesz, aby pozostałe obrazki w postach także działały jako galeria, to musisz połączyć ten skrypt razem z tym z tego wątku: https://webboard.pl/thread-61804.html - edytujesz po prostu zawartość if.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Tak jak mówiłem js kompletnie nie ogarniam. Dlaczego np. to co podałeś działa tylko na te trzy zdjęcia a na inne już nie? Jeżeli można to prosiłbym o gotowy kod.
Działa na wszystkie zdjęcia, które są w tagu a (link>zdjęcie; a>img).
Próbuj edytować, bo tam masz już w sumie wszystko gotowe. Wystarczy dostosować do lightboxa zamiast fancyboxa. Możesz niemalże samo kopiuj/wklej zrobić. Jak ci nie będzie wychodzić to pokaż jak próbujesz, a wytłumaczymy ci dokładniej.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
No próbowałem chociażby tak:
<script type="text/javascript">
$(document).ready(function() {
  $('.post_body img').each(function() {
    $(this).closest("a").attr("data-lightbox", "roadtrip");
if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
currentImage.wrap("<a target='_blank' data-lightbox data-type='roadtrip' href='" + currentImage.attr("src") + "'</a>");
  });
});
</script>
ale tylko więcej popsułem niż poprawiłem..

P.S Mimo wszystko wolałbym jednak fancyboxa, jakoś bardziej do mnie przemawia. No chyba że działać będzie tylko ten lightbox ale @Łukasz Tkacz mówił że się da, tylko pytanie jak?
data-type jest zbędne, a data-lightbox musi być ustawione na roadtrip, tak samo jak poprzednio.

Fancyboxa nie używałem, ale strzelam że jak przypiszesz identyczną wartość do data-fancybox dla każdego elementu to będzie to w galerii.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Jeżeli chodzi o lightbox to dalej nic, próbowałem tak:
if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
currentImage.wrap("<a target='_blank' "data-lightbox", "roadtrip"  href='" + currentImage.attr("src") + "'</a>");
tak, 
currentImage.wrap("<a target='_blank' data-roadtrip  href='" + currentImage.attr("src") + "'</a>");
tak,
currentImage.wrap("<a target='_blank' "data-lightbox roadtrip  href='" + currentImage.attr("src") + "'</a>");

I cały czas nic.
A co do fancyboxa, "przypiszesz identyczną wartość", czyli?
data-lightbox='roadtip' - ale nie zadziała ci to i tak, bo nie widzę żebyś dołączał nigdzie plugin.

Przypiszesz identyczną wartość, czyli zrobisz to samo w sumie co robisz dla lightboxa. Tylko nie testowałem tego dla fancyboxa.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Jak nie jak tak?
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">
<script src="lightbox2-master/dist/js/lightbox.js"></script>

Generalnie jeżeli usunę cały ten if to lightbox działa, ale tylko na te trzy zdjęcia z wątku co podałeś.
   
No nie widzę tego nigdzie u ciebie.

$(document).ready(function() {
  $('.post_body img').each(function() {
    var currentImage = $(this);
    currentImage.closest("a").attr("data-lightbox", "roadtrip");
    if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
      currentImage.wrap("<a target='_blank' data-lightbox='roadtrip'  href='" + currentImage.attr("src") + "'</a>");
    }
  });
});
Nie potrafię tłumaczyć, także masz tutaj w sumie gotowca już.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.
Okej to działa :). Czyli gdyby nie to że wcześniej usunąłem "var currentImage = $(this);" a potem o tym zapomniałem to miałbym dokładnie to samo co tu podałeś :)
Spróbuję ogarnąć jeszcze tego fancyboxa, może sam coś zdziałam.

A nie wyszukiwało ci bo "bawię się" tym na innym stylu ;)

EDIT: Po małej przeróbce działa dokładnie tak jak powinno również w fancyboxie :) Jeszcze raz dzięki za pomoc. Będę musiał w końcu ogarnąć te js-y ;)



Użytkownicy przeglądający ten wątek:

1 gości