]
TooLBoXBLoG

martes, 4 de noviembre de 2014

Kwicks: imágenes deslizantes

TUTORIAL
Para añadir el Kwicks nos situamos justo antes de </head> y pegamos el contenido del código que pongo en la siguiente caja. 
(NOTA: Si ya estamos usando jQuery eliminaremos la siguiente línea del código.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
Es justo lo que he subrayado en amarillo)

Es justo lo que he subrayado en amarillo)

<style>

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhes_HAsdpNOAlQw8wcenU32PdK9sapLUrXicbALyVrPpUPXSs-ZYA9qruU-2UzFjcWLjqO06-l5D4sUqKtn5__7TUFXCvMrqaR5gVio1xg1meV1IUOEWipI_NuN3uYWYzxym3stzTIZtM/s1600/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;
}
</style>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

 <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(&#39;.kwicks&#39;).kwicks({
                               max: 750,
       duration: 1000
                });
               
jQuery(&quot;.kwik&quot;).hoverIntent(function() {
                jQuery(this).children(&quot;.kwikmet&quot;).fadeIn(&quot;slow&quot;) ;
                }, function() {
                jQuery(this).children(&quot;.kwikmet&quot;).fadeOut(&quot;3000&quot;);
                });
});          
</script>


Guardamos los cambios y con esto ya hemos puesto el efecto, ahora se trata de poner las imágenes y direcciones en ese slider Kwicks  y en el lugar del blog que nos interesa. El siguiente código se puede insertar en; 
  • en plantilla de diseño; editamos un gadget de HTML justo después de la cabecera. En su interior añadimos el código que va a continuación.
  • o directamente en una página o entrada, editando en html.(Tal y como he hecho yo en esta página)
(Aconsejo pegar este código en un word y hacer los cambios antes de pegarlo en el blog, más que nada porque he coloreado lo que se debe cambiar para personalizarlo, pero al insertar en el blog los colores desaparecen)

<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div>


Ahora se trata de poner nuestras imágenes y enlaces:
  • <a href='#'> --> Poner aquí # la dirección donde enlaza. Fijarse que se repite dos veces en cada imagen, una enlaza al pinchar sobre la imagen y la otra sobre el título contenido, por lo tanto se trata de poner dos veces la misma dirección, o si se quiere poner en la dirección que enlaza a título un enlace a una galería de imágenes o de la propia imagen.
  • Url-imagen: Aquí se pega la dirección o URL de la imagen. Nuestra imagen ha de ser de 750 x 256 para que no se deforme en este contenedor. (a no ser que le cambiemos las medidas al contenedor)
  • Título-contenido: Aquí escribimos el Título.
  • Texto-contenido: Aquí escribimos el texto que explique de que va la página a la que se enlaza o lo que se quiera poner.
Otras modificaciones de estilo que podemos hacer:
Si deseamos suprimir la sombra del borde nos ubicamos en los estilos "slidearea" y eliminamos lo marcado en negrita, también podemos añadir otros tipos de borde, por ejemplo;
#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;
}


Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)