[Hectorsito20]

Craftyslide es un pequeño plugin para jQuery que nos permite crear galerías de imágenes con mucha sencillez ya que basta agregarlas en una lista <li> y llamar a la función, sin importar su tamaño original.

Para utilizarlo, basta descargar el ZIP que contiene el ejemplo básico, tener jQuery en nuestra plantilla y agregar el plugin y el CSS antes del cierre de la etiqueta </head> ya sea copiando y pegando directamente el código o utilizando archivos externos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel='stylesheet' href='URL_craftyslide.css' />

<script src='URL_craftyslide.min'></script>

Código HTML

<div id="slideshow">
<ul>
<li>
<img src="image1.jpg" title="Lorem ipsum dolor sit amet" />
</li>

<li>
<img src="image2.jpg" title="Lorem ipsum dolor sit amet" />
</li>

<li>
<img src="image3.jpg" title="Lorem ipsum dolor sit amet" />
</li>
</ul>
</div>

Código CSS

#slideshow {
margin:0;
padding:0;
position:relative;
border:15px solid #fff;
-webkit-box-shadow:0 3px 5px #999;
-moz-box-shadow:0 3px 5px #999;
box-shadow:0 3px 5px #999;
}

#slideshow ul {
position:relative;
overflow:hidden;
margin:0;
padding:0;
}

#slideshow ul li {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
list-style:none;
}

#pagination {
clear:both;
width:75px;
margin:25px auto 0;
padding:0;
}

#pagination li {
list-style:none;
float:left;
margin:0 2px;
}

#pagination li a {
display:block;
width:10px;
height:10px;
text-indent:-10000px;
background:url(../images/pagination.png);
}

#pagination li a.active {
background-position:0 10px;
}

.caption {
width:100%;
margin:0;
padding:10px;
position:absolute;
left:0;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:lighter;
color:#fff;
border-top:1px solid #000;
background:#000;
background:rgba(0,0,0,0.6);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=60)";
filter: alpha(opacity=60);
}

Y aquí viene lo que le da el toque exencial al tema, el script jQuery

Código jQuery

(function ($) {
$.fn.craftyslide = function (options) {

// Defaults
var defaults = {
"width": 600,
"height": 300,
"pagination": true,
"fadetime": 350,
"delay": 5000
};

var options = $.extend(defaults, options);

return this.each(function () {

// Vars
var $this = $(this);
var $slides = $this.find("ul li");

$slides.not(':first').hide();

// Pagination
function paginate() {
$this.append("<ol id='pagination' />");

var i = 1;
$slides.each(function () {
$(this).attr("id", "slide" + i);
$("#pagination")
.append("<li><a href='#slide" + i + "'>" + i + "</a></li>");
i++;
});

$("#pagination li a:first").addClass("active");
}

// Add captions
function captions() {
$slides.each(function () {
$caption = $(this).find("img").attr("title");
if ($caption !== undefined) {
$(this).prepend("<p class='caption'>" + $caption + "</p>");
}
$slides.filter(":first").find(".caption").css("bot tom", 0);
});
}

// Manual mode
function manual() {
var $pagination = $("#pagination li a");
$pagination.click(function (e) {
e.preventDefault();
var $current = $(this.hash);
if ($current.is(":hidden")) {
$slides.fadeOut(options.fadetime);
$current.fadeIn(options.fadetime);
$pagination.removeClass("active");
$(this).addClass("active");
$(".caption").css("bottom", "-37px");
$current.find(".caption").delay(300).animate({
bottom: 0
}, 300);
}
});
}

// Auto mode
function auto() {
setInterval(function () {
$slides.filter(":first-child")
.fadeOut(options.fadetime)
.next("li")
.fadeIn(options.fadetime)
.end()
.appendTo("#slideshow ul");

$slides.each(function () {
if ($slides.is(":visible")) {
$(".caption").css("bottom", "-37px");
$(this).find(".caption").delay(300).animate({
bottom: 0
}, 300);
}
});

}, options.delay);
}

// Width
$this.width(options.width);
$this.find("ul, li img").width(options.width);

// Height
$this.height(options.height);
$this.find("ul, li").height(options.height);

// Check Boolean values
if (options.pagination === true) {
paginate();
} else {
auto();
}

captions(); manual();

});
};
})(jQuery);

Y al final, llamamos a la función de este modo:
<script> $("#slideshow").craftyslide(); </script>
o establecemos parámetros:
<script>
$("#slideshow").craftyslide({
'width': 550,
'height': 350,
'pagination': true,
'fadetime': 500,
'delay': 2500
});
</script>

donde:
width y height serán el tamaño total (por defecto 640x400)
pagination puede ser false en cuyo caso, funcionará como un slideshow
fadetime es el tiempo de demora entre dos imágenes
delay es el tiempo del slideshow si elegimos esa opción.

Resultado final!