Crear fácilmente galería de imágenes para web con Autoviewer

Moderadores: Kravenbcn, largeroliker, fidelcastro, cerealkiller, pspCaracas, m0skit0, LnD, ka69, zacky06

Responder
Avatar de Usuario
Kravenbcn
Administrador
Administrador
Mensajes: 16291
Registrado: 01 Sep 2009, 21:27
PSN ID: Kravenbcn
Twitter: Kravenbcn
Ubicación: Barcelona
Contactar:

Crear fácilmente galería de imágenes para web con Autoviewer

Mensaje por Kravenbcn »

Aquí os acerco un pequeño tutorial en el que veremos como crear fácilmente una galería de imágenes para nuestra web mediante el uso de Autoviewer.

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.
No tiene los permisos requeridos para ver los archivos adjuntos a este mensaje.
No te pierdas nada, sigue a DaXHordes en Twitter, Facebook, Google+ y Youtube

Imagen
¿Quieres formar parte del equipo de DaXHordes.org? Esta es tu oportunidad.
PS3 · PS Vita · PSP

Avatar de Usuario
hiddenotebook
Experto
Experto
Mensajes: 634
Registrado: 28 Dic 2009, 14:56
Ubicación: En un lugar de la mancha...

Re: Crear fácilmente galería de imágenes para web con Autovi

Mensaje por hiddenotebook »

:shock: Gracias jefe lo usare en la web que tengo para vender gatos persa!!

PD: Esto quedaría muy chulo como BBcode verdad. :D

Responder