[TUTORIAL] Colocando Nivoslide de graça
Enviado: 15 Nov 2010, 21:26
bom, algumas pessoa pode ter visto o tema default2 que vem um slide bem legal e bonito
é o nivoslide, mais ele como modulo é pago no site do opencart
quem quiser, pod facilmente pega o modulo homeslide e muda os js,
mais eu gosto de modificar o oc pois acho que fica mais rapido o carregamento
vamos la, primeiro baixa o codigo nivoslide aqui
depois, copia a pasta que vc baixou "nivo-slider" para catalog\view\javascript
editando:
1. vai em: catalog\view\theme\default\template\common\header.tpl qualquer lugar antes do </head>, adicione:
depois do <div id="content">, adicione:
3. depois de fazer o segundo passo, apos o </div>, adicione
lembrando, que o css do nivo é padrão como baixou, se quiser muda algo, soh editar o css
e se quiser o css igual do site do nivo e do template default2
subtitua este css pelo que vem junto quando baixa:
fiz este tuto a pedido de um membro do ocbr
é o nivoslide, mais ele como modulo é pago no site do opencart
quem quiser, pod facilmente pega o modulo homeslide e muda os js,
mais eu gosto de modificar o oc pois acho que fica mais rapido o carregamento
vamos la, primeiro baixa o codigo nivoslide aqui
depois, copia a pasta que vc baixou "nivo-slider" para catalog\view\javascript
editando:
1. vai em: catalog\view\theme\default\template\common\header.tpl qualquer lugar antes do </head>, adicione:
Código: Selecionar todos
2. provavelmente, vc vai adicionar o slide na home, então vai: catalog\view\theme\default\template\common\home.tpl<link rel="stylesheet" href="catalog/view/javascript/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<script src="catalog/view/javascript/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>depois do <div id="content">, adicione:
Código: Selecionar todos
e selecione as img que vc quiser, e o caminho dela<div id="slider">
<img src="img.jpg" />
<img src="img.jpg" />
<img src="img.jpg" />
<img src="img.jpg" />
</div>3. depois de fazer o segundo passo, apos o </div>, adicione
Código: Selecionar todos
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //escolha sua preferecia, o random significar que são todos: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //velocidade da transição da img
pauseTime:3000,
startSlide:0, //quando carrega, qual img aparece primeiro (0 é a primeira)
directionNav:true, //para link de proximo e anterior
directionNavHide:true, //parar se passa o mouse
controlNav:true, //1,2,3...
controlNavThumbs:false, //nao testei e nao sei pra que serve, deixa padrão
controlNavThumbsFromRel:false, //nao testei e nao sei pra que serve, deixa padrão
controlNavThumbsSearch: '.jpg', //nao testei e nao sei pra que serve, deixa padrão
controlNavThumbsReplace: '_thumb.jpg', //...nao testei e nao sei pra que serve, deixa padrão
keyboardNav:true, //usar setas do teclado para passar
pauseOnHover:true, //parar animação ao mouse por cima
manualAdvance:false, //nao testei e nao sei pra que serve, deixa padrão
captionOpacity:0.8, //opacidade, nao testei
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //nao testei e nao sei pra que serve, deixa padrão
lastSlide: function(){}, //nao testei e nao sei pra que serve, deixa padrão
afterLoad: function(){} //nao testei e nao sei pra que serve, deixa padrão
});
});
</script>lembrando, que o css do nivo é padrão como baixou, se quiser muda algo, soh editar o css
e se quiser o css igual do site do nivo e do template default2
subtitua este css pelo que vem junto quando baixa:
Código: Selecionar todos
-- #slider{position:relative;min-height:220px;background:#202834 url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;margin:0px 0px 50px;}
#slider img{position:absolute;top:0;left:0;display:none;}
#slider a{border:0;display:block;}
.nivo-controlNav{position:absolute;left:47%;bottom:-30px;}
.nivo-controlNav a{display:block;width:10px;height:10px;background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;position:relative;z-index:99;cursor:pointer;}
.nivo-controlNav a.active{background-position:-10px 0;font-weight:700;}
.nivo-directionNav a{display:block;width:30px;height:30px;background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;text-indent:-9999px;border:0;position:absolute;top:45%;z-index:99;cursor:pointer;}
a.nivo-nextNav{background-position:-30px 0;right:15px;}
a.nivo-prevNav{left:15px;}
.nivo-caption a{text-decoration:underline;display:inline !important;}
.nivoSlider{position:relative;}
.nivoSlider img{position:absolute;top:0;left:0;}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:60;display:none;margin:0;padding:0;}
.nivo-slice{display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;opacity:0.8px;width:100%;z-index:89;}
.nivo-caption p{margin:0;padding:5px;}
.nivo-html-caption{display:none;}
.nivo-prevNav{left:0;}
.nivo-nextNav{right:0;}fiz este tuto a pedido de um membro do ocbr
