[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Galerias

  • DhoniShow ROCK – Mas formas de crear slideshows

    dshowquery.jpg

    DhoniShow ROCK otra versión de esta estupenda galería que nos permite montar slideshows a nuestros proyectos web. Anteriormente comentamos la que se llama solamente DhoniShow basada en prototype 1.5+ y Script.aculo.us. La diferencia con esta versión DhoniShow ROCK, es la librería que se utilizara, ahora completamente en jquery. Su funcionamiento es realmente muy simple, y las configuración con las cuales interactuar muchísimas. Muchos efectos, autoplay, transiciones manuales, opción de añadir imágenes miniaturas bajo la de tamaño original, tiempo de transiciones en secuencias, etc.

    Ver Demo - Descarga Demo - Mas info DhoniShow ROCK

    Uso:
    Para su instalación como siempre, necesitamos descargar cada uno de los archivos, alojarlos en una carpeta o servidor y realizar la llamada correspondiente a ellos. Es decir, a nuestras librerías jquery y las correspondientes a DhoniShow, su script y su hoja de estilo.

    JavaScript:
    <link rel="stylesheet" href="dhonishow.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.dhonishow.js" type="text/javascript" charset="utf-8"></script>

    Crear una slideshow con AUTOPLAY

    HTML:
    <div class="dhonishow autoplay_3 duration_3"> 
     <img src="1.jpg"> 
     <img src="2.jpg"> 
     <img src="4.jpg"> 
    </div>

    Crear galerias y agregando enlaces a las descripciones

    HTML:
    <div class="dhonishow"> 
    <img src="1.jpg" alt="Agregando link a la descripcion. Mira: <a href='http://xyberneticos.com/'>xyberneticos.com</a>"> 
    <img src="2.jpg" alt="Nuestra galeria slideShow con un dise&ntilde;o muy peculiar bajo <a href='http://dhonishow.de/'>dhonishow ROCk</a> mediante jQuery - power by <a href='http://xyberneticos.com/'>xyberneticos.com</a>
    "> 
    <img src="4.jpg" alt="Soy un link <a href='http://xyberneticos.com/'>xyberneticos.com</a> "> 
    </div>

    Ambas formas, lo podrán ver funcionar en el ejemplo que también pueden descargar.
    gracias Cesar

  • Interface Slideshow

    interfaceshoe.jpg

    Interface Slideshow, otra agradable alternativa para mostrar nuestras imágenes en diapositivas y con desvanecimiento. Sin duda la cantidad de opciones que se nos suelen presentar son tantas, que hace muy difícil la elección de uno a la hora de implementarlo en nuestros proyectos. Soy de esos que creen, que aunque suelan verse muy similar a otros, todos poseen diversas ventajas y pequeñas cosas que llamaran más la atención uno de otro. Sea en la forma de implementarse, la librería en la cual se basa, las diferentes opciones que nos presenta y demás. Interface Slideshow utiliza jquery y un poco de css para dar el estilo que veremos en el ejemplo. Creo que les gustara.
    Ver Demo -Interface Slideshow

    Uso:

    Lo primero será descargar ambas librerías, jQuery 1.1.2 19 kb junto con Interface 1.2 146kb alojarlo en nuestro servidor o la carpeta que contiene todas nuestras librerías y realizar la llamada a ellos desde nuestro encabezado. Dentro de nuestras etiquetas < Head >…

    JavaScript:
    <script src="jquery.js" type="text/javascript"></script>
    <script src="interface.js" type="text/javascript"></script>

    Un poco de CSS

    CSS:
    #slideShow1
    {

    width: 300px;
    height: 280px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    #slideShow2
    {

    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    margin: 10px;
    }
    .pagelinks a
    {
    font-weight: bold;
    color: #666;
    }
    .slideCaption
    {
    background-color: #FFFFCC;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    }
    .pagelinks a.activeSlide
    {
    color: #f90;
    }
    /* this is for IE so the prev/next links can be hovered*/
    .nextSlide,.prevSlide
    {
    background-image: url(images/spacer.gif);
    }
    .nextSlide:hover
    {
    background-image: url(images/nextslide.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    }
    .prevSlide:hover
    {
    background-image: url(images/prevslide.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    }
    .inputsTooltip
    {
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 4px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    filter:alpha(opacity=70);
    -moz-opacity:.70;
    opacity:.70;
    }
    #tooltipURL
    {

    display: none;
    }

    Estructura de ambos ejemplos

    HTML:
    <div id="slideShow1">
    <div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>

    <div class="slideshowCaption slideCaption"></div>
    </div>

    <div id="slideShow2"><div class="slideshowLoader"></div>
    <div class="slideshowHolder"></div>
       
       
    <div class="slideshowLinks pagelinks"></div>
    <div class="slideshowCaption slideCaption"></div>
    </div>

    JavaScript:
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $.slideshow(
                {
                    container : 'slideShow1',
                    loader: 'slideshow_files/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    random: true,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Dynamic'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Active.jpg',
                            caption: 'Panda Active'
                        }
                    ]
                }
            )
            $.slideshow(
                {
                    container : 'slideShow2',
                    loader: 'images/slideshow_loader.gif',
                    linksPosition: 'top',
                    linksClass: 'pagelinks',
                    linksSeparator : ' | ',
                    fadeDuration : 400,
                    activeLinkClass: 'activeSlide',
                    nextslideClass: 'nextSlide',
                    prevslideClass: 'prevSlide',
                    captionPosition: 'bottom',
                    captionClass: 'slideCaption',
                    autoplay: 5,
                    images : [
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Fiat Panda'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Active'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpg',
                            caption: 'Panda Actual'
                        },
                        {
                            src: 'slideshow_files/Dynamic.jpgg',
                            caption: 'Panda Dynamic'
                        }
                    ]
                }
            )
           
            $('a').ToolTip(
                {
                    className: 'inputsTooltip',
                    position: 'mouse'
                }
            );
        }
    );
    </script>

    Ver Demo -Mas info Interface Slideshow

  • Spacegallery

    spacegallery.jpg

    Spacegallery, plugin jQuery que nos permitirá montar a nuestros proyectos una galería de imágenes al mejor estilo time machine de Leopard.

    Ver Demo - Descarga jQuery, Javscript files, CSS files, images, examples and instructions.

    Instalacion:
    Realizar la llamada desde nuestro encabezado. Copiando y pegando el siguiente código dentro de nuestras etiquetas < Head >…

    JavaScript:
    <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/spacegallery.js"></script>

    La estructura

    HTML:
    <div id="myGallery" class="spacegallery">               
    <img src="images/foto.jpg" />
    <img src="images/foto.jpg" />
    <img src="images/foto.jpg" />
    <img src="images/foto.jpg" />
                     </div>

  • PicsViewr – Crear slideshows con tus fotos en Flickr

    picviewa.jpg

    Para aquellos que disfrutarían compartiendo sus imágenes de Flickr de una forma totalmente diferente les presento PicsViewr, una aplicación online que nos permitirá crear slideshows a partir de nuestras imágenes de Flickr. Simplemente es necesario ingresar nuestro nombre de usuario en Flickr, dar al botón “GO”, y ya comenzaremos a ver diferentes opciones y diversos efectos para compartir muestras imágenes. Cada opción que se nos presenta tendrá una URL única, por lo tanto, en caso de desearlo, podremos compartir todas ellas intercalando estas direcciones con nuestros amigos. Los resultados son muy bonitos, y para aquellos que deseaban conseguir resultados similares y no tenían los conocimientos para hacerlo o bien el tiempo para investigar al respecto, PicsViewr es una opción extraordinaria, ya que podremos generarlos en tan solo 7 segundos (comprobados).

    Enlace PicsViewr  - Demos

  • DhoniShow – Otra alternativa para montar slideshows a tus proyectos Web

    dshojs.jpg

    DhoniShow otro script desarrollado para montar slideshows a tus proyectos Web. Utilizarlo es realmente simple, requiere para su buen funcionamiento prototype 1.5+ y Script.aculo.us (opcional), sin olvidar el script "dhonishow.js". Algo interesante, es que si als transiciones que realizara Dhonishow por defecto consideras que no son suficientes, podrás manipular algunos parámetros dentro del script o por supuesto todo el archivo CSS.

    Ver Demos

    Instalación: Descargamos DhoniShow y prototype 1.5+. Opcional: Script.aculo.us. Realizamos la llamada a ellos desde nuestro encabezado.

    JavaScript:
    <script src="prototype.js" type="text/javascript"></script>
    <script src="scriptaculous.js" type="text/javascript"></script>
    <script src="dhonishow.js" type="text/javascript"></script>

    <link rel="stylesheet" href="dhonishow.css" type="text/css"
    media="screen" />

    la estructrura

    HTML:
    <div class="dhonishow">
      <img src="img/fotoNumero1.jpg" alt="Numero1" />
      <img src="img/fotoNumero2.jpg" alt="Numero2" />
      <img src="img/fotoNumero3jpg" alt="Numero3" />
    </div>

    Algunos parametros que podremos configurar :
    Transition style: Permite configurar el estilo de los efectos que se generaran para las transiciones.

    HTML:
    <div class="dhonishow effect_appear">

    <!-- Choose between effect_appear, effect_blind,
    effect_slide, effect_horizontal -->

    Transition duration: La duracion de cada transicion.

    HTML:
    <div class="dhonishow duration_0dot6">
    <!-- For 0.6 seconds -->

    Autoplay: Auto comenzar animación a los segundos estipulados

    HTML:
    <div class="dhonishow autoplay_5">
    <!-- For 5 seconds -->

    Hide things: Ocultar elementos, ej: Navegacion, etc

    HTML:
    <div class="dhonishow hide_paging">
    <!-- Choose between hide_paging, hide_alt (Sublines),
    hide_navigation -->

  • ToobPlayer – Practico FLV Player para integrar tus videos Youtube a tus proyectos online

    toobplayer.jpg

    ToobPlayer es un extraordinario FLV Player que permitirá montar a tu Web aquellos videos youtube que disfrutas ver, pero dando al reproductor un aspecto mucho mas personalizado o simulando haberlos alojado en nuestro propio servidor. ToobPlayer no solo se caracteriza por ser un mecanismo para reproducir videos de YouTube, sino que también podremos crear con el, vistas previas de imágenes al mejor estilo galerías. Encontraremos cinco Skin ya prediseñados, lo que será toda una ventaja, y asegurara que la integración a nuestro blog sea lo mas bonita posible, permite visualización a pantalla completa, puede manipularse en caso de desearlo con nuestro ratón (controlar volumen, etc), y mas haya de ser súper liviano, es totalmente personalizable, lo que hace que sea una alternativa genial.

    Mas Demos - Descarga ToobPlayer 1.0.0

    Via pixelco

  • The Featured Content Gallery – Plugin WP para generar contenido destacado

    featured-content-gallery.jpg

    The Featured Content Gallery, es un agradable plugin wordpress desarrollado por wpelements, el mismo nos permitirá montar en nuestros themes wordpress, de una forma sumamente simple, una galería muy agradable que hemos comentado en alguna oportunidad: SmoothGallery de JonDesigns. Lo genial de esta galería, transformada en plugin wordpress, es que una vez integrada a nuestro theme la podremos actualizar desde nuestro propio administrador wordpress, donde básicamente gestionaremos las 5 imágenes a mostrar, el titulo que llevara cada una de nuestras imágenes, acompañada de una breve descripción, e inclusive nos permite añadir el link hacia un post especifico donde redireccionaremos a nuestros usuarios al hacer clic sobre una imagen en particular. Sin duda, este plugin es una muy buena opción para generar Featured o post destacados en nuestros themes wordpress, sin complicarnos tanto la vida.
    Instalar The Featured Content Gallery Plugin

    • Descargamos el plugin “content-gallery.zip” by wpelements
    • Subimos el plugin a la carpeta /wp-content/plugins/ de tu WordPress ej: p-content/plugins/content-gallery/
    • Activamos el plugin desde el panel de administración WordPresss
    • Añadimos el siguiente código dentro de algún archivo de nuestro theme donde deseamos mostrar la galería. (sidebar, index, etc)
    PHP:
    <?php include (ABSPATH . '/wp-content/plugins/content-gallery/gallery.php'); ?>

    Gestionamos
    Nos dirigimos dentro de nuestro Panel administrador Wp a la opción “setting” u opciones generales, una vez allí buscamos la opción “Featured Content Gallery” y comenzamos a gestionar nuestra galería. La cual es muy simple de entender.

    fotoadmingaleria.jpg

    Ajustar el ancho y altura de nuestra galería (Opcional)
    Para modificar el ancho y el alto de la galería, editar el archivo "jd.gallery.css" que se encuentra dentro de la carpeta "css" del plugin de Galería. EJ:

    CSS:
    #myGallery, #myGallerySet, #flickrGallery
    {

    width: 460px; /* this is the width of your gallery */
    height: 345px; /* this is the height of your gallery */
    z-index:5;
    border: 1px solid #000;
    }

    Para ampliar Informacion The Featured Content Gallery by wpelements

    Gracias Cesar


Pagina 3 de 8«12345678»