MPGal este un script simplu si usor de personalizat pentru a crea galerii de imagini in pagina web. Codul e facut direct cu JavaScript (mai putin de 8 KB, cu comentarii in cod), si nu necesita vreun framework JS inclus in pagina.
Nu e nevoie sa cunoasteti sau sa adaugati cod JavaScript, doar cateva tag-uri si atribute HTML. Puteti adauga mai multe galerii de imagini in aceeasi pagina.
Cand se da clic pe imagine, aceasta e afisata in fereastra modala fullscreen, cu butoane de navigare stanga /dreapta. Vedeti exemplele de mai jos.

- Clic pe acest link pt. a descarca script-ul si exemple: MPGal - Galerie de Imagini (541 KB).

Utilizare

1. Descarcati scriptul si copiati aceste fisiere pe server: mpgal.css si mpgal.js.
2. Includeti "mpgal.css" si "mpgal.js" in pagina web si adaugati imaginile intr-un Div cu class="mpgal".
- Daca vreti sa faceti ca o simpla imagine din pagina (care nu e adaugata in Div pt. galerie) sa fie afisata in modal-box la clic pe ea, doar adaugati: class="mpgal" la acea imagine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="mpgal.css">
</head>
<body>
<div class="mpgal" data-mpgal="thumb_width:80, thumb_height:50, maxwidth:600, maxheight:400">
 <img src="image1.jpg" alt="Alt text" width="640" height="480" data-caption="Text for caption. Optional." />
 <img src="picture2.png" alt="Alt text" width="500" height="400" />
 ...
</div>

<img src="image_address.png" alt="Alt text" width="100" height="70" class="mpgal" data-caption="Optional text" />

<script src="mpgal.js"></script>
</body>
</html>
- Cu atributul data-mpgal se pot defini setari (nume:valoare , separate prin virgula) pentru galeria de imagini inclusa in acel Div. Acest atribut e optional; daca nu e adaugat, scriptul va folosi setarile predefinite (default).
- Atributul data-caption in tag-ul <img> poate fi folosit ca sa adaugati o descriere text care va fi afisata in dreptul acelei imagiini.
- Este indicat sa includeti scriptul "mpgal.js" dupa Div-ul cu imaginile, la sfarsitul codului html, inainte de </body>, dar functioneaza si daca il includeti in zona <head>.

Setari pentru data-mpgal

Exemple

• 1 - cu setari adaugate in "data-mpgal" ("showimg:false" sa nu afiseze imaginea deasupra Tumbnail).
<div data-mpgal="showimg:false, thumb_width:100, thumb_height:70" class="mpgal">...</div>
- Imaginea e afisata in fullscreen modal-box la clic pe ea.
cat dolphin spring_dream1 spring_dream tree

• 2 - imaginile sunt adaugate intr-un simplu: <div class="mpgal">...</div>
- La clic pe imaginea din scena, aceasta e afisata in fullscreen modal-box.
cat dolphin spring_dream1 spring_dream tree

• 3 - cu setari adaugate in "data-mpgal" ("modal:false" sa nu afiseze imaginea in fullscreen).
<div class="mpgal" data-mpgal="modal:false, thumb_width:80, thumb_height:50, maxwidth:600, maxheight:400">...</div>
spring_dream1 spring_dream cat dolphin tree

• 4 - Imagine simpla care sa fie afisata in fullscreen modal-box, adaugand doar class="mpgal" la imagine.
- Clic pe imagine: spring_dream

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
MPGal - Galerie de Imagini Simpla

Last accessed pages

  1. Curs PHP MySQL, Tutoriale si Scripturi PHP (32451)
  2. Creare efecte de miscare (330)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (97586)
  4. Expresii regulate Regex (1036)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (53577)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (7835)
  2. Curs HTML gratuit Tutoriale HTML5 (6416)
  3. Curs si Tutoriale JavaScript (5342)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (5012)
  5. Curs CSS Online Tutoriale CSS3 (4858)