Hola!
Bueno, aquí un script para mostrar el "antes y después" de una imagen, si no sabes de lo que hablo lo verás en esta página, que es de dónde saqué el script: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
Primero invocaremos a las librerías de jQuery necesarias, pon antes de </head> esto:
Vale, ahora donde queramos "comparar" las dos imágenes tienes que poner:
Es importante que tenga especificado el ancho y alto (width y height) de cada imagen para que pueda funcionar en todos los navegadores.
Si deseas agregar más imágenes sólo cambia el ID del contenedor, en este caso el contenedor se llama antesydespues1 así que si agregas otro cambialo por antesydespues2 y así sucesivamente, aunque puedes elegir cualquier nombre siempre y cuando todos sean distintos.
Y en el primer código que pegamos agrega otra línea como esta que está en color rojo:
Puedes agregar tantas imágenes comparativas como quieras siempre y cuando todos los contenedores tengan un ID distinto y se agreguen las correspondientes líneas en el script.
Debajo de cada contenedor de fotos aparecen los links "Mostrar sólo el Antes" y "Mostrar sólo el Después", al darle click a ellos se muestra las imagenes completas, si deseas ocultar esos enlaces sólo cambia en el primer código donde dice true por false y no se mostrarán.
Bueno, aquí un script para mostrar el "antes y después" de una imagen, si no sabes de lo que hablo lo verás en esta página, que es de dónde saqué el script: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
Primero invocaremos a las librerías de jQuery necesarias, pon antes de </head> esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='http://www.mediafire.com/?dx75z9ouaqd8ss9' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
[COLOR="blue"]$('#[B]antesydespues1[/B]').beforeAfter({showFullLinks : [B]true[/B]});[/COLOR]
});
</script>Vale, ahora donde queramos "comparar" las dos imágenes tienes que poner:
<div id='antesydespues1'>
<div><img alt='before' src='[COLOR="red"]URL de la imagen UNO[/COLOR]' [COLOR="lime"]width='500' height='291'[/COLOR]/></div>
<div><img alt='after' src='[COLOR="red"]URL de la imagen DOS[/COLOR]' [COLOR="lime"]width='500' height='291'[/COLOR]/></div>
</div>Es importante que tenga especificado el ancho y alto (width y height) de cada imagen para que pueda funcionar en todos los navegadores.
Si deseas agregar más imágenes sólo cambia el ID del contenedor, en este caso el contenedor se llama antesydespues1 así que si agregas otro cambialo por antesydespues2 y así sucesivamente, aunque puedes elegir cualquier nombre siempre y cuando todos sean distintos.
Y en el primer código que pegamos agrega otra línea como esta que está en color rojo:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='http://www.mediafire.com/?dx75z9ouaqd8ss9' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
[COLOR="blue"]$('#[B]antesydespues1[/B]').beforeAfter({showFullLinks : [B]true[/B]});[/COLOR]
[COLOR="red"]$('#[B]antesydespues2[/B]').beforeAfter({showFullLinks : [B]true[/B]});[/color]
});
</script>Puedes agregar tantas imágenes comparativas como quieras siempre y cuando todos los contenedores tengan un ID distinto y se agreguen las correspondientes líneas en el script.
Debajo de cada contenedor de fotos aparecen los links "Mostrar sólo el Antes" y "Mostrar sólo el Después", al darle click a ellos se muestra las imagenes completas, si deseas ocultar esos enlaces sólo cambia en el primer código donde dice true por false y no se mostrarán.