PDA

Ver la Versión Completa : Pagina web fotografía antes-despues.


Alforjero
11/11/14, 15:10:03
Hola:

Hace mucho que no escribo por aquí, la vida me ha llevado a otros lados, pero si que os sigo leyendo cuando puedo.

Al grano, he visto que no existe un apartado en el foro para crear paginas web de fotografía supongo que es mas de otro tipo de foros pero seguro que esta idea os va a gustar y como hay mucho manitas por aquí lo veo interesante y lo planteo.

Encontré esta PAGINA (http://www.theverge.com/2014/8/20/6046609/its-hard-out-there-for-an-interplanetary-robot) y me gusto mucho la posibilidad de poner dos fotos, una antigua y otra reciente, superpuestas y poder desplazar una sobre otra para ver como cambian las cosas con el tiempo, puede ser muy interesante de cara a retoques, procesados, paso del tiempo etc...

Como soy un zote en temas de informática, me gustaría saber si alguien sabe como hacerlo y como poder ponerlo en una pagina web propia ( que por ahora no tengo ) o incluso algo mejor, si alguien se atreve o puede hacer una plantilla de pagina web en la que poder aplicar este formato de cara a poder mostrar cambios en paisajes, personas, retoques, procesados mostrando el antes y el después.

Un saludo y muchas gracias por atenderme.
xevigut
15/11/14, 21:08:20
Mi pagina web (http://www.xevivilaregut.com) la tengo echa, y la gestiono al completo con un plugin (http://shop.theturninggate.net) para Lightroom, en concreto la version "page", dentro de galleries, tengo diferentes tipos de galerias, y hay la posibilidad de crear lo que pides con la opcion "stage".
Esta es una opción, si buscas e la red, estoy seguro que encontraras otras opciones que lo permiten, yo utilizo esta porque esta echa con el programa que utilizo siempre.
Ralefo
01/12/14, 14:01:51
Hombre, el efecto "cortina" estará hecho con javascript, y como tenía tiempo, me he puesto a trastear...

En bruto, el código sería más o menos como sigue. Claro está, después se podrá mejorar o no, dependiendo de lo que se quiera:



<!DOCTYPE html>
<html>
<head>
<title>Mover imagen</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('img_mueve').onmousemove = function(e) {
var x = (e.clientX-8); // Sinceramente no se por que hay que darle -8px para que se ajuste al extremo izquierdo...
var y = 0;
this.style.backgroundPosition = x + 'px ' + y + 'px';
};
};
</script>
<style type="text/css">
#contenedor{
width: ancho_de_la_imagen_en_px;
height: alto_de_la_imagen_en_px;
margin: 0;
padding: 0;
}
#img_ocultada {
background: url(imagen1.jpg);
width: ancho_de_la_imagen_en_px;
height: alto_de_la_imagen_en_px;
margin: 0;
padding: 0;
}
#img_mueve{
background: url(imagen2.jpg) top left no-repeat;
background-position: mitad_de_la_imagen_en_px;
width: ancho_de_la_imagen_en_px;
height: alto_de_la_imagen_en_px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- El contenedor es la caja donde vamos a meter las 2 imágenes -->
<div id="contenedor">
<div id="img_ocultada">
<div id="img_mueve"></div>
</div>
</div>
</body>
</html>
Ralefo
01/12/14, 14:31:49
Perdón, donde dice "mitad_de_la_imagen_en_px", sería la mitad del ANCHO de la imagen. Esto sería para que, de entrada, te saliera la mitad de cada imagen. O sea, mitad de la "antigua" y mitad de la "nueva".

Si quieres que de entrada salga solo la nueva (imagen2.jpg), dale valor 0.

Si quieres que de entrada salga solo la antigua (imagen1.jpg), dale el valor del ancho total de la imagen.

Saludos.
Alforjero
11/12/14, 22:33:32
Hola:

Perdón por la tardanza ahora mismo le pego un vistazo y las posibilidades.
Canon350D
12/12/14, 01:13:24
Ralher buen detalle el ponernos el código para poder usarlo todos, muchas Gracias.

Tengo una duda, cómo o dónde pongo este código? Yo tengo en el código nada serie larga con los archivos por temas en mi galería, esto tendría que ir con cada par de márgenes? No se mucho de programación y me pierdo enseguida. Gracias.
Ralefo
12/12/14, 10:35:28
Tengo una duda, cómo o dónde pongo este código? Yo tengo en el código nada serie larga con los archivos por temas en mi galería, esto tendría que ir con cada par de márgenes? No se mucho de programación y me pierdo enseguida. Gracias.

Buenas, el código puesto sería en sí mismo una página HTML (a falta de darle formato y/o meter otros elementos claro...). Solo haría falta abrir el bloc de notas de windows, pegar ese código y guardarlo con extensión HTML.

Es un código hecho para 2 imágenes (antes y después).

El tema de extraer imágenes de ciertas carpetas y aplicar el mismo efecto a cada una... debería hacerse recurriendo a PHP enlazando a bases de datos (o archivos .txt), aplicas un bucle y listo. Pero esa es otra historia.

Saludos.
Canon350D
13/12/14, 21:24:00
Ufff aparentemente muy sencillo pero para alguien que es bastante novato en esto creo que puede ser un tema bastante complejo y complicado. Gracias por tus explicaciones y ayuda.
Ralefo
14/12/14, 14:15:37
A ver si tengo tiempo y hago algo con clases para que se pueda usar en todas las imágenes que se quiera. Pero de todas formas habría que aplicar código en la web en cuestión, y para alguien que no sepa un poco del tema, sería un poco complicado.

Saludos.
Canon350D
17/12/14, 10:58:51
Ralher Gracias por tu ofrecimiento.

Bueno, yo tengo los conocimientos justos para pasar el día jejejejeeje lo único que lo peleo, miro manuales, vídeos, foros de programación...y así es como voy aprendiendo cosillas poco a poco y con paciencia jejejejeeje (mía y de quien esta al otro lado del foro claro ;D )