Limitarea numărului de imagini dintr-un mesaj

Scris de Kames Sam Dec 15, 2018 7:48 pm

Limitarea numărului de imagini dintr-un mesaj

Introducere

În acest tutorial vă voi explica cum să limitați numărul de imagini care vor fi afișate într-un mesaj. Codurile din acest tutorial funcționează pentru toate versiunile de forumuri, inclusiv ModernBB și AwesomeBB.

Instalare

JavaScript

Primul lucru pe care trebuie să îl faceți este să instalați un cod JavaScript. Fără el tutorialul nu va funcționa. Pentru a instala codul JavaScript, mergeți în Panoul de administrare » Diverse » HTML & JAVASCRIPT » Gestiunea codurilor JavaScript, urmând să apăsați pe . Totodată, verificați dacă codurile JavaScript sunt activate.

Titlu: Limitarea numărului de imagini dintr-un mesaj
Amplasare: Subiecte
Cod JavaScript: Copiați și introduceți codul de mai jos

Cod:: $(function() { var maxImages = 4, // numarul maxim de imagini displayTextReplace = true, // "false" pentru a nu arata nimic în locul imaginii mascate displayTextFinal = true, // "false" pentru a nu afisa informatii despre numarul de imagini ascunse la sfarșitul mesajului maxTextReplace = "Aceasta imagine este ascunsa.", maxTextFinal = "Administratorul acestui forum a ales să afiseze numai {MAX} imagini pentru acest mesaj.<br />{DIFF} imagini au fost ascunse in acest mesaj.", m = maxImages - 1; $('td .postbody:not(.clearfix), #ipbwrapper .post-entry, .pun .post-entry, #phpbb div.post div.postbody div.content').each(function() { if( $('img:not([longdesc])', this).length > maxImages ) { var totalImages = $('img:not([longdesc])', this).length, diffImages = totalImages - maxImages, maxTextFinalValues = maxTextFinal.replace("{MAX}", maxImages).replace("{DIFF}", diffImages); if(displayTextReplace == true) $('img:not([longdesc]):gt('+ m +')', this).hide().wrap("<div class='hideImage'>"+ maxTextReplace +"</div>"); else $('img:not([longdesc]):gt('+ m +')', this).hide(); if(displayTextFinal == true) $(this).append( "<div class='hideImagesMessage'>"+ maxTextFinalValues +"</div>" ) } }); });

CSS

Următorul pas este să adăugați codul CSS. Acesta se instalează în Panoul de administrare » Afișare » Imagini și culori » Culori » Foaie de stil CSS

Cod:: .hideImage, .hideImagesMessage { color: red; background-color: #FFF; width: 200px; text-align: center; padding: 5px 10px; border-radius: 3px; } .hideImagesMessage { width: 70%; margin: auto; }

Puteți modifica codul după bunul plac.

Modificări

Modificările pot fi făcute în acest loc:

Cod:: var maxImages = 4, // numarul maxim de imagini displayTextReplace = true, // "false" pentru a nu arata nimic în locul imaginii mascate displayTextFinal = true, // "false" pentru a nu afisa informatii despre numarul de imagini ascunse la sfarșitul mesajului maxTextReplace = "Aceasta imagine este ascunsa.", maxTextFinal = "Administratorul acestui forum a ales să afiseze numai {MAX} imagini pentru acest mesaj.<br />{DIFF} imagini au fost ascunse in acest mesaj.",

Și acum vă voi explica fiecare variabilă.
maxImages - definește numărul maxim de imagini. Valorea implicită este 4, puteți modifica cu orice altă valoare.
displayTextReplace - vă permite să alegeți dacă imaginile ascunse sunt înlocuite cu text (valoarea implicită este "true", adică ele sunt înlocuite cu text; iar false: ele sunt pur și simplu ascunse, fără text).
displayTextFinal - la fel ca și în cazul de mai sus, această variabilă vă permite să alegeți dacă doriți să se afișeze sau nu un text.
maxTextReplace - vă permite să afișați textul de ascundere a unei imagini.
maxTextFinal - vă permite să afișați textul de informare despre ascunderea imaginilor; ce număr maxim de imagini sunt acceptate și câte imagini au fost ascunse în respectivul mesaj.

Previzualizare

Dacă ați urmat cu atenție toți pașii, acesta ar trebui să fie rezultatul:

Limitarea numărului de imagini dintr-un mesaj Imagin10

Asta a fost tot. Felicitări!