Ayuda para realizar galería de imágenes para web de pintor

jondalar69 · 3 Oct 2012, 14:34 · Solicitar retirada

Hola de nuevo amigos, he seguido el curso de html y css, en breve me pondré con php y mysql y jquery, la nueva consulta que tengo es relativa a la web que quiero montar para un amigo pintor, me gustaría añadir una galería de imágenes que muestre sus cuadros y si es posible tambíen la posibilidad de hacer comentarios (al estilo facebook) debajo de cada foto; quisiera saber como hacerla, si tngo que utilizar flash, php, jquery, soy tan novato que se acumulan las ganas de conocimiento jejejeje. Bueno amigos no quisiera causar muchas molestias pero me asaltan tantan dudas al empezar la web que me bloqueo, por lo menos ya hice el logo y la cabecera para la web, ya queda menos!!!

Saludos

ocbarrio · 3 Oct 2012, 15:27 · Solicitar retirada

hola!

Hacer una galeria depende de que tipo quieras, puedes usar jquery, javascript, etc.

Lo que puedes hacer es buscar en google, hay muchos ejemplos que puedes copiar y pegar en tu web, y a partir de ahi ya puedes modificarla, para adecuarla a tu web.

La verdad que no se como hacer que se puedan insertar comentarios, imagino que con base de datos.

Lo miro luego y te digo algo.

codomodragon · 3 Oct 2012, 15:56 · Solicitar retirada

amm para complementar lo que te dice el compañero ocbarrio, necesitas saber que clase de galerías deseas hacer, ósea si quieres que sea en html, que se actualice con un panel que solo tú puedas usar o que sea público, que tenga un sistemas de comentarios, etc

Dependiendo de esto te pueden servir distintos caminos que puedes tomar, si tienes dudas de dicho camino coméntanos que es lo que quieres más específicamente y te aconsejaremos los mejores programas o códigos

jondalar69 · 3 Oct 2012, 17:32 · Solicitar retirada

Hola, gracias por vuestras respuestas, a ver si puedo explicar lo que quiero hacer, la idea es hacer 4 apartados en la galería (retratos, retratos famosos, escenas, naturaleza) con la posibilidad de ir actualizando conforme vaya realizando cuadros; la forma que he pensado es poner las miniaturas en cada categoría y al hacer clic que se muestre la foto en su tamaño original,tambien me gustaría que debajo de cada foto se pudieran hacer comentarios (si esto es demasiado complicado lo puedo dejar para más adelante que tenga más conocimientos), en cuanto al camino a escoger, la verdad es que estoy bastante perdido pues estoy empezando con esto del diseño y no se todas las posibilidades que hay, se que se puede utilizar jquery, flash, javascript e incluso php,por eso me gustaría que me aconsejaran el mejor método según vuestra opinión y necesitaría un pequeño empujoncito para empezar y a partir de ahí hacerlo por mi cuenta, espero no molestar mucho pero ando un poco perdido. Se me olvidaba comentar que he empezado a crear una plantilla con dreamweaver.

Saludos y muchísimas gracias

ocbarrio · 3 Oct 2012, 18:04 · Solicitar retirada

Buenas!

Entra en mi pagina fotografiaolivier.com, seccion galeria.

Esto entre <head> y </head>

<script type="text/javascript" src="pag-galeria/js/prototype.js"></script>
<script type="text/javascript" src="pag-galeria/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="pag-galeria/js/lightbox.js"></script>
<link rel="stylesheet" href="pag-galeria/css/lightbox.css" type="text/css" media="screen" />

Ten en cuenta que los links deben tener la misma ruta que este escita aqui. O cambias la ruta de los links, o cambias los archivos de sitio

Esto en el html

<div id="galeria">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">Embarazo y Bebés</li>
<li class="TabbedPanelsTab">Boda</li>
<li class="TabbedPanelsTab">Nuevos modelos</li>
<li class="TabbedPanelsTab">Reportaje</li>

</ul>
<div class="TabbedPanelsContentGroup">

<div class="TabbedPanelsContent">
<p class="textoblanco">Laura</p>
<p> </p>

<a href="/pag-galeria/images/Embarazadas/mg-3833.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Embarazadas/mg-3833-thumb.jpg" alt="otros" /></a>
<a href="/pag-galeria/images/Embarazadas/mg-4210.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Embarazadas/mg-4210-thumb.jpg" alt="otros" /></a>
<a href="/pag-galeria/images/Embarazadas/15x20.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Embarazadas/15x20-thumb.jpg" alt="otros" /></a>
<a href="/pag-galeria/images/Embarazadas/mg-4222.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Embarazadas/mg-4222-thumb.jpg" alt="otros" /></a>
<a href="/pag-galeria/images/Embarazadas/mg-4208.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Embarazadas/mg-4208-thumb.jpg" alt="otros" /></a>

<p class="textoblanco">Lola y Cloe</p>
<p> </p>

