Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

Nivo Slider en Sidebar WordPress

Abr 17, 2012   //   by Diseño Web Roger Soto   //   Programacion  //  4 Comments

La mayoria de los que hacemos Diseño Web y desarrollamos sobre la plataforma de wordpress utilizamos Nivo slider, pero a veces no sabemos implementar Nivo Slider en Sidebar, en este post trataremos de explicar en forma facil y directa como hacerlo.

Bueno primero hay que cerciorarnos de que el nivo slider este cargado para eso vamos al escritorio de wordpres y le damos en apariencia / editor , y al lado derecho buscamos el archivo “header.php” le damos click para editarlo y revisamos que este cargando el siguiente codigo:

 <?php wp_head(); ?>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Luego buscar las imagenes que sean del ancho del sidebar, usualmente 240px;
para este ejemplo usaremos unas imagenes de 240px de ancho por 185px de alto, luego la subimos al nuestro servidor y apuntamos la ruta de las imagenes.

Luego, vamos a ir a panel de administracion / apariencia / widgets, y arrastar el widget que dice “Texto o HTML arbitrario” hacia el lado derecho donde dice sidebar.

y dentro del windgets pegamos el siguiente codigo:

<style>
.theme-default .nivoSlider {
	position:relative;
	width:240px; /* Cambia esto por el ANCHO de tus imagenes */
        height:185px;  /* Cambia esto por el ALTO de tus imagenes */
}

.nivoSlider {
	position:relative;
	width:240px; /* Cambia esto por el ANCHO de tus imagenes */
        height:185px;  /* Cambia esto por el ALTO de tus imagenes */
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	position:absolute;
	left:50%;
	bottom:-42px;
        margin-left:-40px; 
}
.theme-default .nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
	background-image: url(bullets.png);
	background-repeat: no-repeat;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	text-indent:-9999px;
	border:0;
	background-image: url(arrows.png);
	background-repeat: no-repeat;
}
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}
</style>

<div id="slider2" class="nivoSlider theme-default">
  <a href="http://rogersoto.com/ofertas/" target="_blank"><img src="http://blog.rogersoto.com/wp-content/uploads/2012/04/publi01.jpg" alt=""  title=""   /></a>
  <a href="http://rogersoto.com/hosting/" target="_blank"><img src="http://blog.rogersoto.com/wp-content/uploads/2012/04/publi02.jpg" alt=""  title=""   /></a>
  <a href="http://blog.rogersoto.com/servicios/facebook-fanpage/" target="_blank"><img src="http://blog.rogersoto.com/wp-content/uploads/2012/04/publi03.jpg" alt=""  title=""   /></a>
</div>
            
    <script type="text/javascript">
	  $(window).load(function() {
	   $('#slider2').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 5000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

Y Listo con eso deben apreciar un banner como el que aparece en el lado derecho de este post.

Importante: siempre es una buena practica evitar conflictos entre scripts, para eso usamos la opcion de jQuery.noConflict(); , si no tu plantilla da problemas con el codigo anterior reemplaza la parte desde donde dice: script type=”text/javascript” por el siguiente codigo.

  <script type="text/javascript">
      var j = jQuery.noConflict();
       j(window).load(function() {
        j('#slider2').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 5000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

Espero que les sea util y gracias por sus comentarios, este es un aporte Diseño Web Roger Soto

4 Comentarios

  • De 10

  • Aprendi mucho

  • No me sale el slider, solo aparecen las imágenes en fila hacia abajo. ¿Estaré haciendo algo mal?

    • Debe ser que no esta cargando el nivo slider, porfavor carga tu pagina presionas ctrl+u y busca unas lineas parecidas a esta src=”http://tudominio/tuwordpres/tutema/js/jquery.nivo.slider.pack.js”> o algo asi, y que este funcionando, es decir que pudes cargar el nivo en otra pagina y me comentas.

Que opinas de esto?

Publicidad

Siguenos en Facebook

Siguenos en Google+

Youtube