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

SimpleModal es un plugin MooTools para la creación de modal boxes (cajas) con mucha facilidad.
SimpleModal es ligero y puede utilizarse para mostrar alertas / cuadros de diálogo de confirmación, además de cualquier contenido HTML (texto, imagen, video, etc.)
Para confirmar los cuadros de diálogo, proporciona una función de devolución de llamada. Además, SimpleModalpuede trabajar en modo asíncrono y obtener contenidos de URLs en línea o de otra índole.
Su apariencia se puede personalizar con opciones que van desde la manipulación de la opacidad, ancho, color de superposición, movimiento arrastre on / off y mucho más.

Demos e info: http://simplemodal.plasm.it/
Descarga : https://github.com/plasm/simplemodal

Via webresourcesdepot

Tipped Javascript es un nuevo proyecto de nickstakenburg, el cual nos presenta otra práctica forma para generar hermosos tooltips. Es una evolución generada a partir del popular Prototip, pero llevado al segundo nivel mediante el uso de HTML 5 para darle un control total sobre la apariencia. Al igual que en otros proyectos con similares características, encontraremos diseños ya prediseñados pero eso no nos limitara a obtener mejores resultados. Podrás jugar un poco con los skin además de personalizarlo por completo. Contaras con Callbacks y Eventos disponibles para una fácil integración con tu propio código. Además de visualizar Ajax & HTML o elementos de la página.
Mas info Tipped - Descargas

Incluir tipped

Uso basico

Uso avanzado

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

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

Client Testimonials, es una idea muy práctica basada en PHP, XML y jQuery, que nos permitirá montar algo así como una mini plataforma donde se mostraran todas las recomendaciones, o experiencia que nuestros clientes han tenido con nosotros o nuestra empresa. Una muy buena forma de vender aun más nuestros productos o servicios, sin necesidad de montar un sistema CMS dedicada exclusivamente para este fin.

Ver Demo - Descarga (PHP, XML y jQuery) by tutorialzine

testimonials.xml

PLAIN TEXT

HTML:

<?xml version="1.0" encoding="utf-8"?>

<testimonials>
    <item>
        <content>This has to be the most awesome app I've ever used!</content>
        <author-name>John Doe</author-name>
        <author-url>jdoe.com</author-url>
    </item>
    <item>
        <content>Simply amazing! It solved my problem. I highly recommend it.</content>
        <author-name>John Smith</author-name>
        <author-url>smith.com</author-url>
    </item>
    <item>
        <content>A tremendous success. It is like walking on sunshine compared to its competitors.</content>
        <author-name>John Smith</author-name>
    </item>
</testimonials>

PLAIN TEXT

JavaScript:

$(document).ready(function(){

// Hiding all the testimonials, except for the first one.
$('#testimonials li').hide().eq(0).show();

// A self executing named function that loops through the testimonials:
(function showNextTestimonial(){

// Wait for 7.5 seconds and hide the currently visible testimonial:
$('#testimonials li:visible').delay(7500).fadeOut('slow',function(){

// Move it to the back:
$(this).appendTo('#testimonials ul');

// Show the next testimonial:
$('#testimonials li:first').fadeIn('slow',function(){

// Call the function again:
showNextTestimonial();
});
});
})();

});

Codigo completo Client Testimonials Powered by PHP, XML and jQuery

]]> http://xyberneticos.com/index.php/2011/01/20/testimonio-de-clientes-en-php-xml-jquery/feed/ 3 http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/ http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/#comments Thu, 20 Jan 2011 03:45:27 +0000 Nikko http://xyberneticos.com/?p=3112

Sproing! – Make An Elastic Thumbnail Menu; Si buscabas métodos alternativos para construir los menús de las web que desarrollas, el menú de miniaturas elásticas pueda ayudarte un poco a salir de lo habitual. ¿Qué hace exactamente?, Aumenta los elementos del menú cuando se posa sobre él. Y donde los elementos del menú se amplían hacia arriba.

Ver Demo

PLAIN TEXT

HTML:

<div id="menuwrapper">
<div id="menu"><a class="menuitem" href="#"><img src="image.jpg" alt="" /></a><!--Template for each menu item--></div>
</div>

PLAIN TEXT

CSS:

/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }

/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}

/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

PLAIN TEXT

JavaScript:

$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size

$('.menuitem').mouseover(function(){ //When mouse over menu item

gridimage = $(this).find('img'); //Define target as a variable
gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size

}).mouseout(function(){ //When mouse no longer over menu item

gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size

});
});

Internet Explorer no realizara un buen trabajo a menos que agreguen la siguiente línea CSS:

PLAIN TEXT

CSS:

img {ms-interpolación de modo: bicúbico;}

Mas Info Sproing! – Make An Elastic Thumbnail Menu

]]> http://xyberneticos.com/index.php/2011/01/20/elastic-thumbnail-menu/feed/ 1 http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/ http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/#comments Thu, 13 Jan 2011 19:14:03 +0000 Nikko http://xyberneticos.com/?p=3081

Create a Social Media Sharing Menu, es un tutorial donde se les mostrara como crear un menú de medios sociales que comparta tus noticias. Usa exclusivamente CSS y jQuery . Como CSS básico utiliza la propiedad CSS background-position y un poco de jQuery para hacer las animaciones en los enlaces. Útil y bastante simple de adaptar a nuestros post wordpress (single.php).

Resultado Final: Demo - Descraga Archivos  social-share-css-jquery (ZIP, 0.017 MB)

Info Create a Social Media Sharing Menu Using CSS and jQuery by sixrevisions

PLAIN TEXT

HTML:

<div id="social_nav_horizontal">
<h3>Bookmark or Share This Post</h3>
<ul>
    <li><a class="delicious" title="Bookmark on del.icio.us" href="http://del.icio.us/post?url=Your website title">Delicious</a></li>
    <li><a class="facebook" title="Share this on Facebook" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com">Facebook</a></li>
    <li><a class="stumbleupon" title="Stumble This Page" href="http://www.stumbleupon.com/submit? url=http://www.yoursite.com/"> Stumble</a></li>
    <li><a class="twitter" title="Tweet This Page" href="http://twitter.com/home?status=Your Website Title- http://yourwebsite.com@TwitterUserName">Twitter</a></li>
</ul>
</div>

PLAIN TEXT

CSS:

#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8e9090;
}
#social_nav_horizontal h3 {
display:inline;
padding: 0px 10px;
border-bottom:dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top:20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}
.delicious {
background:url(images/delicious.png) no-repeat;
background-position:0px -1px;
}
.facebook {
background:url(images/facebook.png) no-repeat;
background-position:0px -1px;
}
.stumbleupon {
background:url(images/stumbleupon.png) no-repeat;
background-position:0px -1px;
}
.twitter {
background:url(images/twitter.png) no-repeat;
background-position:0px -1px;
}

PLAIN TEXT

JavaScript:

$(document).ready(function() {
$('#social_nav_vertical li a').hover(
// on mouse over move to left
function() {
$(this).stop().animate({ marginLeft: '20px' },300);
},
// on mouse out, move back to original position
function() {
$(this).stop().animate({ marginLeft: '0px' }, 300);
});
});

]]> http://xyberneticos.com/index.php/2011/01/13/social-media-sharing-menu-css-jquery/feed/ 0 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.

Descarga Piecemaker 2 3.5 Mb -   Piecemaker 2 para  WordPress 795 Kb

• ¿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 http://xyberneticos.com/index.php/2010/09/10/sponsor-flip-wall-with-jquery-css/ http://xyberneticos.com/index.php/2010/09/10/sponsor-flip-wall-with-jquery-css/#comments Fri, 10 Sep 2010 14:12:22 +0000 Nikko http://xyberneticos.com/?p=2545

Sponsor Flip Wall With jQuery & CSS, es una propuesta muy interesante, usando PHP, CSS y jQuery con la Flip jQuery plug-in nos permite crear animaciones sobre las marcas de nuestros patrocinadores agregando contenido adicional. El código resultante se puede utilizar para mostrar patrocinadores, clientes o cartera de proyectos también. Observen esta propuesta, porque es realmente fabulosa.
Ver Demo - Descarga Script - Mas Info Sponsor Flip Wall

PLAIN TEXT

JavaScript:

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

PLAIN TEXT

JavaScript:

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

]]> http://xyberneticos.com/index.php/2010/09/10/sponsor-flip-wall-with-jquery-css/feed/ 0 http://xyberneticos.com/index.php/2010/09/10/flickr-feed-jquery-plugin/ http://xyberneticos.com/index.php/2010/09/10/flickr-feed-jquery-plugin/#comments Fri, 10 Sep 2010 13:27:32 +0000 Nikko http://xyberneticos.com/?p=2540

A menudo trabajamos con clientes que mantienen cuentas en Twitter, Flickr, Youtube y otros servicios, además de su página web, y desean llevar todo ese contenido que suben a redes sociales, directamente a sus web. Con Flickr, esto es bastante fácil ya que proporcionan un simple API fácil de utilizar. Lo novedoso es que desde gethifi, luego de haber trabajado con ella unas cuantas veces, decidieron hacer aun más fácil este mecanismo de obtener las imágenes de una alimentación pública en Flickr, mediante jflickrfeed.min.js, un plugin jQuery que hace que sea fácil leer feeds Flickr y mostrarlos en su sitio.

Ver Demo - Descarga Script - Mas info A jQuery Flickr Feed Plugin

PLAIN TEXT

JavaScript:

/*
Basic Use
*/

$('#basicuse').jflickrfeed({
    limit: 14,
    qstrings: {
        id: '44802888@N04'
    },
    itemTemplate:
    '<li>' +
        '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
    '</li>'
});

 /*
Use with ColorBox
*/

$('#cbox').jflickrfeed({
    limit: 14,
    qstrings: {
        id: '37304598@N02'
    },
    itemTemplate:
    '<li>' +
        '<a rel="colorbox" href="{{image}}" title="{{title}}">' +
            '<img src="{{image_s}}" alt="{{title}}" />' +
        '</a>' +
    '</li>'
}, function(data) {
    $('#cbox a').colorbox();
});

 /*
Use with Cycle
*/

$('#cycle').jflickrfeed({
    limit: 14,
    qstrings: {
        id: '37304598@N02'
    },
    itemTemplate: '<li><img src="{{image}}" alt="" /><div>{{title}}</div></li>'
}, function(data) {
    $('#cycle div').hide();
    $('#cycle').cycle({
        timeout: 5000
    });
    $('#cycle li').hover(function(){
        $(this).children('div').show();
    },function(){
        $(this).children('div').hide();
    });
});

]]> http://xyberneticos.com/index.php/2010/09/10/flickr-feed-jquery-plugin/feed/ 3