mudar largura da DIV ou da imagem no Nivo-Slider

[samirbh 0]

Ola pessoal,

 

Como faço para diminuir a largura da DIV responsável pelos slides ficarem em rotação??

 

Já tentei via CSS na própria pagina, nos arquivos CSS, já tentei até mesmo no java-script mas não acho nada que mude a largura e nem a altura da pagina, mudei varios parâmetros e fica com a aparência intacta.

 

É algo básico mas engraçado que dentro do Nivo-Slider não há como modificar as dimensões.

 

Alguma sugestão:

Os arquivos CSS e de JS não foram alterados

 

Pagina que é aplicado o HTML

<link rel="stylesheet" href="<?php echo base_url(); ?>css/Slide1/nivo-slider.css" type="text/css" media="screen" />

<div id="wrapper">

       <div id="slider-wrapper">

           <div id="slider" class="nivoSlider">

             <a href="<?php echo base_url(); ?>Arquivos/Avisos/literaturas_para_estudar.pdf" target="_blank"><img src="<?php echo base_url(); ?>images/Slide1/brevevestibular.gif" alt="Vestibular FASEH" title="Vestibular FASEH"  /></a>

             <a href="http://sisfiesportal.mec.gov.br/" target="_blank"><img src="<?php echo base_url(); ?>images/Slide1/dia_fies.gif" alt="Inscrições Fies" title="Inscrições Fies" /></a>

           </div>
           <div id="htmlcaption" class="nivo-html-caption">
               <!--<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.-->
           </div>

       </div>

   </div>
   <script type="text/javascript" src="<?php echo base_url(); ?>/js/jquery.js"></script>
   <script type="text/javascript" src="<?php echo base_url(); ?>/js/Slide1/jquery.nivo.slider.pack.js"></script>
   <script type="text/javascript">
   $(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		boxCols: 3, // For box animations
        boxRows: 1, // For box animations
		animSpeed:1000, //Slide transition speed
		pauseTime:5000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:false, //1,2,3...
		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
		beforeChange: function(){},
		afterChange: function(){},
		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>

[Munir 0]

Nao entendi muito bem.. rsrs

 

Mas para mudar o tamanho dos slides você tem que mudar no css mesmo.

 

No seu caso la no arquivo style.css (o que vem junto com o Nivo) você vai modificar (ou criar) a div "slider"

 

exemplo:

 

#slider{
 width: 300px;
 height: 200px;
 position: relative;

[0cool 0]

Tb não entendi... se não der certo com a ajuda do colega acima, faça uma imagem de como esta e de como você quer chegar, ficara mais fácil para entender o que você esta querendo.

[rumao 1]

beleza galera, alguém teria um exemplo para se implementar o NivoSlider com PHP?

 

vi algo para se fazer com Wordpress, mas estou com uma tabela de depoimentos e gostaria de mostrar eles com o Nivo. sem imagens mesmos só texto.

[11closed 0]

 

Munir

 

 

não deu certo dessa forma

 

porque sera ?

 

t+

 

quando eu coloco uma largura menor do que a imagem não funciona.

 

sera que tem como colocar uma largura e altura fixa independente do tamanha da imagem ?

[Lucas Röhers 0]

Eu também estava come esse problema um tempo atrás e achei a solução em mexendo no #MENU ou no #LOGO do CSS não lembro muito bem mas é em um desses 2 da uma tentada e me avisa valeu!

[adriano ricardo 0]

É simples meu amigo, analisando o código bem rapidamente ele faz um "loop" de acordo com a quantidade de fotos, e pega a altura e largura de cada uma das imagens para reprojetar o slider, então para você personalizar é muito simples, ou via css (não é seu caso, e também vale lembrar que tem o css do tema! um pode estar sobrescrevendo o outro) ou então mudando o tamanho das imagens, lembrando que todas tem que ser iguais em largura e algura. Me cadastrei no fórum só pra te responder, estou procurando uma forma dele funcionar sem que todas as imagens sejam do mesmo tamanho, se você souber como faz isso, por favor me avise, já tentei css, javascript, interceder no código, mas nada funciona.

 

Então resumindo, o tamanho do slider é de acordo com o tamanho das imagens. (Lembrando que ele pega o tamanho original do arquivo, width e height nem importa, pode declarar css e javascript que nem efeito da, ou mesmo na própria imagem adicionando width e height não funfa).

 

 

Se alguém sabe como fazer esta mágica de funcionar com tamanhos de imagens diferente (sem ter que pegar a imagem, redimensionar, jogar em tmp pra depois voltar no slide ¬¬')

 

Estou tentando implementar em wordpress pelo modo Free hehe

 

Valew e abraço a todos.