Curs Javascript

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
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
MPGal - Galerie de Imagini Simpla

Last accessed pages

  1. Adverbele in limba engleza - Adverbs (33570)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (277865)
  3. Lectia 365 (421)
  4. Coduri pt culori (73854)
  5. Formatare text in pagina html (38555)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1363)
  2. Curs HTML gratuit Tutoriale HTML5 (1359)
  3. Coduri pt culori (973)
  4. Creare si editare pagini HTML (536)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (383)