Afortunadamente, la adición de una galería de jQuery no tiene que ser difícil, incluso si no tienes mucha experiencia con JavaScript y jQuery, nos permitirá transformar cualquier lista en un Slide, utilizando solo texto o inclusive con nuestras imágenes y generando la paginaciones automáticamente.

A continuación el más poderoso, creativo y más versátil lista de los plugins y tutoriales construido usando jQuery.

Nivo Slider

Rotador de imagen con descripción

Slide Deck

Galleriffic

GalleryView tiene como objetivo proporcionar a los usuarios jQuery con una galería flexible, contenidos atractivos a la vez fácil de implementar y muy fácil de personalizar.

Cajas y Leyendas deslizante con jQuery

Coda Slider Effect

Beautiful jQuery slider tutorial

ImageSwitch

wSlide

¿Cómo Utilizarlas?

Primeramente descargamos las acciones, luego las guardamos en la carpeta donde está instalado photoshop lo normal es:

C:\Program Files\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos\Acciones

Para ejecutarlas vamos al menú Ventana opción Acciones; aparecerá una ventana flotante o simplemente con la tecla F

Descargar

Descargar

Descargar

Descargar

Descargar

Descargar

Descargar

Dentro de Head:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.anythingslider.js"></script>
<script>
$(document).ready(function(){
function formatText(index, panel) {
return index + "";
}
$('#featured-section').anythingSlider({
easing: "swing", autoPlay: false, animationTime: 600,
buildNavigation: false, navigationFormatter: formatText});
});
</script>

Descargar: jquery.min.js y jquery.anythingslider.js

Para logar que salga un límite del contenido del post usaremos la siguiente función; ” 200″ es igual a 200 caracteres para mostrar.

Dentro de functions:

<?php
function limitarContent ($leermas, $limite) {
if(strlen(get_the_content()) >200) :
$content = get_the_content($leermas);
$content = substr($content,0,$limite);
$morelink = '<a href="'.get_permalink().'">Leer mas...</a>';
$content= $content." ...".$morelink;
else :
$content = the_content();
endif;
return $content;
}
?>

En donde quieras que salga la animación carousel de jquery con la lista de los post destacado, lo común es en el index.php y saldrá en el primer sitio del blog.

<div id="featured-section">
<div>
<ul>
<?php $reciente = new WP_Query("cat=1&showposts=3&orderby=rand");
while($reciente->have_posts()) : $reciente->the_post();?>
<li>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<p>Guardado en: <?php the_category(', ') ?></p>
<p><?php echo limitarContent('Leer mas &rarr;', 400)?></p>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>

“Cat=1″ seria la id de la categoría que deseas mostrar como Destacados, para obtener la ID  diríjase a wp-admin -> categóricas -> seleccione la categoría a destacar -> y en la barra de direcciones mostrará un numero, esa es su categoría.

CSS

body {
margin:20px;
font-family:"Lucida Grande",
"Lucida Sans Unicode",
Arial, Helvetica, sans-serif
}

p {
font-size:12px;
line-height:18px;
margin:7px 0;
padding:0
}

#destacados {
background:url(destacados.png);
margin:0 auto;
height: 150px; width: 900px;
position: relative;
}	

#destacados .wrapper {
width: 880px;
overflow: auto;
height: 130px;
margin: 10px;
position: absolute; top: 0; left: 0;
}
#destacados ul {
height: 130px;
width: 99999px;
list-style: none;
position: absolute; top: 0; left: 0;
margin:0; padding:0;
}
#destacados li {
overflow: hidden;
float: left;
width: 880px;
height: 130px;
display: block;
}
#destacados .arrow {
display: block;
text-indent: -9999px;
position: absolute; top: 45px;
cursor: pointer;
}
#destacados .arrow {
background: url(boton.png) no-repeat;
height: 60px; width: 29px;
}
#destacados .forward {
background-position: -30px 0;
right: -29px;
}
#destacados .back {
background-position: 0 0;
left: -29px;
}
#destacados h2 {
font: 26px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
color:#ccc
}
#destacados h2 a {
color: #fff;
text-decoration:none;
margin-left:10px;
}
#destacados p {
font-size:12px;
color:#fff;
margin-left:10px;
}
#destacados p a {
color:#fff;
font-weight:bold;
text-align:justify
}

Demo | Descargar

<a onclick="javascript:window.location.href='http://www.google.com'
"target="_blank">Google</a>

JQuery Accordion

De hecho, también ellos hacen uso de estos portafolios, la creación de un lindo conjunto de iconos, un perfecto trabajo de diseñadores y un poderoso instrumento, lo mejor que son de uso libre para construir nuestros sitios webs o aplicaciones personales o comerciales.

Silk

Diseñado por FamFamFam
Clic para descargar

32px mania

Diseñado por Midtone Design
Clic para descargar

Danish Royalty

Diseñado por JonasRask Design
Clic para descargar

178 Set iconos WooFunction

Diseñado por Function
Clic para descargar

Quartz Icon Pack

Diseñado por GraphiCrating
Clic para descargar

Fugue Icons

Diseñado por Pinvoke
Clic para descargar

Digona Icons

Diseñado por Pinvoke
Clic para descargar

Flavour Extended

Diseñado por Oliver Twardowski
Clic para descargar

Diseñado por Function
Clic para descargar

LED Icon Set

Diseñado por Aleksandr Kozmenko.
Clic para descargar

1000 Free “Farm-Fresh Web Icons”

Diseñado por FatCow
Clic para descargar

25 Iconos por monofactor

Diseñado por MonoFactor
Clic para descargar

Feed Icons 2

Diseñado por Zeusboz Studio
Clic para descargar

Web Injection

Diseñado por Midtone Design
Clic para descargar

Sidebar Replacements

Diseñado por Taylor Carrigan
Clic para descargar

Bright!

Dideñado por Icon Eden
Clic para descargar

Click en la imagen para descargar

Estaremos cada cierto tiempo con idea, tutoriales y artículos que pueden ser de su interés.

Linkeanos –  Colorizate!  www.colorizate.com

Feed entradas : http://feeds.feedburner.com/colorizate
Feed comentarios : http://feeds.feedburner.com/ComentariosParaColorizate

Facebook: http://www.facebook.com/colorizate

Twitter: http://twitter.com/colorizate