Quiero compartir un agradable deslizador de imagenes con botones para seleccionar la imagen a mirar,Este widget fue hecho usando jQuery y Css3.Que luce muy atractivo y facil de instalar en tu blog de blogger.Este es facil de configurar y adapatar a las dimencione del area donde lo vayas a mostrar.Podras ponerlo y instalarlo super facilmente.
Imagen slider:Para ver esta galeria de imagenes atractiva con jQuery da clic en esta imagen:
Solo sigue los siguientes pasos para instalar este widget de imagenes deslizables con botones de navegacion.
1. Entra a tu cuenta de blogger
2.Añade un Gadget y selecciona Html/Javascripts
3.Pega el siguiente codigo en espacio de Html/Javascripts
<style type="text/css">Puedes cambiar las Fotos cambiando las Url de las Images.
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_ciudad {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTibL1er429v696DN0XsX9Wvomdp0VieEgLmFernOCZDVjZ-wkEKBJjGeeortQTgDhDlr82iWvLDe0txKupRqQrRsr1rTrKxmRzMw5B7Uaf1zeV88RqAGCv9da0IK1w7e7q1UiWePgS8/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_ciudad a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_ciudad a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_ciudad a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<br />
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWIoOECokUiLP9Ntn8giiIQEs9WW6fmWuXheulqgGlakK4rKVzvpgoTIVHUnktPuc69cKsyL904415-ics4n7WKXWwMHAeFWCuwVsRVkrTG8bwGVdFxA-Rney3MzSgCE_SymeUwkwSQ4/s1600/cara2.jpg" /></a>
<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4e2jnEt0i4s2EMSs6-l_MC1pIE7WQz6iISp7DD672W6oF3LUcPMwTXiqEuzv-iTGjg_Rhoepk7W0PrHpPnJ3u2mFY7tzZ3y9qPQgyyX_hROX0QlTm0FNW42Px6Y3KomIvaCSmbDYhuGM/s1600/cara1.jpg" /></a>
<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUW-De4JWqKvdRGqBX-zHSn9heA6k9THAysp1H1XSIQ9ZA90B7WN9B2WlIcYqqCyM-8DCTk_xPnvtFphIg6ILMJgw4XASAwkICH88genmJn2tuC1xJXStBed1X7DmGkAVzZYiW7z508uI/s1600/cara3.jpg" /></a>
<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlw_dwpSzGG3QwzXr1Rv_26J9W6sq2JnadS3AiYCG7T1AttRlXby7VhfW8mwSyUy5GtUQ2tXJiubtvbqxkzaM8HH-J76lB1TGsnwnofMjFp1b4n-imfbqfcfWILUxhXgg_RaPQyuXHA8/s1600/cara4.jpg" /></a>
</div>
</div>
<div class="paging_ciudad">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_ciudad").show();
$(".paging_ciudad a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_ciudad + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_ciudad a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_ciudad a.active').next();
if ( $active.length === 0) { //If paging_ciudad reaches the end...
$active = $('.paging_ciudad a:first'); //go back to first
}
rotate(); //Trigger the paging_ciudad and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_ciudad a").click(function() {
$active = $(this); //Activate the clicked paging_ciudad
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
Si deseas añadir enlaces a las imagenes solo # reemplaza con los enlaces de tus imagenes.
7. Ahora guarda HTML/Javascript'.
Listo podras disfrutar de tus imagnes en rotacion de una manera automatica..
0 comentarios:
Publicar un comentario