<a href="pag-galeria/images/Cloe y lola/01.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-01.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/02.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-02.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/03.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-03.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/04.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-04.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/05.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-05.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/06.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-06.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/07.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-07.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/08.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-08.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/09.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-09.jpg" alt="otros" /></a>
<a href="pag-galeria/images/Cloe y lola/10.jpg" rel="lightbox[Embarazo y Bebés]" title="my caption"><img src="pag-galeria/images/Cloe y lola/thumb-10.jpg" alt="otros" /></a>
</div>

<div class="TabbedPanelsContent">

<p class="textoblanco">Alba y Jose</p>
<p> </p>

<a href="pag-galeria/images/boda/image-01.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-01.jpg" alt="cosica" /></a>
<a href="pag-galeria/images/boda/image-02.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-02.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-04.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-04.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-05.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-05.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-06.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-06.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-08.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-08.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-09.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-09.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-10.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-10.jpg" alt="otros" /></a>
<a href="pag-galeria/images/boda/image-11.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/boda/thumb-11.jpg" alt="otros" /></a>
</div>

<div class="TabbedPanelsContent">
<p class="textoblanco">Vitoria</p>
<p> </p>
<a href="pag-galeria/images/nuevosmodelos/image-12.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/nuevosmodelos/thumb-12.jpg" alt="otros" /></a>
<a href="pag-galeria/images/nuevosmodelos/image-13.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/nuevosmodelos/thumb-13.jpg" alt="otros" /></a>
<a href="pag-galeria/images/nuevosmodelos/image-14.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/nuevosmodelos/thumb-14.jpg" alt="otros" /></a>
<a href="pag-galeria/images/nuevosmodelos/image-15.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/nuevosmodelos/thumb-15.jpg" alt="otros" /></a>
<a href="pag-galeria/images/nuevosmodelos/image-16.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/nuevosmodelos/thumb-16.jpg" alt="otros" /></a>
</div>

<div class="TabbedPanelsContent">
<p class="textoblanco">Teatro "Con ganas de reir"</p>
<p> </p>

<a href="pag-galeria/images/reportaje/image-01.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-01.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-02.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-02.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-03.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-03.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-04.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-04.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-05.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-05.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-06.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-06.jpg" alt="otros" /></a>
<a href="pag-galeria/images/reportaje/image-07.jpg" rel="lightbox" title="my caption"><img src="pag-galeria/images/reportaje/thumb-07.jpg" alt="otros" /></a>
</div>

<div class="TabbedPanelsContent">

</div>

</div>
</div>
</div>

Lo que esta en rojo tienes que cambiarlo por tus imagnees. Ten en cuenta que no me apetece estar seleccionando texto para pasarlo a color rojo. Has de cambiar cada una de las imagenes. y cada uno de los titulos para adecuarlo a tus necesidades.

Esto en el css "lightbox"

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Arial, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

y esto en tu css

#galeria {
position: relative;
width: 940px;
padding: 0px 0px 19px 0px;
z-index: 16;
left: 10px;
top: -30px;
background-color: #CCC;
}
.textoblanco {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: underline;
line-height: normal;
text-align: left;
text-indent: 30px;
vertical-align: 50%;
font-weight: bold;
}

ocbarrio · 3 Oct 2012, 18:05 · Solicitar retirada

Ten en cuenta eso, que he marcado en rojo solo algunos links de imagenes para que veas por donde va.

Si te falta algun archivo hazmelo saber y te los envio

jondalar69 · 3 Oct 2012, 18:59 · Solicitar retirada

Muchísimas gracias ocbarrio está guapísima tu web,me ha encantado, la verdad es que esa es la idea que más o menos tenía y me ha gustado mucho, tanto como para trabajar en ella, se me olvidó comentar que quería poner una breve descripción de los cuadros como las medidas y el medio (oleo sobre lienzo), viendo el código que me has puesto me imagino que se podría poner en el lugar donde pone "my caption" en la etiqueta title de las fotos. El único problema que le veo es a la hora de hacer esos scripts,y era por si me lo podrías enviar, por lo demás me ha gustado mucho la idea que me has propuesto, así que de momento iré mirando el código atentamente para ver lo que tengo que sustituir y modificar, un saludo enorme y de nuevo muchísimas gracias.

Pedro

ocbarrio · 3 Oct 2012, 21:54 · Solicitar retirada

Buenas!

Dame tu mail por privado si quieres, y te envio los archivos que te faltan!

Muchas gracias! Fue lo primero que hice, tarde 2 meses y pico! Pero claro, el resultado esta muy bien. (por lo menos para mi) :-)

ocbarrio · 4 Oct 2012, 01:47 · Solicitar retirada

para todos aquellos a los que el logo no sea vuestro fuerte, estoy colgando un videotutorial muy practico de retoque fotografico. Con las herramientas que enseño podeis crear logos de todo tipo, retocar vuestras imagenes para que tengan un toque profesional, etc.

www.comocreartuweb.com/consultas/showthread.php/56162-VideoTutorial-Retoque-fotogr%E1fico!?p=289369#post289369