Mediabox Pentru Filmulete Sau Fisiere Flash (.swf)

gaby · December 11, 2007

Va dau direct exemplul si apoi explicatia ca sa intelegeti totul mai bine.

[Click pe poza pentru a vedea efectul]

Exemplu MediaBox pentru flash-uri

Acum sa va explic cum puteti face asa ceva, daca v-a placut

Primul Pas:

Creati o pagina web in care v-eti executa trei script-uri si css-ul:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>PC Troubleshooting MediaBox</title>

<link rel="stylesheet" href="mediabox.css" type="text/css" media="screen" />

<script src="mootools.js" type="text/javascript"></script>

<script src="swfobject.js" type="text/javascript"></script>

<script src="mediabox.js" type="text/javascript"></script>

</head>[/code]




[u][b]Script-urile precum si css-ul le puteti downloada de mai jos:[/b][/u][b]mootools.js[/b]

[b]swfobject.js[/b]

[b]mediabox.js[/b]

[b]mediabox.css[/b]


[color=orange][b]Pasul doi:[/b][/color]

Salvati si urcati pozele de mai jos pe host:





[color=green][b]Pasul trei:[/b][/color]



Dupa ce ati executat scripturile de mai sus adaugati filmuletul flash in felul urmator:



[code]<body>

<center><a title="caption text" rel="mediabox[600 450]" href="http://www.youtube.com/watch?v=kRJ2YvRv3N4"><img src="poza_exemplu.png" alt="Poza" width="300" height="180" /></a></center>

</body>

Cam asta este tot, as vrea sa precizez ca acelasi lucru puteti face si la imagini putand astfel crea o galerie de imagini, aveti un exemplu mai jos: [Click pe poza pentru a vedea efectul] Exemplu MediaBox pentru Imagini Pentru imagini va trebui sa executati doar 2 script-uri si un css anume (nu uitati sa downloadati imaginile de mai sus):

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>PC Troubleshooting Images MediaBox</title>

<link rel="stylesheet" href="moviebox.css" type="text/css" media="screen" />

<script src="mootools.js" type="text/javascript"></script>

<script src="slimbox.js" type="text/javascript"></script>

</head>[/code]




[u][b]Cele 2 script-uri precum si css-ul le puteti downloada de mai jos:[/b][/u][b]mootools.js[/b]

[b]slimbox.js[/b]

[b]moviebox.css[/b]


Dupa executare script-urilor veti adauga imaginile/pozele in urmatorul fel:



[code]<body>

<center><p><a href="poza1.jpg" rel="lightbox[205]"><img src="poza1.jpg" width="100" height="100" alt="" ></a>	


	<a href="poza2.jpg" rel="lightbox[205]"><img src="poza2.jpg" width="100" height="100" alt="" /></a>

</p>

</center>

</body>

Cam asa se face si pentru imagini, daca aveti intrebari sau nelamuriri postati aici.

:pct:

+Smeagoll · December 12, 2007

Multumim pentru tutorial ...e foarte folosito...am cautat ceva asemanator cu multa vreme in urma pentru o expozitie de imagini...!!Thx si mai asteptam!!

class · June 15, 2008

am inceract si eu uite ce mai iesit http://www.clas-design.com/portofoliu.html dar cum pot sa fac ca imginea cea mare care se deschide sa para peste scris shi thumbail si sa scrie in colt close ca in exemplu

gaby · June 15, 2008

prima greseala, am facut-o eu, si anume am uitat sa pun imaginile ce trebuie sa le downloadezi (am corectat, vezi primul post), salveaza si tu imaginile.

pe pagina ta (portofoliu.html) apar urmatoarele etichete:

<html>

<head>[/code]




Schimba-le cu:

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Ca imaginea mare sa se suprapuna peste text trebuie sa modifici in css-ul tau, deoarece intra in conflict cu cel al mediaboxului. Asta este codul tau css:

<style type="text/css">

<!--

#apDiv1 {

	position:absolute;

	left:149px;

	top:395px;

	width:704px;

	height:351px;

	z-index:1;

}

.style1 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: #999999;

}

-->

</style>[/code]


Iar conflictul vine de la [b]position:absolute;[/b]

Ori incerci sa schimbi pozitionarea, ori asezi acea (acele) poze in pagina astfel incat sa nu deranjeze acel scris.

[b]Un sfat: [/b]banuiesc ca tema nu este creata de tine, sfatul meu ar fi sa o schimbi, aceasta aratand cam urat, la partea de cod.

[color=red][b]P.S:[/b][/color] vezi ca la tine pe pagina apare de doua ori, eticheta [b]<title></title>[/b] cat si [b]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">[/b]

class · June 15, 2008

gata am rezolva cu Lightbox image viewer si de unde sti?(cum ai aflat) ce coduri am eu pe site?

gaby · June 16, 2008

noi stim totul, doar suntem de la FBI.

nu, defapt, am intrat pe pagina ta, am dat click dreapta apoi view source, si am urmarit ce ai tu pe acolo.

ma bucur ca ai reusit sa rezolvi prolema

Sign In

Mediabox Pentru Filmulete Sau Fisiere Flash (.swf)

Recommended Posts

gaby

+Smeagoll

class

gaby

class

gaby

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information