Fancybox slideshow

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.

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.

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

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.

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.

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.

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.

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ż.

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