GALERIA FANCIBOX A PHP
Publicado por Robbmejia (26 intervenciones) el 18/09/2013 04:34:14
Hola me podrían ayudar quiero pasar esta galería fancibox que esta hecho en html5
Y SE VE ASI:
------------------------------------------------------EN PHP TENGO ESTO--------------------------------------------------
Y SE VE ASI:
Podrian ayudarme la idea es que pueda ver la galería desde mismo LocalHost, para luego agregarle un formulario y modificar la imagen con los valores que se le den. GRACIAS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html>
<head>
<!-------------------------------------------Galería fancibox--------------------------------------------><script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.imagen").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
});
</script>
<!-------------------------------------------Galería fancibox--------------------------------------------><style>
h1{text-align:center;
font-family:Arial, Helvetica, sans-serif;
}.caja {
width:320px; height:320px; position: relative; margin:0px auto; top: 40px; }.caja img{
width:150px; height:150px;display:inline-block;
} #galeria {
width: 500px; height:350px; position:relative; top:50px; margin: 40px auto 0 auto; padding: 0 60px 30px 60px;border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}</style>
</head>
<body>
<header>
<h1>GALERIA ROBERTO :)</h1>
</header>
<section>
<div id="galeria">
<div class="caja">
<a class="imagen" href="img/1_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="img/1_s.jpg" <img src="img/1_s.jpg"></a>
<a class="imagen" href="img/2_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="img/2_s.jpg" <img src="img/2_s.jpg"></a>
<a class="imagen" href="img/3_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="img/3_s.jpg" <img src="img/3_s.jpg"></a>
<a class="imagen" href="img/4_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="img/4_s.jpg" <img src="img/4_s.jpg"></a>
</div>
</div>
</section>
</footer>
</body>
</html>
Y SE VE ASI:
------------------------------------------------------EN PHP TENGO ESTO--------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<!-------------------------------------------Galería fancibox--------------------------------------------><script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.imagen").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
});
</script>
<!-------------------------------------------Galería fancibox--------------------------------------------><style>
h1{text-align:center;
font-family:Arial, Helvetica, sans-serif;
}.caja {
width:320px; height:320px; position: relative; margin:0px auto; top: 40px; }.caja img{
width:150px; height:150px;display:inline-block;
} #galeria {
width: 500px; height:350px; position:relative; top:50px; margin: 40px auto 0 auto; padding: 0 60px 30px 60px;border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}</style>
</head>
<body>
<?php
$directorio = opendir("./img");
while ($archivo = readdir($directorio))
{if (!is_dir($archivo))
{$galeria[] = $archivo;
} }closedir($directorio);
echo '<div id="galeria">';for ($i = 0; $i <= count($galeria)-1;$i++)
{ echo '<div class="caja">';echo '<img src="img/'. $galeria[$i] .'" width="100%" height="100%">';
echo '</div>'; } echo '</div>';?>
</body>
</html>
Y SE VE ASI:
Podrian ayudarme la idea es que pueda ver la galería desde mismo LocalHost, para luego agregarle un formulario y modificar la imagen con los valores que se le den. GRACIAS.
Valora esta pregunta
0