domingo, 29 de enero de 2012

Slider de imágenes para tu blog, foro, web... etc.

Konichiwa ^^
Por una petición que me ha hecho un amigo mangaka en Kagiru os voy a dar los códigos para poner una caja con una sucesión de imágenes (slider) en vuestro blog, foro, web... etc. El ejemplo de este slider lo podéis ver en mi propio blog :D 






1º Diseño > Edición de HTML y antes de </head> pegas lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]--> 

<script type='text/javascript'> 
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script> 

<script type='text/javascript'> 
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1 
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

2º Antes de ]]></b:skin> pegas esto:
/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjde6nOX-iR9RcwMGAnGENj-CkIz2y-KGtlmkh0hseW_KXF27w3Rn8xW8I9eXGBd52x_N8QnfBsrDr60O3fhvzvXbhsyWAQgENaoP93LxCl0SxL1P2ayJFU6FTQbIPjAeujCf59_MMQMOOW/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HZyPOs1aWokao0wgMz3m9Q7fkgT4rDzr5YGbgks__mcTkIX4xE1V9crq9mqYL6ohTNWBmhcnRKBw-qONQOzAAh-p4UDKXdTD75hNPbmyiJSOKvW6Hi6iI4s-qh0ZQrJrKfZL16WQ2oFq/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVyjV5SwD3P0hL3lIQ_Kslbiq7colVezAREs1Z4yapi10cnXtfvcSYGRbaqlXUFOBV0P1lhb5AlNWtdQkCKK0bHX7tbPIo1dvBLDHCFi0eETHjPopUBMswzyUtbqC1wnA4XCBKP0Jzif5J/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCA3Qi6KJKJjxDkoUAZSAVejq7IQiQIH2vnnEn3Ict07JQcBRO7zQ2iEUeb4eoJqHmXk0RXKmGhOOj-EWk9sIlbYj629sUokgMGk0fNwqYUj-LuG4_3e1VGUzztiOd53ZTDwYnB39JcdV7/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0elyU7OK9BsXENMnPJkVTWHHRL_tv16qLmCYqClunh7aLDXDo2UqanaOcXhBcx8DunQI7yfk7_qBv3J04RaQ8arD-GiFO6j8_sOA3gCoye11ZU1Tb8rb3Ro9HCL9ZE6TPVKg9GfJDJ36/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4GSzVytCt2cIZuyVSALPMWeYPHzy43EL9vNFTLopb7q-n6JJhqM2eO_xIA3Sj9cOgfVxTSrUTEk9CZ1ceKyyjWHTm1zN8nls65IjFOhyphenhyphen54qtAkTa1zQucFyyFEABJkzKmuunmLr_CrAD/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }
Ya hemos acabado con la edición de HTML

3º Ahora vas a Diseño > Elementos de la página >Añadir un gadget > HTML/Javascript y pegas este código:
<div id='featured'>

<a href="URL del enlace"><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a> 
<span class='orbit-caption' id='foto1'>Descripción de la foto</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'> Descripción de la foto </span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'> Descripción de la foto </span> 

</div>
Donde pone URL del enlace y URL de la imagen lo borráis y ponéis la dirección de la fotografía que queráis, en los dos la misma dirección. ATENCIÓN: no borréis las comas "____"
Donde pone Descripción de la foto pues es evidente, tenéis que poner una breve descripción o un título.
Donde pone rel='foto1'  y  id='foto1' lo dejáis como está.
Para añadir más fotografías sólo tenéis que copiar y pegar esto: 

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'> Descripción de la foto </span> 

Os recuerdo que tiene que ser por encima de </div> y tenéis que añadirle el número de la próxima fotografía que os toque, por ejemplo la siguiente sería la cuarta foto, por tanto tendría que poner: rel='foto4'  y  id='foto4'


Espero que os haya resultado de utilidad ^^ Dad las gracias a El Potro, el mejor bloggero del mundo mundial!! ya que él ha sido el creador de este slider tan magnífico.
Escrito por
Etiquetas:

2 comentarios:

  1. Anónimo7 de febrero de 2012, 15:19

    Gracias, llevaba mucho tiempo buscando un slider tan chachi como ese :D

    ResponderEliminar
    Respuestas
    1. Ade25 de abril de 2012, 21:46

      De nada ;D Te aconsejo que te pases por Ciudad Blogger, ahí encontrarás multitud de códigos para mejorar tu blog ^^

      Eliminar

Suscribirse a: Enviar comentarios (Atom)