guirufino

Então estou tentando deixa um galeria q achei na net responsiva, só que não intendo nada de javascript, acho que é aqui que esta o problema mais n tenho certeza. segue código: HTML: <div id="games"> <!--Link para Imaguem--> <a href="noticia4.html"> <!--Aqui colocar a imaguem 900x500--> <img src="img/Imaguemsparadownload/NeedForSpeedPayback.png" width="900" height="500" alt="Need For Speed Payback" /> <!--Colocar o Texto!--> <span> <b><font face="Arial">Need For Speed Payback</font></b><br /> <i>Saiu analize de Need For Speed Payback, clique e confira.</i> </span> </a> </div> <!--Aqui para configurar o tamanho e os efeitos Galeria--> <script> $('#games').coinslider({ width : 900 , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script> Entao nessa parte do script que começa a zuera.... se eu muda o "width:100%" ate funciona mais e como se ele n existi-se não consigo clikar na imagem, se eu colocar "height:100%" não funciona a imagem some.... vo coloca parte do codigo da galeira que eu acho que seja relevante: Javascript: (function($) { var params = new Array; var order = new Array; var images = new Array; var links = new Array; var linksTarget = new Array; var titles = new Array; var interval = new Array; var imagePos = new Array; var appInterval = new Array; var squarePos = new Array; var reverse = new Array; $.fn.coinslider= $.fn.CoinSlider = function(options){ init = function(el){ order[el.id] = new Array(); // order of square appereance images[el.id] = new Array(); links[el.id] = new Array(); linksTarget[el.id] = new Array(); titles[el.id] = new Array(); imagePos[el.id] = 0; squarePos[el.id] = 0; reverse[el.id] = 1; params[el.id] = $.extend({}, $.fn.coinslider.defaults, options); // create images, links and titles arrays $.each($('#'+el.id+' img'), function(i,item){ images[el.id] = $(item).attr('src'); links[el.id] = $(item).parent().is('a') ? $(item).parent().attr('href') : ''; linksTarget[el.id] = $(item).parent().is('a') ? $(item).parent().attr('target') : ''; titles[el.id] = $(item).next().is('span') ? $(item).next().html() : ''; $(item).hide(); $(item).next().hide(); }); // set panel $(el).css({ 'background-image':'url('+images[el.id][0]+')', 'width': params[el.id].width, 'height': params[el.id].height, 'position': 'relative', 'background-position': 'top left' }).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />"); // create title bar $('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>"); $.setFields(el); if(params[el.id].navigation) $.setNavigation(el); $.transition(el,0); $.transitionCall(el); } // squares positions $.setFields = function(el){ tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw); tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph); counter = sLeft = sTop = 0; tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth; tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight; for(i=1;i <= params[el.id].sph;i++){ gapx = tgapx; if(gapy > 0){ gapy--; sHeight = tHeight+1; } else { sHeight = tHeight; } for(j=1; j <= params[el.id].spw; j++){ if(gapx > 0){ gapx--; sWidth = tWidth+1; } else { sWidth = tWidth; } order[el.id][counter] = i+''+j; counter++; if(params[el.id].links) $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>"); else $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>"); // positioning squares $("#cs-"+el.id+i+j).css({ 'background-position': -sLeft +'px '+(-sTop+'px'), 'left' : sLeft , 'top': sTop }); sLeft += sWidth; } sTop += sHeight; sLeft = 0; } $('.cs-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('.cs-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).hide(); }); $('#cs-title-'+el.id).mouseover(function(){ $('#cs-navigation-'+el.id).show(); }); $('#cs-title-'+el.id).mouseout(function(){ $('#cs-navigation-'+el.id).hide(); }); if(params[el.id].hoverPause){ $('.cs-'+el.id).mouseover(function(){ params[el.id].pause = true; }); $('.cs-'+el.id).mouseout(function(){ params[el.id].pause = false; }); $('#cs-title-'+el.id).mouseover(function(){ params[el.id].pause = true; }); $('#cs-title-'+el.id).mouseout(function(){ params[el.id].pause = false; }); } };

Tentei coloca o codigo e nao funciono. O codigo e meio complicado entao vo explica tudo! <script> $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script> esse código aqui e pra chama a galeria, se eu muda o "height:50%" buga tudo e não aparece imagem. Então eu deixei "height:500", ai eu queria um solução pra contorna isso e pode criar a galeira responsiva. E o codigo CSS eu consigo manipula um pouco a galeria mais tbm nao consigo muda o "height". Se quiser o codigo do js se quiserem da uma olhada. Agradeço! A nao sei se muda alguma coisa: <!--Codigo da Galeria de Imagens ate /script--> <div id="games"> <!--Link para Imaguem--> <a href=""> <!--Aqui colocar a imaguem 900x500--> <img src="img/Imaguemsparadownload/nogame.jpg" width="900" height="500" no-repat/> <!--Colocar o Texto!--> <span> <b><font face="Arial">NO GAME NO LIFE</font></b><br /> <i>Sem Jogo Sem Vida!!!</i> </span> </a> Se eu conseguir colocar a imagem responsiva a galeria n estaria responsiva acho... E assim q eu coloco a imagem na galeria não sei se ajuda..

Site:http://platformwar.epizy.com Estou tentando fazer um site responsivo, mas estou tendo problemas com o (height:) o height: da galeira nao quer funcionar com a " % " não funciona, ja procurei de tudo na net e nao achei resposta. Eu peguei o código da galeira na internet, e comecei a modificar... só que tem esse código: Ta no Hmtl: <script> $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ; </script> Aqui to tentando colocar 50% mais não funciona... eu queria que ele diminui-se confirme diminui a tela. (não sei nada de javascript). Se precisarem de algum Código eu mando CSS: #games {position: relative; margin-top: 70px; z-index: 0; margin-left: auto; margin-right: auto; } .coin-slider {float: none; top:50%; left:50%; text-align: center; } .coin-slider { overflow: hidden; zoom: 0; position: static; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons {font-size: 0%; padding: 1%; float: left; position: relative; } .cs-buttons a {margin-left:5px; background:url(../cores-roleta/contadorcompleto.png); height: 29px; width: 29px; float: left; text-indent: -1000px;} .cs-active { background:url(../cores-roleta/contador10.png); height: 29px; width: 29px; float: left; } .cs-title { width: 100%; padding: 2%; background-color:#000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: Transparent; color: #000; padding: 0px 10px; }