PHP - GALERIA FANCIBOX A PHP

   
Vista:
Imágen de perfil de Robbmejia

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


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:

mini_130918042814931796
------------------------------------------------------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:

mini_130918042942483902

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder