UNA GALERÍA DE IMÁGENES IMPACTANTE

    A tus usuarios les va a sorprender esta Galería de imágenes en formato "carrusel" en 3D que van girando y cuando haces clic en una de ellas se muestra en tamaño original; me estoy refiriendo a la que puedes crear por medio de la extensión ARI Cloud Carousel que podrás instalar fácilmente en tu web y configurarla a tu gusto a través de los muchos parámetros de los que dispone y que te explicaré en este extenso manual que te ofrezco.

    Para que te hagas una idea de su funcionamiento, puedes examinar este corto vídeo que muestra la Galería de imágenes que he creado con esta extensión ARI Cloud Carousel, para el ejemplo que voy a desarrollar en este manual:

    Te darás cuenta enseguida que la Galería es realmente bonita, ¿te interesa?, pues sigue leyendo.

1. DESCARGAR LA EXTENSIÓN DESDE EL SITIO OFICIAL

    Antes de nada, procede a descargar ARI Cloud Carousel desde el sitio oficial, que es este:

2. INSTALAR LA EXTENSIÓN

    Como ya debes saber, la instalación de este módulo es sencilla y consiste simplemente en ir a:

    Nos llevará así al instalador, donde le indicamos la carpeta donde está el archivo ".zip" de la extensión y procedemos a Instalar:

3. ANTES DE SEGUIR, DEBEMOS PREPARAR LAS IMÁGENES PARA LA GALERÍA

    Efectivamente, antes de proceder a configurar el módulo recién instalado, deberemos preparar todas las imágenes que vamos a colocar en nuestra Galería. En el ejemplo que te explico, tengo estas nueve imágenes (de una visita que hice hace poco a Lisboa):

    Lo que hago es irme a Photoshop y prepararlas todas con igual tamaño; en mi caso las he creado con 575 x 718 píxel cada una (tú sin embargo podrás darles el tamaño que desees --eso sí, procura que todas tengan el mismo--).
    ¿DÓNDE GUARDARLAS?: crea una carpeta en tu servidor, dentro de images/  (en el ejemplo he creado una que llamo "portugal", así que la ruta será: images/portugal) y justamente dentro de esa carpeta "portugal" es donde las coloco todas una vez las tengo listas a su medida como te dije.

4. AHORA YA PODEMOS CONFIGURAR EL MÓDULO

    Una vez hemos preparado y guardado las imágenes, nos vamos al Gestor de módulos de nuestro Panel y buscamos:

    Haremos clic sobre el enlace para ir a la pantalla de configuración que te muestro. Esta es la parte izquierda:

    Aquí únicamente colocamos SI en "Habilitado:" y le indicamos en "Posición:" el lugar donde queremos que aparezca la Galería (dentro de las posiciones de módulos que admita nuestro template). Pasamos a la parte derecha, que te muestro en varias imágenes, en la parte superior:

    En el apartado "Header text" colocamos un título que aparecería en la parte superior de la Galería (no es obligatorio). El resto de apartados, puedes dejarlos como te muestro en la imagen de arriba. Un poco más abajo verás:

    Aquí lo más importante es colocar las medidas que tendrá la Galería en tu web; lo haces en "Width" y en "Height" (ancho y alto respectivamente) y que como ves yo he colocado para el ejemplo en 700 y 500 píxels; el resto de opciones puedes dejarlo como aparecen por defecto. Un poco más abajo verás:

    Nos interesan especialmente los apartados "Auto rotate" (aquí decides tú si quieres que las imágenes roten automáticamente o no); como puedes comprobar yo le indico que sí y además que roten hacia la derecha. Además en "Autorotate delay" le puedes indicar cada cuanto tiempo debe pasar una imagen en el carrusel (yo le indico 3000 --es decir, cada 3 segundos--).
    Y además, en el apartado "Path to background image" puedes indicarle la ruta a una imagen que quieras poner como fondo (no es obligatorio, y de no colocar aquí ruta alguna, el fondo será el del template). En el ejemplo, creé una imagen de fondo a la que llamé "fondo.jpg" y puedes ver que la coloqué en una carpeta llamada "fondos" que a su vez se encuentra dentro de images/portugal. Como te dije, si no pones nada aquí, está claro que el fondo será el del lugar donde tengas la Galería. El resto déjalo tal cual.
    Finalmente, la parte inferior mostrará esto:

    El apartado más importante aquí es "Image path" que será donde le indiques la ruta para encontrar esas imágenes que preparaste y cargaste ¿recuerdas?. En mi caso como ya te dije al principio, las tengo en images/portugal; el resto puedes dejarlo tal cual.

5. PROBANDO NUESTRA GALERÍA

    Cuando hayamos configurado todo correctamente, es momento de probar el trabajo, así que vamos a nuestra web y en el lugar donde hayamos colocado la Galería 3D de ARI Cloud Carousel, ya deberíamos ver la misma:

    ¡¡Correcto!!, funciona perfectamente. Si ahora quisiera quitar el fondo, recuerda que en el apartado "Path to background image" no tenemos más que quitar la ruta que había colocado para que la Galería se vea ahora así:

    Y si pico sobre una de las imágenes, se mostrará a su tamaño:

6. FINALMENTE...

    Si quisieras que las imágenes según van pasando muestren un título y una descripción, no tienes más que editar el archivo aricloudcarousel.ini (con tu Bloc de notas, por ejemplo) que la extensión te habrá colocado en: modules/mod_aricloudcarousel/ que tiene este aspecto:

    ** Se trata de colocar bajo [TITLE], el nombre de cada imagen seguido del signo = y el título que queremos aparezca, encerrado entre comillas (""). Luego más abajo, después de [DESCRIPTION] hacemos lo mismo, pero en este caso colocamos el texto que queremos aparezca para la descripción de cada imagen, entre comillas (""). Por último, debajo de [LINK] podríamos colocar un enlace al que apuntaría esa imagen concreta que quisiéramos (en mi caso no he colocado nada como ves).

    Ahora, este archivo aricloudcarousel.ini una vez salvados los cambios, debemos subirlo a la misma carpeta donde tengamos las imágenes (en mi caso a images/portugal), comprobando que lo tenemos colocado en el apartado correspondiente de configuración del módulo:

    Ahora, si vamos de nuevo a nuestra web, veríamos que según para una imagen con título y descripción colocados, lo mostrará así:

    Interesante este módulo ¿no crees?; bien, pues ya sabes cómo crearlo fácilmente así que manos a la obra.

Subir a principio de página (menú) >>