miércoles, 15 de agosto de 2012

INSERTAR VISOR DE IMAGENES EN TU WEB

ACÁ TE VOY A DEJAR UN TRUCO PARA INSERTAR UN VISOR DE IMAGENES MUY LINDO PARA TU PAGINA WEB.
El script que les voy a dejar es el lightbox2, el cual se debe colocar en el htm los codigos como te lo muestro a continuación
Primero que nada baja el fichero del lightbox2, en el están las carpetas con las imágenes del ejemplo,la carpeta con los scripts el nombre es: js. Bajalo desde la pagina oficial 


Ahora tenemos que hacer lo siguiente: 

agregamos en el head, los tramos que se encuentran en azul en el siguiente trozo de código html.
tene en cuenta que donde dice : /visor/ es una carpeta de mi pc, en tu caso será el nombre de la carpeta en la cual tengas bajado el paquete lightbox2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>EJEMPLO</title>
<!--a partir de aca-->
<script src="../visor/js/jquery-1.7.2.min.js"></script>
<script src="../visor/js/lightbox.js"></script>
<link href="../visor/css/lightbox.css" rel="stylesheet" />
<!--hasta aca vinculo de librerias->
</head>


Ahora solo nos queda agregar las llamadas a las librerías, con sus respeticvas imágenes, para eso, pegamos en el body:
Aca pueden ver que hay dos formas de hacerlo, o mejor dicho dos formatos distintos que le dan otra estética en la pagina, sea cual sea el formato que elijamos ambos van en el body

FORMATO 1

aca podemos ver:
<a href="ubicación de donde esta la imagen" rel="lightbox[roadtrip]"title="titulo a mostrar cuando amplie la imagen ">nombre del link sobre el que pinchamos para ver la foto grande</a>
<a href="images/examples/image-1.jpg" rel="lightbox[roadtrip]"title="mi foto">image #1</a>
EL titulo o title no es obligatorio como pueden ver en el código que esta a continuación, que la primera imagen tiene titulo y las dos siguientes no.

ACÁ EL CÓDIGO A PEGAR PARA EL FORMATO 1

<body>
<!--a partir de aca-->
<a href="images/examples/image-1.jpg" rel="lightbox[roadtrip]"title="mi foto">image #1</a>
<a href="images/examples/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/examples/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

</body>
</html>

FORMATO 2

Con este otro formato lo que hacemos es en vez de tener un link escrito como en el caso anterior que nos manda a la imagen grande, tenemos una imagen sobra la cual pinchamos y nos muestra la imagen mas grande.
ACÁ EL CÓDIGO A PEGAR PARA EL FORMATO 2
<body>
<!--para mostras solo una con un icono!-->
<a href="images/examples/image-1.jpg" rel="lightbox" title="Título de la imagen 1">
<img src="../visor/images/favicon.gif" / ></a>
<!--fin -->
</body>
</html>

Acá les dejo todo el código para que lo peguen en un html y vean como les queda.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>EJEMPLO</title>
<!--a partir de aca-->
<script src="../visorjs/jquery-1.7.2.min.js"></script>
<script src="../visor/js/lightbox.js"></script>
<link href="../visor/css/lightbox.css" rel="stylesheet" />
<!--hasta aca vinculo de librerias->
</head>
<body>
<!--a partir de aca-->
<a href="images/examples/image-1.jpg" rel="lightbox[roadtrip]"title="mi foto">image #1</a>
<a href="images/examples/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/examples/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
<!--para mostras solo una con un icono!-->
<a href="images/examples/image-1.jpg" rel="lightbox" title="Título de la imagen 1">
<img src="../visor/images/favicon.gif" / ></a>
<!--fin -->
</body>
</html>


Acá una captura de pantalla para que veas como te quedan los dos estilos.

Así es como se ve cuando haces clic en algún link.

4 comentarios:

  1. va como piña!!!!!!!!!!

    ResponderEliminar
  2. siempre quise uno, pero quiero una galeria de fotos, pero de todas maneras funciona muy bien, gracias

    ResponderEliminar
  3. Necesito Poner salto de linea en el TITLE.
    Alguien puede ayudarme?

    ResponderEliminar