Xyberneticos » Galerias http://xyberneticos.com Desarrollo Web, Diseño, Recursos, Wordpress, Themes Fri, 04 Nov 2011 14:10:38 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Supersized 3.2 – Fullscreen Slideshow jQuery Plugin http://xyberneticos.com/index.php/2011/10/31/supersized-3-2-fullscreen-slides/ http://xyberneticos.com/index.php/2011/10/31/supersized-3-2-fullscreen-slides/#comments Mon, 31 Oct 2011 14:49:01 +0000 Nikko http://xyberneticos.com/?p=3229

Supersized es un script que permite crear presentaciones de diapositivas de fondo y ha pantalla completa, todo bajo la librería jQuery.

Es versión de Supersized tiene temas, vínculos directos de diapositivas, precarga dinámica, y una API.

Características

  • Cambia el tamaño de las imágenes para llenar completamente el navegador, manteniendo obvio la dimensión de la imagen
  • Ciclos de fondos a través de diapositivas con transiciones y precarga dinámica
  • Posee la versión base disponible para aquellos que sólo quieren cambiar el tamaño del fondo.
  • Controles de navegación con soporte para teclado
  • Integración con Flickr – tirar fotos del usuario, establecido o grupo
  • Dirígete a la página del proyecto para todos los detalles.

Nuevo en Supersized 3.2

  • Completa reescritura del guión para imágenes super grandes.
  • Más opciones, incluida la capacidad para prevenir las diapositivas que se corten en carga.
  • Puedes ahora enlazar directamente a las diapositivas
  • API que te permite llamar a funciones de forma directa (por ejemplo, el efecto / pausa, siguiente, anterior, y saltar directamente a una diapositiva)
  • Los archivos de los themes están separados de los archivos de base, lo que hará que las actualizaciones sean mucho más fácil. El Shutter theme está incluido en cada descarga.
  • Flickr no está actualizado a 3.2 (trabajando en eso)

WordPress

WP Supersized desarrollado por el talentoso Ben De Boeck del World In My Eyes . Nota: Este plugin está utilizando la versión 3.1.3

]]> http://xyberneticos.com/index.php/2011/10/31/supersized-3-2-fullscreen-slides/feed/ 0 Nivo Slider (v2.4) – jQuery Image Slider http://xyberneticos.com/index.php/2011/01/26/nivo-slider-v2-4/ http://xyberneticos.com/index.php/2011/01/26/nivo-slider-v2-4/#comments Wed, 26 Jan 2011 21:52:48 +0000 Nikko http://xyberneticos.com/?p=3122

Nivo Slider (v2.4) la nueva versión del plugin jQuery que en alguna oportunidad hemos publicado. Se trata de una fantástica forma de crear diapositivas / deslizantes con miniaturas para nuestros proyectos online. Posee características particulares en cuanto a efectos. Permite ajustarse a nuestras necesidades, dirección y control de navegación.

Ver demos - Descarga

PLAIN TEXT
JavaScript:
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

PLAIN TEXT
JavaScript:
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
    });
});
</script>

Características actuales (v2.4)

  • 11 efectos de transición única
  • Código Simple y limpia
  • Ajustes de Carga para modificar
  • Construida basada en la dirección de navegación y control
  • versión de 10kb
  • Apoya la vinculación en imágenes
  • Teclado de navegación
  • Títulos HTML
  • Libertad de uso bajo licencia MIT

Compatibilidad con exploradores

Nivo Slider ha sido probado en los siguientes navegadores:

  • Internet Explorer versión 7 +
  • Firefox v3 +
  • Google Chrome v4
  • Safari v4
  • Opera 10.5
PLAIN TEXT
HTML:
<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

PLAIN TEXT
CSS:
#slider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

]]> http://xyberneticos.com/index.php/2011/01/26/nivo-slider-v2-4/feed/ 6 The Piecemaker 2 – (Ahora también como Plugin Wp) http://xyberneticos.com/index.php/2011/01/12/the-piecemaker-2-ahora-tambien-como-plugin-wp/ http://xyberneticos.com/index.php/2011/01/12/the-piecemaker-2-ahora-tambien-como-plugin-wp/#comments Wed, 12 Jan 2011 13:53:04 +0000 Nikko http://xyberneticos.com/?p=2587

El año pasado, Björn de Modularweb nos dio a conocer Piecemaker, una galería de imagen 3D basada en flash, totalmente gratis y de código abierto.
Arrancando este 20011, se ha lanzado la versión Piecemaker 2 : totalmente renovado y con nuevas características en las cuales se incluyen soporte de vídeo. Además llega acompañado de un plugin wordpress, lo que garantiza que Piecemaker 2 sea aun más simple de instalar para los usuarios que se encuentren usando wordpress.

  • ¿Qué hay de nuevo?

