18, Apr 2013

Eu estava procurando sobre isso, até achar um lugar onde o guri ensinou como deixar, dai fucei o js do negocio todo até achar e consegui deixar os arrows fixos. Já perguntaram aqui se tinha como fazer isso, eu disse que sim, mas que ainda não sabia como fazer tal coisa. Pra quem quiser, esse é o JS com os arrows fixo, dai só usar no lugar daquele outro.

<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://static.tumblr.com/t0iuumg/4ARmldwcf/nivo.js"></script>
<script type="text/javascript">
        var $nv4wp = jQuery.noConflict();
        $nv4wp(window).load(function() {
            $nv4wp('#slider').nivoSlider({
                effect:'random',
                slices:15,
                boxCols: 4,
                boxRows: 2,
                animSpeed: 600,
                pauseTime: 3000,
                startSlide:0,
                directionNav:true,
                directionNavHide:true,
                controlNav:true,
                controlNavThumbs: true,
                controlNavThumbsFromRel: true,
                controlNavThumbsSearch: '.jpg',
                controlNavThumbsReplace: '_thumb.jpg',
                keyboardNav:true,
                pauseOnHover:true,
                manualAdvance: false, 
                captionOpacity:0.5,
                prevText: 'Prev',
                nextText: 'Next',
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){},
                lastSlide: function(){},
                afterLoad: function(){}
            });
        });
        </script>

x

4, Dec 2012
pode dizer como?
Volte sempre Anonymous há 5 months ago

Os efeitos do nivo são:

  • random
  • sliceDownRight
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

A parte do js, tem isso:

<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: 2000, // 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.5, //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>

Se você procurar por effect, vai ver que tem um random, certo? Dai se você por qualquer outro efeito no lugar de random, vai pegar apenas aquele efeito. O random faz pegar todos, aleatoriamente.

16, Oct 2012
pra colocar o nivo no wp é do mesmo jeitinho do tuto q tem aqui? não precisa mudar nada? é pq to tentando por e não vai :/
Volte sempre nomatterwhatwebreed há 7 months ago

É sim, sabe a parte do JS? Então, usa esse com minhas modificações, deixei bem lento e fofo:

<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://static.tumblr.com/tx5g7yp/Az3m9xml4/jquery.nivo.slider.pack.js">
</script>
<script type="text/javascript" src="http://static.tumblr.com/tx5g7yp/zdnm9yjpf/slider.js"></script>

Dai o resto você usa normalmente. O Js fica em header.php e o style no style mesmo. ^^

16, Oct
2012

PSDS EFECT: Bom, eu resolvi postar efeitos para slider agora. Muita gente deixa o slider fofo, com efeito e tudo mais. Dai resolvi postar o jeito que sempre gosto de fazer. Pode usar com o efeito colorido e sem, também.

Rápido / Mediafire

20, Sep
2012

Bom, a pedidos eu fiz alguns arrows para nivoslider. Vou ensinar a vocês algumas coisas do css do nivo que não ensinei quando fiz o tutorial. Alguns arrows eu fiz com direção errada, então se quiserem mudar pelo ps, fica a vontade.

Download.

CSS explicação:

Na parte do css do nivo, temos isso aqui:

/*=== Custom Slider Styles ===*/
/*============================*/
.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(URL DO ARROW AQUI) 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;}

Estão vendo aquele: .nivo-directionNav a onde tem valores com width e height e logo em seguid um background com a url da imagem do arrow, certo?

Então, a gente pode mexer naquele. Por exemplo, vou pegar o arrow de numero 01. Vou abri-lo no ps e ver qual o tamanho do WIDTH que ele tem. Lá eu vejo que é 72. Então, 72 dividido por 2 é quanto? 36 não é? Então, no width do .nivo-directionNav a a gente vai colocar 32px; e em height a gente vai colocar o valor que ele tem mesmo, o daqui é 36, então em height vai ser 36px. Upamos nosso arrow aqui e colocaremos ele no local onde fica a imagem do arrow.

Logo abaixo temos o  a.nivo-nextNav lá temos um background-position com o valor que esta em negativo. Então, você vai por ali o valor que você dividiu do seu arrow inteiro, ou seja -32px. Note que temos um left e right com valor certo? Se você aumentar o arrow vai andar, o do tthy esta em 0 por isso fica juntinho da imagem do slider. Então, se querem igual, só tirar o valor do left e right que ficará legal.

Bom, é isso. Qualquer coisa só gritar aqui que respondo. Beijos, D.

