Fancybox / Fit on page dla MyBB 1.8

Założony przez Łukasz Tkacz.

Hej,
w ostatnim czasie szukałem czegoś a'la Fit on Page dla MyBB 1.8, ale niestety poszukiwania nie przyniosły oczekiwanego rezultatu. Nie chciałem grzebać w kodzie pluginu, a automatyczne dopasowywanie obrazków dostępne w najnowszej wersji forum nie spełniało moich oczekiwań - chciałem, aby obrazki po kliknięciu na nie się powiększały, a domyślnie były raczej miniaturkami.

Postanowiłem więc zaaplikować Fancyboxa. Nie jest to trudne, ba poradnik ten jest bardzo, bardzo prosty. Z góry uprzedzam: nie wszędzie musi działać, testowałem na stylu bazującym na domyślnym z MyBB 1.8. Dobra, do dzieła.


1 Dodanie stylów .css


Dodajemy poniższy kod do styli CSS używanych na forum:


.scaleimages img {
max-width: 400px;
max-height: 400px;
}

Dzięki temu zbyt duże obrazki w postach będą zmniejszane. Te 400 px to tylko przykład, mi odpowiada właśnie taka wartość.


2 Załączamy fancybox'a


Pobieramy fancybox i wrzucamy na serwer
http://fancyapps.com/fancybox/3/
Pliki powinny znajdować się w katalogu /fancybox obok głównych plików naszego forum.

3 Edycja szablonów


 Edytujemy szablon headerinclude i za {$stylesheets} dodajemy kod:

<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('.post_body img').each(function() {
var currentImage = $(this);
if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
currentImage.wrap("<a target='_blank' data-fancybox data-type='image' href='" + currentImage.attr("src") + "'</a>");
}
   });
});
</script>


Kod załącza Fancyboxa, a także dorzuca linki do obrazków, którego go nie mają (konieczne, aby działało prawidłowo). Jeżeli ktoś wrzucał obrazek z linkiem, nie będzie on modyfikowany. Każdy może samodzielnie dodać fragment, który doda klasę fancybox także do takich obrazków.

 Edytujemy szablon postbit_attachments_thumbnails_thumbnail i zamianiamy:


<a href="attachment.php?aid={$attachment['aid']}"


na:


<a href="attachment.php?aid={$attachment['aid']}" data-fancybox="data-{$attachment['aid']}" data-type="image"


Dzięki temu również załączniki będą otwierane w taki sposób.

W sumie to wszystko, zapisujemy, gotowe.
Opcjonalnie możemy zawartość pliku CSS z paczki fancybox zapisać jako nowy arkusz w naszym stylu.


Demo:
https://blog.mybboard.pl/
   
Podziękowali: Snake_, Ardex, Raen, socker, Ka28eM, Frag, MaciejB, kirakora, Rafcio1983
TaniDedyk.pl
Świetny poradnik :) Działa w stu procentach :)
Ewentualnie do linków można dodać
Kod:
{$mybb->asset_url}
tak dla pewności :p
Robiłem step-by-step i nw czemu nie działa. Styl - revolution.
Nie chce skalować obrazków.
W pierwszym punkcie chodzi o dodanie kodu do tych wszystkich arkuszy?

[Obrazek: style.jpg]
Wystarczy global.css.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: [email protected].
Podziękowali: fabek
Nie działa. Niby można kliknąć i powiększyć obrazek ale nie zmniejsza w wiadomości.

http://nasze-niemcy.pl/Watek-test_1821?pid=8013#pid8013

Punkt drugi: w głównym katalogu forum tworzymy katalog o nazwie "fancybox" i wrzucamy tam wszystkie pliki z paczki, tak?
Źle to wkleiłeś w style:

Kod:
.center .jGrowl-notification,
.center .jGrowl-closer {
    margin-left: auto;
    margin-right: auto; .scaleimages img {
    max-width: 400px;
    max-height: 400px;
}
(30.10.2015, 18:42)Łukasz Tkacz napisał(a): Źle to wkleiłeś w style:

Kod:
.center .jGrowl-notification,
.center .jGrowl-closer {
    margin-left: auto;
    margin-right: auto; .scaleimages img {
    max-width: 400px;
    max-height: 400px;
}

Bez zmian....
Bo nadal masz źle :)
Wkleiłem to co podałeś. Jeszcze jakieś pomysły?
Poszukaj w global.css w trybie zaawansowanym tego
Kod:
.center .jGrowl-notification,
.center .jGrowl-closer {
    .center .jGrowl-notification,
    .center .jGrowl-closer {
    margin-left: auto;
    margin-right: auto; .scaleimages img {
    max-width: 400px;
    max-height: 400px;
}


}


}


}
i zamień na
Kod:
    .center .jGrowl-notification,
    .center .jGrowl-closer {
    margin-left: auto;
    margin-right: auto;
}

.scaleimages img {
    max-width: 400px;
    max-height: 400px;
}
Podziękowali: fabek
Ok... Wysokość ta sama, szerokość różna. Chciałbym na odwrót.
Czy jest możliwość takiego "fancybox" do obrazków z funkcji "dodaj załącznik"? Co do samego pomysłu to bardzo ciekawa opcja, podoba mi się! Zrobiłem wszystko według poradnika, lecz nie działa tak jak na demku. Moje próby: z zewnętrznym linkiem czy z "dodaj załącznik". Styl: Domyślny
Poradnik zaktualizowany - do kodu dodano wykluczenie dla uśmieszków, zmiany są także pod Fancybox 3.0.
nie działa slideshow
działa tlyko jak w jeden post wrzucisz kilka takich samych obrazków, wtedy slideshow sie pojawia, ale jak wrzucisz dwa rózne obrazki w jeden post to slideshow nie działa


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

1 gości