Comparada con la versión anterior el Piecemaker 2 ahora incluye:

  • Efectos de transición ilimitados
  • La posibilidad de incluir archivos SWF y videos
  • Mejora en la navegación
  • Sombras animadas

XML y HTML / CSS se ha mejorado, lo que permite caracteres especiales. Además, las imágenes ahora pueden contener enlaces a otros sitios web.

Para saber mas y descargar   The Piecemaker 2 over on Activetuts+!

]]> http://xyberneticos.com/index.php/2011/01/12/the-piecemaker-2-ahora-tambien-como-plugin-wp/feed/ 4 Presentation Cycle – Presentacion de imágenes con barra de progreso http://xyberneticos.com/index.php/2010/03/10/presentation-cycle-presentacion-de-imagenes-con-barra-de-progreso/ http://xyberneticos.com/index.php/2010/03/10/presentation-cycle-presentacion-de-imagenes-con-barra-de-progreso/#comments Wed, 10 Mar 2010 13:22:34 +0000 Nikko http://xyberneticos.com/?p=2445 presen_cicle
Presentation Cycle, un bonito plugin para jQuery que nos permitirá construir fácilmente presentaciones de imágenes con una barra de progreso bastante llamativa. Este script soporta una gran cantidad de efectos y en lugar de generar una lista de números donde hacer click para navegar, Presentation Cycle genera una barra de progreso que muestra cuando la nueva diapositiva aparecerá.

Ver Demo - Descarga e info Presentation Cycle

Via infectedfx

]]> http://xyberneticos.com/index.php/2010/03/10/presentation-cycle-presentacion-de-imagenes-con-barra-de-progreso/feed/ 8 bxGallery : Simple jQuery image gallery http://xyberneticos.com/index.php/2010/01/22/bxgallery-simple-jquery-image-gallery/ http://xyberneticos.com/index.php/2010/01/22/bxgallery-simple-jquery-image-gallery/#comments Fri, 22 Jan 2010 23:38:44 +0000 Nikko http://xyberneticos.com/?p=2439 bxga33ery

bxGallery, un plugin jQuery de tan solo 4kb que les permitirá crear y diseñar galerías de imágenes para sus productos y/o porfolios. Posee bellos efectos y puede configurarse a gusto. Algunas de sus características:

  1. Cross browser (incluyendo IE6)
  2. Crea una lista con las miniaturas automaticamente
  3. Configuras el tamaño máximo de las imágenes
  4. Asignas la clase que desees al contendor
  5. Configuras la opacidad de las thumbnails
  6. Defines la imagen que se mostrará para precarga
  7. Asignas dimensiones para la lista, imágenes, contendores

Ver Demo InfectedFX - Otros demos

Uso

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxGallery.min.js"></script>

Nuestra estructura

PLAIN TEXT
HTML:
<ul id="myID">
  <li><img src="Fotos/Fotonumero01.png" alt="imagen01" width="400" height="400" /></li>
  <li><img src="Fotos/Fotonumer02.png" alt="imagen02" width="400" height="400" /></li>
  <li><img src="Fotos/Fotonumer03.png" alt="imagen03" width="400" height="400" /></li>
</ul>

Función para que se ejecute nuestra galería

PLAIN TEXT
JavaScript:
$(document).ready(function(){
    $('#myID').bxGallery();
});

Mas info y Descarga bxgalleryplugin.com

Via bxGallery : Galería de imágenes con jQuery by InfectedFX

]]> http://xyberneticos.com/index.php/2010/01/22/bxgallery-simple-jquery-image-gallery/feed/ 10 miniGallery – An extremely lightweight gallery template http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/ http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/#comments Mon, 21 Sep 2009 03:41:45 +0000 Nikko http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/ minigallery.jpg

MiniGallery es una galería muy simple y bonita, que puede ser muy útil para tus proyectos web. El JavaScript utilizado en miniGallery es la secuencia de comandos Yetii, extremadamente ligero y tan flexible que es fácil de personalizar para satisfacer casi cualquier requisito.

Ver Demo - Descarga

]]> http://xyberneticos.com/index.php/2009/09/21/minigallery-an-extremely-lightweight-gallery-template/feed/ 7 Beautiful jQuery sliders http://xyberneticos.com/index.php/2009/07/12/beautiful-jquery-sliders/ http://xyberneticos.com/index.php/2009/07/12/beautiful-jquery-sliders/#comments Mon, 13 Jul 2009 02:59:51 +0000 Nikko http://xyberneticos.com/index.php/2009/07/12/beautiful-jquery-sliders/ sliderquey.jpg