7, Sep 2012
Como fizeram isso no slider através do title? Tipo, um título sublinhado, e embaixo, um subtitulo. Como? :O ficou tão perfeito... Parabens (:
Volte sempre Anonymous há 8 months ago

Não tem o .nivo-caption na parte de css do nivo? Então, dai eu acrecentei lá:

.nivo-caption b {
letter-spacing: 3px;
 font-style: normal;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 14px; text-transform:uppercase;
color: #416254;
border-bottom: #ccc 1px dotted; }

Coloque isso acima depois do .nivo-caption no css do nivo. Dai você vai editar como desejar, com a cor que quiser.

Caso queiram o meu caption, ele é assim, dai vais precisar tirar o que tem lá ou apenas pegar os elementos de css que fiz:

.nivo-caption {
font-family: Georgia;
font-size: 11px;
font-style: italic;
position:absolute;
left: 0px;
bottom:0px;
background:#fff;
color:#5f5f5f;
width: 100%; z-index:50;
border-right: 5px solid #;
padding: 5px 0;}

Dai na hora de usar, tem a parte do title=”descrição” né? Que é onde o caption fica. Dai naquilo tu faz assim: <b>Titulo</b><br>Descrição.

Vai ficar mais ou menos assim:

<a href="URL" target="_blank">
<img src="IMAGEM" title="<b>TITULO</b><br> Sua descrição!" />

</a>

Isso acima é a parte do link com imagem, onde geralmente vai a descrição. Só isso!

Bom, no caption b, eu usei uma font personalizada, dai ela é essa:

Coloque isso antes de </head>

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700t" rel="stylesheet" type="text/css">
6, Sep 2012
Oi, eu queria criar tipo um livro online, sabe o NivoSlider? Então, daí eu tiro print das imagens, e coloco tudo lá, mas não sei como fazer o Nivo parar de troca de img sozinho, eu sei que é meio impossível , mas já pensou que foda...
Volte sempre Anonymous há 8 months ago

Oins :) Primeiro essa é a page do nivoslider, (espero que leiam o começo e morram depois) pra quem não sabe. Então, amore, na parte do script do nivo, tem essa parte:

<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: 2000, // 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.5, //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>

Então vou te explicar:

Procure por: pauseTime

Logo a frente de pausetime tem uma numeração, isso que determina a velocidade que seu slide vai ter. Ou seja, diminua para ver que ele vai passar mais rápido. Coloque um 300 e veras que vai ser muito rápido. Então, como você quer fazer um livro, aumentando aquela numeração para um valor ABSURDO, que dai vai da tempo da pessoa ler aquela página do livro e mudar pelos arrows que ficam no ladinho. :D

Procure também por: animSpeed

Em animSpeed, que fica logo acima de pausetime, isso determina a valocidade que as animações vai ter. Ou seja, diminua e veja que a trasição das imagens vão ficar mais rápidas. Deixe como desejar.

Bom é isso, eu fui mexer nos códigos até saber como eles funcionavam e consegui. ;*

17, Jun 2012

Bom, pra usar, basta salvar a imagem upar ela onde você quer, e trocar no css do nivoslider.

26, Apr 2012
gente, podem me ajudar? como coloco o nivo slider no header do tema? Obrigada (:
Volte sempre n-e-w-c-h-a-n-c-e há 1 year ago
#meuslide 
{position: absolute;
top: numeropx;
left: numeropx;
width: numeropx;
height: numeropx;}

Dai você da valores ao top e left, até ficar no lugar em que você quer. E para usar você vai ter que colocar isso dentro da vid do seu header:

<div id="meuslide">
conteudo do seu slide
</div>

Se a div não aparecer na dash, entra no TTHY.

5, Apr 2012

Oi, tudo bom com vocês? Sim, que bom. Então, vou ensinar como faz o slide daqui, o nome desse slide é NIVO. Ele é um plugin pra wordpress que é facilmente achado no google…na página dele mesmo. Lá, existem vários exemplos de como a gente pode usar. Tem com ribbons, com caixa e sombra…mas aqui vou ensinar o modo simples. O modo que vocês pegariam rápido.

Veja como funciona aqui!

Todo slide precisa de um script, e esse não é diferente. Coloque antes de </head> isso aqui:

<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://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.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>

CSS:

Coloque antes de </style>

/* The Nivo Slider styles */
#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;} /*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/ .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;}

Onde tem background:#000; color:#fff; é a cor do caption, você pode mudar como preferir. Vamos agora ao HTML, ou seja, as divs pra que o slide apareça. Bom, agora é o simples.

<div id="slide"><div id="slider">
<a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/P5Qm20oxb/untitled-9.png" width="763" height="277" /></a>
<a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/PdVm20p29/untitled-9.png" width="763" height="277" /></a>
<a href="OLINK" target="_blank"><img src="http://static.tumblr.com/ifqwhnb/Kbhm20p8r/untitled-9.png" title="Com Caption :D"width="763" height="277" /></a>
</div></div>

Você sempre precisa definir o valor da altura e largura da sua imagem, ou seja, onde tem width=”763” height=”277” você pode colocar o valor da sua imagem. Esse código ai, foi o que eu usei na página de visualização.

Para posicionar onde você quer, você precisa usar um div position, outra div antes de <div id=”slide”>. Não esqueça nunca fechear a div, okay?

Qualquer coisa, só gritar aqui que explico qualquer dúvida.

For you will be my love and I will feel your heartbeat...forevermore, rest here in my arms... 21 ♡
♥_♥
Estamos também em:
youtube twitter facebook vimeo
O que o tthy representa pra você?
Ele representa uma grande ajuda, um grande aprendizado, um grande amigo, um grande tudo. Eu amo o Things to help you.