Bien, para empezar necesitaremos descargar Autoviewer.
Descomprimimos el archivo zip y dentro veremos otra carpeta llamada tambien autoviewer que dentro tiene todos los archivos necesarios.
Obviamente si queremos hacer una galería de imágenes, debemos tener unas imágenes. Esas imágenes las pondremos en la carpeta images (tampoco es obligatorio que esten en esa carpeta pueden estar en cualquier otra o incluso alojadas en un servidor externo como Photobucket o Imageshack, el lugar lo indicaremos más adelante).
A continuación abriremos el archivo gallery.xml, para poder abrirlo podeis utilizar por ejemplo el Bloc de Notas.
Por defecto viene el siguiente código:
Código: Seleccionar todo
<?xml version="1.0" encoding="UTF-8"?>
<gallery frameColor="0xFFFFFF" frameWidth="15" imagePadding="20" displayTime="6" enableRightClickOpen="true">
<image>
<url>images/wide.jpg</url>
<caption><![CDATA[<font size="50">Example Gallery</font><br>An example large format <u><a href="http://www.airtightinteractive.com/projects/autoviewer">AutoViewer</a></u> gallery.]]></caption>
<width>700</width>
<height>465</height>
</image>
<image>
<url>images/tall.jpg</url>
<caption>Pellentesque turpis leo, dignissim ac, vestibulum quis, hendrerit quis, enim.</caption>
<width>465</width>
<height>700</height>
</image>
<image>
<url>images/wide.jpg</url>
<caption><![CDATA[Captions can be HTML formatted. Supported tags are <b>bold</b>, <u>underline</u>, <i>italics</i>, <u><a href="http://www.google.com" target="_blank">hyperlinks</a></u>, linebreaks<br> and <font color="#ffff00" size="60">font tags</font>.]]></caption>
<width>700</width>
<height>465</height>
</image>
<image>
<url>images/tall.jpg</url>
<caption>Images can be tall...</caption>
<width>465</width>
<height>700</height>
</image>
<image>
<url>images/wide.jpg</url>
<caption>...or wide.</caption>
<width>700</width>
<height>465</height>
</image>
<image>
<url>images/tall.jpg</url>
<caption>Gallery resizes to fit browser window.</caption>
<width>465</width>
<height>700</height>
</image>
<image>
<url>images/wide.jpg</url>
<caption><![CDATA[Supports non-english characters<br><br>サイトのコンテンツを活用して広告収入を得ることが可能です。サイト訪問者に、内容に関連]]></caption>
<width>700</width>
<height>465</height>
</image>
</gallery>
Para simplificarlo, podemos eliminar todo y copiar el siguiente código:
Código: Seleccionar todo
<?xml version="1.0" encoding="UTF-8"?>
<gallery frameColor="0xFFFFFF" frameWidth="15" imagePadding="20" displayTime="6" enableRightClickOpen="true">
<image>
<url></url>
<caption><![CDATA[<font size="50">Example Gallery</font>]]></caption>
<width>700</width>
<height>465</height>
</image>
</gallery>
Entre las etiquetas <url></url> pondremos la url en la que se encuentra nuestra imagen.
Entre las etiquetas <caption></caption>, es posible añadir un título a la imagen, escogiendo incluso el tamaño si se desea dentro de la etiqueta <font size>.
Entre las etiquetas <width></width> pondremos el ancho de la imagen en pixeles
Y por último entre las <height></height> la altura de la imagen
Una vez que tengamos todo modificado copiamos todo el contenido que hay entre las etiquetas <image></image> (etiquetas incluidas), lo pegamos bajo la etiqueta </image> y lo modificamos de nuevo con los datos de otra imagen. Esto se puede hacer con tantas imagenes como deseemos.
Ahora subimos la carpeta autoviewer a nuestra web mediante FTP a la ruta donde queramos, en incluso se le puede poner otro nombre, para que sea más sencillo de ver.
Para que nuestra galería se pueda visualizar desde nuestra web, ya sólo faltaría añadir el código html, que es el siguiente (se puede modificar el tamaño, yo lo he dejado en 530 x 300, podeis encontrar facilmente los donde modificarlo en el siguiente código).:
Código: Seleccionar todo
<script src="http://elnombredetuweb/autoviewer/swfobject.js" type="text/javascript"></script>
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">// <![CDATA[
var fo = new SWFObject("http://elnombredetuweb/autoviewer/autoviewer.swf", "viewer", "530", "300", "8", "#181818");
fo.addVariable("xmlURL", "http://elnombredetuweb/autoviewer/gallery.xml");
fo.write("flashcontent");
// ]]></script>
<!-- path of autoviewer files: http://elnombredetuweb/autoviewer/ -->
Y por último el resultado final:
AutoViewer requires JavaScript and the Flash Player. Get Flash.
Nota
Aunque veais la galería en un foro phpbb3, este tipo de foros no permite html por defecto.