Create Beautiful jQuery sliders, es un maravilloso tutorial desarrollado por DreamCSS , que les explicara paso a paso como montar una galería de imágenes con efectos deslizantes. Además de poseer un diseño simple pero elegante, se le han añadido efectos a los textos que acompañaran a cada una de las fotografías, que si bien es un dato menor, permite lograr una personalización aun mayor. Me parece un script muy interesante para ser utilizado en porfolios, web turisticas o web corporativas, creo que pensaran lo mismo una vez que lo vean funcionando.

Ver Demo - Descarga - Mas Info  Beautiful jQuery sliders

Via webappers

]]> http://xyberneticos.com/index.php/2009/07/12/beautiful-jquery-sliders/feed/ 8 Simple Slideshow http://xyberneticos.com/index.php/2009/03/21/simple-slideshow/ http://xyberneticos.com/index.php/2009/03/21/simple-slideshow/#comments Sat, 21 Mar 2009 03:01:09 +0000 Nikko http://xyberneticos.com/index.php/2009/03/21/simple-slideshow/ simples.jpg

Simple Slideshow, otra opción que les permitirá montar sus Slideshow o diapositivas animadas de la forma más simple. Si deseas animar sus encabezados, pero no les agrada la idea de utilizar animaciones en flash, Simple Slideshow puede ser una buena opción a tener en cuenta.

Ver Demo - Descarga - Mas Info Simple Slideshow


Creando Nuestros slideshow

PLAIN TEXT
HTML:
<ul class="ppt">
    <li><img src="Foto1.jpg" alt="Descripcion 1"></img></li>
    <li><img src="Foto2.jpg" alt="Descripcion 2"></img></li>
    <li><img src="Foto3.jpg" alt="Descripcion 3"></img></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 1000 );
}

$(function() {
    setInterval( "animate()", 5000 );
} );
</script>

Añadir estilo

PLAIN TEXT
CSS:
ul.ppt {
    position: relative;
}

.ppt li {
    list-style-type: none;
    position: absolute;
    top: 0;
    left: 0;
}

.ppt img {
    border: 1px solid #e7e7e7;
    padding: 5px;
    background-color: #ececec;
}

]]> http://xyberneticos.com/index.php/2009/03/21/simple-slideshow/feed/ 1 Moving Boxes – Más contenido deslizante con jQuery http://xyberneticos.com/index.php/2009/02/17/moving-boxes-mas-contenido-deslizante-con-jquery/ http://xyberneticos.com/index.php/2009/02/17/moving-boxes-mas-contenido-deslizante-con-jquery/#comments Tue, 17 Feb 2009 21:50:20 +0000 Nikko http://xyberneticos.com/index.php/2009/02/17/moving-boxes-mas-contenido-deslizante-con-jquery/ movinboxes.jpg

Moving Boxes, otra interesante opción para montar cajas con contenido deslizante. La ida original sigue siendo la base de Start/Stop slider que también comentamos. Botones de control a sus laterales para navegar por el contenido de nuestra caja, pero con la diferencia que al encontrase en el centro de la caja el contenido que hayamos introducido, se producirá un Zoom que lo hace muy llamativo.

Ver Demo - Descarga - Mas info  Moving Boxes

]]> http://xyberneticos.com/index.php/2009/02/17/moving-boxes-mas-contenido-deslizante-con-jquery/feed/ 6 Easy Slider – Plugin jQuery ideal para tu porfolio http://xyberneticos.com/index.php/2009/01/07/easy-slider-plugin-jquery-ideal-para-tu-porfolio/ http://xyberneticos.com/index.php/2009/01/07/easy-slider-plugin-jquery-ideal-para-tu-porfolio/#comments Wed, 07 Jan 2009 04:30:33 +0000 Nikko http://xyberneticos.com/index.php/2009/01/07/easy-slider-plugin-jquery-ideal-para-tu-porfolio/ easyslider.jpg

Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

Demos

Mas Info Easy Slider - Descarga ejemplos

Uso:

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider.packed.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            orientation:'vertical'
        });
    });
</script>

agregando estilo

PLAIN TEXT
CSS:
/* Easy Slider */

    #slider ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider, #slider li{
        /*
            define width and height of container element and list item (slide)
            list items must be the same size as the slider area
        */
        width:696px;
        height:241px;
        overflow:hidden;
        }
    span#prevBtn{}
    span#nextBtn{}         

/* // Easy Slider */

Contenido

PLAIN TEXT
HTML:
<div id="slider">
        <ul>               
            <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
            <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
            <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
            <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
            <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>   
        </ul>
    </div>

El script automáticamente agregara la navegación "anterior" y "próximo", pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

PLAIN TEXT
HTML:
<span id="prevId"><a href="javascript:void(0);">Previous</a></span>
<span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

]]> http://xyberneticos.com/index.php/2009/01/07/easy-slider-plugin-jquery-ideal-para-tu-porfolio/feed/ 4