[Jquery] Slide de imagenes elegante

<div id='slidearea'><br /><ul class='kwicks'><br /><li class='kwik'><br /><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /><br /><li class='kwik'><br /><a href='#'><br /><img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" /><br /></a><br /><br /><div class='kwikmet rounded'><br /><h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2><br /><p>Texto-contenido</p><br /></div><br /></li><br /></ul><br /><br /><div class='clear'/><br /></div></div>
[quote][/quote]

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'><!--//--><![CDATA[//><!--
/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne <brian@cherne.net>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
//--><!]]></script> <script type='text/javascript'><!--//--><![CDATA[//><!--
/*
   Kwicks for jQuery (version 1.5.1)
   Copyright (c) 2008 Jeremy Martin
   http://www.jeremymartin.name/projects.php?project=kwicks
   
   Licensed under the MIT license:
      http://www.opensource.org/licenses/mit-license.php

   Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//--><!]]></script> <script type='text/javascript'>
jQuery().ready(function() {
jQuery('.kwicks').kwicks({
      max: 750,
       duration: 1000
   });
   
jQuery(".kwik").hoverIntent(function() {
   jQuery(this).children(".kwikmet").fadeIn("slow") ;
   }, function() {
   jQuery(this).children(".kwikmet").fadeOut("3000");
   });
});   
</script> <style type="text/css">
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TMB2jzuRRlI/AAAAAAAABrY/QmZFEF8AFlw/s000/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

margin:0;
    padding: 0;
}
</style>

<div id="slidearea">
<ul class="kwicks">
    <li class="kwik"><a href="#">             <img style="width: 750px; height: 250px;" src="http://1.bp.blogspot.com/_q4j3j-JA2ro/TMhoXH1SI1I/AAAAAAAAP3Y/AYJ5xqKB43c/s0/27-10-2014.jpg" class="slidimg" alt="" />       </a>
    <div class="kwikmet rounded">
    <h2><a title="xxxx" rel="bookmark" href="#">Sit amet felis. Mauris semper, velit semper laoreet dictum</a></h2>
    <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...</p>
    </div>
    </li>
    <li class="kwik"><a href="#">             <img style="width: 750px; height: 250px;" src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TMhDelwPtFI/AAAAAAAAP2o/a5rGhn2cTkU/s0/27-10-2010+17.10.31+2.jpg" class="slidimg" alt="" />        </a>
    <div class="kwikmet rounded">
    <h2><a title="permanent link to category name clash" rel="bookmark" href="#">Category name clash</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. ...</p>
    </div>
    </li>
    <li class="kwik"><a href="#">              <img style="width: 750px; height: 250px;" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/TMhDfdrgnuI/AAAAAAAAP2s/-swKsh6emOs/s0/27-10-2010+17.10.40+1.jpg" class="slidimg" alt="" />       </a>
    <div class="kwikmet rounded">
    <h2><a title="permanent link to test with enclosures" rel="bookmark" href="#">Test with enclosures</a></h2>
    <p>Here's an mp3 file that was uploaded as an attachment:  Juan Manuel Fangio by Yue  And here's a link to an external mp3 file:   Acclimate by General Fuzz   Both are CC licensed.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, ...</p>
    </div>
    </li>
    <li class="kwik"><a href="#">             <img style="width: 750px; height: 250px;" src="http://2.bp.blogspot.com/_q4j3j-JA2ro/TMhkaDpN_eI/AAAAAAAAP24/TA_-YItCeJY/s1600/27-10-2010+17.10.2+1.jpg" class="slidimg" alt="" />       </a>
    <div class="kwikmet rounded">
    <h2><a title="permanent link to block quotes" rel="bookmark" href="#">Block quotes</a></h2>
    <p>Some block quote tests: Here's a one line quote. This part isn't quoted.  Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, ...</p>
    </div>
    </li>
    <li class="kwik"><a href="#">             <img style="width: 750px; height: 250px;" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/TMhmbAt6H-I/AAAAAAAAP3Q/_RmjPDAjrh4/s0/27-10-2011.jpg" class="slidimg" alt="" />       </a>
    <div class="kwikmet rounded">
    <h2><a title="permanent link to contributor post, approved" rel="bookmark" href="#">Contributor post, approved</a></h2>
    <p>I'm just a lowly contributor.  My posts must be approved by the editor.Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at ...</p>
    </div>