Bienvenida

BIENVENIDO A FAMAG KIRADOBER,

Ultimas Entradas

CARRUSEL DE IMÁGENES CON JQUERY

by - domingo, agosto 04, 2019

CARRUSEL DE IMÁGENES CON JQUERY.



Vamos a ver como crear un carrusel de imágenes con enlaces, creado con CSS y JQuery, que le da un toque especial de animación. ¿Para que nos puede servir? Por ejemplo para enlazar blogs o webs amigas, secciones del blog o incluso a modo de menú.


Para añadirlo en tu blog o web, tienes que ir a la plantilla y antes de </head>, pones el siguiente codigo con los scripts y los estilos.

Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



 Un clic en “Plantilla”

                                                                       

 Un clic en “Editar HTML”

                                                                     

 Ahora se te abrirá el Editor HTML de tu plantilla

                                                                         


En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

                                                                               

  Busca el siguiente código


</head>




Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:






<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script src="https://www.cubby.com/p/ccccb132e8c145c697c06fc9ef44b317/jquery.jcarousel.min.js" type="text/javascript">
</script>
<script src="https://www.cubby.com/p/f48ef5f2671f4d6390d5cfda6a456b10/jquery.jcarousel.js" type="text/javascript">
</script>
<style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;

}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTuEAzJc0FwsTVdX5WrsLxjtCXl7MF48aQn4RNYEZyKPG2tL9XQt63j5JR-RCWqoHLYbhoikGhWy_u5oY2RsNfCL_1SjAYY9FaX8R5MwWoFzeWbU70IRTz8VOXBtwXmhpvqz13VIH_4g/s128/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKjd5i94VeFDiOMR_25QW3n4sydlfg1rmokOq-i_nXP_yx6F5OI7PoOlKxNrcewDtd6VuV33v7FWwFiyaEOw1kXfPyRyOfD_lucBaajsuu6-5PsF3XNH5ojrgD3YVYMBctE1jNh7AyxQ/s128/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKjd5i94VeFDiOMR_25QW3n4sydlfg1rmokOq-i_nXP_yx6F5OI7PoOlKxNrcewDtd6VuV33v7FWwFiyaEOw1kXfPyRyOfD_lucBaajsuu6-5PsF3XNH5ojrgD3YVYMBctE1jNh7AyxQ/s128/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTuEAzJc0FwsTVdX5WrsLxjtCXl7MF48aQn4RNYEZyKPG2tL9XQt63j5JR-RCWqoHLYbhoikGhWy_u5oY2RsNfCL_1SjAYY9FaX8R5MwWoFzeWbU70IRTz8VOXBtwXmhpvqz13VIH_4g/s128/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTuEAzJc0FwsTVdX5WrsLxjtCXl7MF48aQn4RNYEZyKPG2tL9XQt63j5JR-RCWqoHLYbhoikGhWy_u5oY2RsNfCL_1SjAYY9FaX8R5MwWoFzeWbU70IRTz8VOXBtwXmhpvqz13VIH_4g/s128/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKjd5i94VeFDiOMR_25QW3n4sydlfg1rmokOq-i_nXP_yx6F5OI7PoOlKxNrcewDtd6VuV33v7FWwFiyaEOw1kXfPyRyOfD_lucBaajsuu6-5PsF3XNH5ojrgD3YVYMBctE1jNh7AyxQ/s128/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
</style>


Una vez hecho esto, alli donde quieras mostrar el carrusel, añades el siguiente codigo. Donde esta indicado en color rojo, pones las urls de los enlaces y de las imagenes.
 Si quieres poner mas cantidad de imagenes, añades la linea

<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL DE LA IMAGEN" width="75" /></a></li> 

tantas veces como quieras.

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:


1-Un clic en “Diseño”

                                                               

2-Clic en “Añadir un gadget”

                                                                   

3-Busca el widget que dice “HTML-Javascript” y ábrelo

                                                                                   

4-Coloca el siguiente codigo en el interior

                                                                                 


<center><ul class="jcarousel-skin-tango" id="mycarousel">
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
<li><a href="URL ENLACE" target="_blank"><img height="75" src="URL IMAGEN" width="75" /></a></li>
</ul></center>


Despues de haber insertado el código, un clic en  "Guardar"




Fecha de la Publicación;04-08-2019

 Fuente; redeando

 Publicado por;
Tags : , , ,

You May Also Like

0 comentarios

Paginacion

Created with by ThemeXpose