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.
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:
Kod:
<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:
Kod:
<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>
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:
Kod:
$(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:
Kod:
<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
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:
Kod:
if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
currentImage.wrap("<a target='_blank' "data-lightbox", "roadtrip" href='" + currentImage.attr("src") + "'</a>");
tak,
Kod:
currentImage.wrap("<a target='_blank' data-roadtrip href='" + currentImage.attr("src") + "'</a>");
tak,
Kod:
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?
Kod:
<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ś.
[
attachment=13507]
No nie widzę tego nigdzie u ciebie.
Kod:
$(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