Libreria de cajas de sombras de Torstein Honsi

 

URL con documentación y ejemplos: http://highslide.com/

 

Dadas las posibilidades y potencia de la librería recomendamos la visita a la web y estudiar los ejemplos que se aportan. Recuerde que esta librería no es gratuita en sitios comerciales, léase las condiciones de uso.

 

Es importante conocer que funcionalidades va a utilizar en la web ya que dispone de un generador de js que le permitirá reducir sensiblemente el tamaño del archivo final a cargar, así como la hoja de estilos necesaria para su uso.

 

Documentación recopilada de la web

 

Installation

Note: some basic HTML knowledge is required to install Highslide.

 Download and extract the zip-archive from the download page.

 Run the file index.html, navigate to your favourite setup and view the source.

 Change the file to suit your needs, or copy and paste parts of it into your HTML file. If you mess it up, go back to the original file and change it bit by bit. Study the documentation and the API reference for advanced features.

 If you move the Highslide JS files, remember to change the graphicsDir setting in the Javascript.

For any problems in your installation, first read the FAQ, then ask in the support forum.

 

Example

In this example the zip archive is unzipped to the root of your website. In addition, the CSS code from your favourite example is copied and pasted into a file called highslide.css and placed in the /highslide directory.

 
1) For this example, your directory structure should look like this:
 
2) Put this code in the head tag of your HTML page.

<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
 
3) This is how you mark up the thumbnail

<a href="images/full-image.jpg" class="highslide"
onclick="return hs.expand(this)">
<img src="images/thumbnail.jpg" alt="Highslide JS"
title="Click to enlarge" height="120" width="107" /></a>

Compatibility - tested with: