Efectul lightbox automat pentru toate imaginile din conținut (de la fancybox) - umihelp, forum, cursuri

Astăzi vom vorbi despre cum să încorporați imagini cu efectul lightbox-ului prin câmpuri precum "wysiwyg".
Adesea, atunci când scrieți conținut (articole, știri, test de companie), trebuie să inserați o imagine sau mai multe imagini în text. Procedând astfel, oferiți vizitatorului site-ului posibilitatea de a vedea versiunea extinsă a acestei imagini, în fereastra pop-up (efect lightbox). În majoritatea cazurilor, astfel de lucruri sunt realizate printr-un câmp separat în care puteți specifica o imagine. Și dezvoltatorul șablonului de site poate afișa această imagine într-un mod special, cu efect lightbox. Dar astfel de probleme sunt bine rezolvate în procesul de creare a unui site și vom vorbi despre cum să facem acest lucru prin zona de administrare cu modificări minime în șablon.

Acest cod va fi util în special dacă:

• Trebuie să plasați o galerie foto pe pagină, în timp ce nu aveți un modul "Galerie foto"
• Vreau să evit nevoia de a forța utilizatorul să atașeze fotografii printr-un alt album foto legat de această pagină
• Vreau să fac fără să creez câmpuri suplimentare pe această pagină pentru a atașa fotografii
• Aș dori ca fotografiile dvs. de pe pagină să fie extinse în caseta de lumină

Ca rezultat, trebuie să obținem un mecanism care să permită crearea unor astfel de imagini (faceți clic pe el)

Cum se creează această imagine:

1. Când editați orice câmp html, adăugăm o imagine în zona de conținut prin intermediul butonului "Inserare / editare imagine"
   
2. vom adăuga fotografia însăși (dacă aveți întrebări, consultați aici Inserarea imaginilor și apoi File manager)
3. fără a închide fereastra "Inserați / editați imaginea", vom accesa fila "Adițional", iar în câmpul "Codul limbii" vom specifica textul "casete luminoase".
   Acest text ne spune scriptului nostru (vezi mai jos) că această imagine ar trebui să se deschidă cu un efect lightbox.
4. fără a închide fereastra "Introducere / editare imagine", accesați fila "Aspect" și indicați dimensiunile reduse ale imaginii noastre. Este suficient să specificați o valoare, a doua este calculată automat.
   De asemenea, puteți redimensiona fotografia după ce ați introdus-o în câmpul html.
   
5. salvați modificările pe pagină

Toate ... nimic altceva de făcut nu este necesar, totul altceva va face un scenariu.

Ramane doar sa adaugam acelasi scenariu care va face totul pentru noi
Instalarea scriptului:

1. Adăugați scriptul de care avem nevoie în șablon.
   Merită menționat faptul că este mai bine să adăugați scriptul în șablon (dacă este necesar, contactați dezvoltatorul.). De asemenea, merită menționat faptul că scriptul va folosi funcția fancybox. Acesta este utilizat în mod implicit în UMI.CMS, dar în cazul în care, din anumite motive, nu, ar trebui să contactați dezvoltatorul site-ului, cu o cerere de a pune-l, sau de a folosi un mecanism diferit lightbox;, dacă este utilizat în șablonul. Voi indica exact unde sa faca modificari in codul nostru js atasat mai jos, pentru a folosi o alta biblioteca lightbox js.

Trimiteți-le prietenilor: