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/14/video-js-reproductor-de-video-en-html5/ http://xyberneticos.com/index.php/2011/01/14/video-js-reproductor-de-video-en-html5/#comments Fri, 14 Jan 2011 04:41:59 +0000 Nikko http://xyberneticos.com/?p=3090

Video JS es un reproductor de video basado en JavaScript que utiliza la funcionalidad de video HTML5 de los navegadores avanzados. En general, la ventaja de utilizar un reproductor de HTML5 es un aspecto coherente entre los navegadores.

WordPress HTML5 Reproductor de vídeo

Para utilizar HTML5 Video en WordPress, necesitaran un plugin adicional. HTML5 video player plugin for WordPress , el plug-in les permitira utilizar la etiqueta [video] para integrar HTML5 Video , y VideoJS para que funcione correctamente.

PLAIN TEXT

JavaScript:

<head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
  ...
<script type="text/javascript" charset="utf-8">
    // Add VideoJS to all video tags on the page when the DOM is ready
    VideoJS.setupAllWhenReady();
  </script>

  </head>

PLAIN TEXT

HTML:

<!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

]]> http://xyberneticos.com/index.php/2011/01/14/video-js-reproductor-de-video-en-html5/feed/ 1 http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/ http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/#comments Thu, 13 Jan 2011 19:30:53 +0000 Nikko http://xyberneticos.com/?p=3087

Custom Animation Banner with jQuery, es una maravillosa idea para crear banner animados, personalizados con jQuery. La idea es contar con elementos diferentes, que irán apareciendo paso a paso o en una secuencia determinada, dependiendo de nuestra personalización. Se ha utilizado jQuery Easing Plugin y  jQuery 2D Transform Plugin para crear esta ingeniosa animación, muy similar a otras realizadas en flash.

Resultado: Demo - Descarga Ficheros Animation Banner

PLAIN TEXT

HTML:

<div id="ca_banner1" class="ca_banner ca_banner1">
    <div class="ca_slide ca_bg1">
        <div class="ca_zone ca_zone1"><!--Product-->
            <div class="ca_wrap ca_wrap1">
                <img src="images/product1.png" class="ca_shown" alt=""/>
                <img src="images/product2.png" alt="" style="display:none;"/>
                <img src="images/product3.png" alt="" style="display:none;"/>
                <img src="images/product4.png" alt="" style="display:none;"/>
                <img src="images/product5.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone2"><!--Line-->
            <div class="ca_wrap ca_wrap2">
                <img src="images/line1.png" class="ca_shown" alt=""/>
                <img src="images/line2.png" alt="" style="display:none;"/>
            </div>
        </div>
        <div class="ca_zone ca_zone3"><!--Title-->
            <div class="ca_wrap ca_wrap3">
                <img src="images/title1.png" class="ca_shown" alt="" />
                <img src="images/title2.png" alt="" style="display:none;"/>
                <img src="images/title3.png" alt="" style="display:none;"/>
            </div>
        </div>
    </div>
</div>

PLAIN TEXT

CSS:

.ca_banner{
    position:relative;
    overflow:hidden;
    background:#f0f0f0;
    padding:10px;
    border:1px solid #fff;
    -moz-box-shadow:0px 0px 2px #aaa inset;
}
.ca_slide{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.ca_zone{
    position:absolute;
    width:100%;
}
.ca_wrap{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.ca_wrap img.ca_shown{
    display:inline !important;
}
/* Custom styles of banner1 */
.ca_banner1{
    width:650px;
    height:300px;
}
.ca_bg1{
    background:#fff url(../images/bg.jpg) no-repeat top left;
}
.ca_banner1 .ca_zone1{
    top:0px;
    left:0px;
}
.ca_banner1 .ca_wrap1{
    width:320px;
    height:300px;
}
.ca_banner1 .ca_zone2{
    top:100px;
    left:240px;
}
.ca_banner1 .ca_wrap2{
    width:387px;
    height:203px;
}
.ca_banner1 .ca_zone3{
    top:32px;
    left:250px;
}
.ca_banner1 .ca_wrap3{
    width:378px;
    height:31px;
}

/*Custom Style for Second Banner*/
.ca_banner2{
    width:120px;
    height:600px;
}
.ca_bg2{
    background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
    top:10px;
    left:0px;
}
.ca_banner2 .ca_wrap1, /*They are the same size*/
.ca_banner2 .ca_wrap2{
    width:120px;
    height:220px;
}
.ca_banner2 .ca_zone2{
    top:250px;
    left:0px;
}

PLAIN TEXT

JavaScript:

$('#ca_banner1').banner({
    steps : [
        [
            //1 step:
            [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
        ],
        [
            //2 step:
            [{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
            [{"to" : "1"}, {}],
            [{"to" : "2"}, {}]
        ],
        [
            //3 step:
            [{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
            [{"to" : "2"}, {}]
        ],
        [
            //4 step
            [{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
            [{"to" : "2"}, {}],
            [{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
        ],
        [
            //5 step
            [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
            [{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
            [{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
        ]
    ],
    total_steps : 5,
    speed : 3000
});

]]> http://xyberneticos.com/index.php/2011/01/13/banner-animado-personalizado-con-jquery/feed/ 4 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