Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Fancybox / Fit on page dla MyBB 1.8

Założony przez Łukasz Tkacz.

13.05.2015, 07:30 (Ten post był ostatnio modyfikowany: 06.02.2019, 16:08 przez Łukasz.)
#1
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.

   

Informacje

  • Opublikowano: 13.05.2015, 07:30
  • Ostatnia edycja: 06.02.2019, 16:08

Spis treści

14.05.2015, 14:54
#2
Świetny poradnik :) Działa w stu procentach :)
Ewentualnie do linków można dodać
{$mybb->asset_url}
tak dla pewności :p
25.06.2015, 13:05
#3
Robiłem step-by-step i nw czemu nie działa. Styl - revolution.
Nie chce skalować obrazków.
30.10.2015, 17:53
#4
W pierwszym punkcie chodzi o dodanie kodu do tych wszystkich arkuszy?

[Obrazek: style.jpg]
Zarabianie w internecie.
30.10.2015, 17:59
#5
Wystarczy global.css.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
30.10.2015, 18:25
#6
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?
Zarabianie w internecie.
30.10.2015, 18:42
#7
Źle to wkleiłeś w style:

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

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

Bez zmian....
Zarabianie w internecie.
30.10.2015, 19:28
#9
Bo nadal masz źle :)
30.10.2015, 19:56
#10
Wkleiłem to co podałeś. Jeszcze jakieś pomysły?
Zarabianie w internecie.
30.10.2015, 20:16 (Ten post był ostatnio modyfikowany: 30.10.2015, 20:16 przez Matslom.)
#11
Poszukaj w global.css w trybie zaawansowanym tego
.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
    .center .jGrowl-notification,
    .center .jGrowl-closer {
    margin-left: auto;
    margin-right: auto;
}

.scaleimages img {
    max-width: 400px;
    max-height: 400px;
}
30.10.2015, 20:35
#12
Ok... Wysokość ta sama, szerokość różna. Chciałbym na odwrót.
Zarabianie w internecie.
04.12.2015, 01:02 (Ten post był ostatnio modyfikowany: 04.12.2015, 01:17 przez foka.)
#13
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
26.02.2017, 17:00
#14
Poradnik zaktualizowany - do kodu dodano wykluczenie dla uśmieszków, zmiany są także pod Fancybox 3.0.
12.10.2017, 19:52
#15
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