problema com Jcycle

[manoaj 12]

pessoal to com problema no jcycle aqui , to tentando deixar as imagens com a largura em 100% e a altura em auto para que as imagens se adaptem ao tamanho da div que segura o slide ou seja to querendo deixar as imagens com css fluido mas não fica de jeito nenhum . já tentei de tudo quanto é forma mas acho que é problema com jcycle mesmo .

 

to usando um codigo assim pro html do slide

a div slider que da a largura maxima e a altura em %

 

ai no css eu dou 100% de largura e deixo altura em auto só que a imagem parece só aceitar valores fixos porcausa do plugin pq se declaro 100% ela só fica 100% e não redimensiona de acordo coma div pai ,

 

alguem sabe o que posso faser?

 

<div class="slider">

<ul>

<li>Imagens aqui</li>

</ul>

</div>

[LACRIMAL 2]

manoaj, qual versão do cycle voce está usando?
Até onde sei, apenas o cycle2 funciona com layout fluidos (corretamente).


Já tentou usar o codigo da seguinte maniera?

<div class="slider">
<img src="..."/>
<img src="..."/>
.
.
.
</div>

 

Se nada disso resolver mostra teu js.

[manoaj 12]

o js é o da api normal só que num sei pq num funciona tipo

 

to usando a versão 2 e já tentei com a 1 mas as imagens continuan com tamanho fixo.

 

e já tentei o html do eito que você falou também

 

<script type="text/javascript">
$('.slider').cycle({
speed: 600
});
</script>

[LACRIMAL 2]

no cycle2 por padrão (sem precisar escrever js) basta voce adicionar a classe cycle-slideshow num div e colocar as imagens dentro

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

<div class="cycle-slideshow">
    <img src="http://malsup.github.com/images/p1.jpg">
    <img src="http://malsup.github.com/images/p2.jpg">
    <img src="http://malsup.github.com/images/p3.jpg">
    <img src="http://malsup.github.com/images/p4.jpg">
</div>

Isso já é o suficiente pra fazer o cycle2 funcionar.

Eu recentemente tive problemas com o cycle (antigo)... parece que dá conflito com a ultima versão do jquery.

 

Coloca teu css e da uma olhada no console p/ ver se aparece algum erro relacionado ao cycle. flw

[manoaj 12]

hum vo vers e conssigo aqui , a e quanto ao teu problema com jquery mais recente é pq vc tem que usar a biblioteca do migrate junto senão os codigos mais antigos não vão funcionar mesmo eu to usando ela e funciona tranquilo desde os mais antigos aos recentes .

 

usa assim sempre qu efor usar a versão nova do jquery

 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

[manoaj 12]

conssegui arrumar graças a vc vlw cara

 

mas ai tive que por esse codigo no js pq senão não redimensiona

 

slideResize: true,
containerResize: false,
fit: 1,

 

<div class="slider"><!--SLIDER-->

<img src="VS_BG_0924_1600x540_EN_US.jpg" alt="lala" />
<img src="Win8Offer_1203_1600x540_PT.jpg" alt="lala2" />
<img src="VS_BG_0924_1600x540_EN_US.jpg" alt="lala3" />

</div><!--FIM SLIDER-->

 

só to com mais um probleminha relacionado ao jcycle é que to querendo por ums subtitulos nas imagens sabe aquele caption só qu enão to conseguindo e queria poder personalizar ele a meu gosto , como eu posso faser pra por um caption no jcycle atravez de elementos html com classes ?

[Leonardo Brito 0]

Veja se isso resolve:

 

Só que olhando a documentação acrescentei nas configurações no jCycle 1.

 

Segue aí:

$(document).ready(function()
{
    $('.slider').cycle({
        timeout: '3000',
        fx: 'fade',
        pager: '.pager',
        activePagerClass: 'slideActive',
        pagerAnchorBuilder: function(index, DOMelement){
            return '<a></a>';
        },
        slideResize: 0,
        speed: 1000,
        containerResize: 0,
        before: function onBefore(curr, next, opts, fwd) {

            $('.slider img').removeAttr('width'); 
          
            //Altura .slider
            var $hs = $(this).height(); 
            
            //Largura da imagem dentro da div slider
            var $wi = $('.slider img').attr('width');
            
            //Largura .slider
            var $ws = $(this).width();
            
            //largura div #conteudoInterno
            var $wc = $('#conteudoInterno').width();

            //Define altura do slide dinamicamente
            $(this).parent().animate({height: $hs+'px'}); 
            
            //Variaveis para:
                //Definicao largura minima
                //Diferenca entre a imagem e a largura minima (se imagem menor que div)
                //Calculo da margem para centralizar a imagem no div (se imagem menor que div)
            var $wm = 550;        //Largura minima padrao
            var $dif = $wm - $ws;  //Diferenca entre o tamanho minimo e o tamanho da imagem
            var $mrg = $dif / 2    //Divisao por dois para poder colocar a margem em ambos os lados e centralizar a imagem no div
            
            if ($ws > $wc)
            {
                $(this).parent().animate({width: $wc}),
                $('.boxPager').parent().animate({width: $wc}),
                $('.slider img').attr('width', $wc); 
            }
            else 
            {
                
                if($ws < $wm)
                {
                    $(this).css('marginLeft', function(index){
                        return $mrg;
                    });

                    $(this).css('marginRight', function(index){
                        return $mrg; 
                    });
                    
                    $('.boxPager').parent().animate({width: $wm})
                }
                else
                {
                    $(this).css('marginLeft', function(index){
                        return 0;
                    });

                    $(this).css('marginRight', function(index){
                        return 0; 
                    });
                    
                    $('.boxPager').parent().animate({width: $ws})
                }
            }
        }
    });
    

});

No meu caso todo o site tem uma DIV com ID #conteudoInterno para sempre alterar nos arquivos PHP somente o conteúdo, e não menu, cabeçalho e rodapé, estou mencionando isso, pois pode ficar na dúvida o que é esse ID. Pois como tenho imagens que não sei a largura (width) eu limito o DIV slider ao tamanho do DIV #conteudoInterno e diminuo o width da imagem dinamicamente através do jQuery.

 

OBS.: Como não preciso do <p></p> não tenho o DIV slider-item do exemplo anterior e vi que no Chrome ele fica perdido com o jCycle atacando o DIV slider e as imagens no DIV slider-item.