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.
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.