All for Joomla All for Webmasters

Nivo Slider

Nivo Slide é um slide muito lindo e seu exemplo pode ser visto aqui. Além disso, você pode colocar setinhas nele, para que o visitante do blog vá passando as imagens.

1. Cole isso depois da tag <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://sugar-dance.org/nivo.js"></script>
<script type="text/javascript">
		var $nv4wp = jQuery.noConflict();
		$nv4wp(window).load(function() {
			$nv4wp('#slider').nivoSlider({
				effect:'random',
				slices:15, // For slice animations
				boxCols: 4, // For box animations
				boxRows: 2, // For box animations
				animSpeed: 500, // Slide transition speed
				pauseTime: 3000, // How long each slide will show
				startSlide:0, // Set starting Slide (0 index)
				directionNav:true, //Next & Prev
				directionNavHide:true, //Only show on hover
				controlNav:true, // 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:true, //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
				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>

2. Cole isso no seu CSS:

#slider {position:relative;}
#slider img {position:absolute; top:0px; left:0px; display:none;}
#slider a {border:0; display:block;}
.nivoSlider {position:relative; width: 356px;}
.nivoSlider img {position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0;
padding:0;margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px; bottom:0px; background:#000; color:#fff; text-transform: uppercase; width: 100%;
z-index:50; border-right: 5px solid #;padding: 5px 0;}
.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;}
.slider a {border:0;display:block;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(http://media.tumblr.com/tumblr_m5sfxp36Ay1r5ehrc.png) no-repeat;text-indent:-9999px;border:0;
}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {	left:15px;}
.nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.nivo-caption a {color:#efe9d1; text-decoration:underline;}

3. E para finalizar, cole isso onde quer que apareça o slide:

<div id="slide"><div id="slider">
<a href="http://link" target="_blank"><img src="http://imagem.com" width="763" height="277" /></a>
<a href="http://link" target="_blank"><img src="http://imagem.com" width="763" height="277" /></a>
<a href="http://link" target="_blank"><img src="http://imagem.com" width="763" height="277" /></a>
</div></div>

♥ Se você quiser colocar uma descrição no slide, é só colocar title=”texto” no HTML final, como mostra abaixo:

<a href="http://link" target="_blank"><img src="http://imagem.com" width="763" height="277" title="texto"></a>

♥ Se sua imagem for 400×200, é só alterar o tamanho como mostra abaixo:

<a href="http://link" target="_blank"><img src="http://imagem.com" width="400" height="200" title="texto"></a>

Pronto? Espero que tenham gostado! Dúvidas no ask-me, por favor *-*

Recommended links