The problem is this:
I'm using a JQuery
plugin to display images of type carroussel
.
But when the image is too high it generates this problem.
I just wanted to make sure that if the height of the image is larger than the div that holds it, then% w / o%.
But as it is in a plugin, as much as I try to put the conditions in several div's, nothing works but I also check that if the View Port is less than 1000 then I reduce the div size of the plugin. >
Thank you for giving me this light
<script>$(document).ready(function(){$('#vertical').lightSlider({gallery:true,item:1,vertical:false,verticalHeight:295,vThumbWidth:50,thumbItem:8,thumbMargin:4,slideMargin:0});varecra=window.innerWidth;if(ecra<=1000){$(".fotosProduto").css("width",ecra);
$('#vertical li').css("width",ecra);
}
});
</script>
<?php
if($fotosProduto==null) {
echo $semFoto;
} else {
echo "<ul id='vertical'>";
foreach ($fotosProduto as $foto) :
$caminho = "_img/_fotos/_normais/".$foto->getFoto();
if(!file_exists($caminho)) {
$imagem = $semFoto;
} else {
$imagem = "<li data-thumb='".$caminho."'>
<img src='".$caminho."' alt='Imagem' title='Imagem' style='height:auto' />
</li>";
}
echo $imagem;
endforeach;
echo "</ul>";
}
?>
and the plugin is lightslider
Only html output
<link rel="stylesheet" type="text/css" href="_global/_css/jquery.cycle2.css">
<link rel="stylesheet" type="text/css" href="_global/_css/lightslider.css">
<script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="_global/_js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="_global/_js/lightslider.js"></script>
<script>
$(document).ready(function() {
$('#vertical').lightSlider({
gallery:true,
item:1,
vertical:false,
verticalHeight:295,
vThumbWidth:50,
thumbItem:8,
thumbMargin:4,
slideMargin:0
});
var ecra = window.innerWidth;
if(ecra <= 1000) {
$(".fotosProduto").css("width",ecra);
$('#vertical li').css("width",ecra);
}
});
</script>
<div class="corpo">
<div class="conteudo">
<div class="produtoExibe">
<div class="fotosProduto">
<ul id='vertical'>
<li data-thumb='_img/_fotos/_normais/69f5e6edba75cdea478625941dae1173.jpg'> <img src='_img/_fotos/_normais/69f5e6edba75cdea478625941dae1173.jpg' alt='Imagem' title='Imagem' style='height:auto' /> </li>
</ul>
</div>
<div class="descricaoProduto">
<h1 class="h1Centralizado">Acessório</h1>
<br />
<img src='_img/freteGratis.png' alt='Frete Grátis' title='Frete Grátis' /><br />
Bolsa de ar sistema para o pneumático da prensa. </div>
<div class="comprarProduto"> <a href='carrinho.php?acao=adicionar&idProduto=1'><img src='_img/comprar1.png' /></a> </div>
<div class="caracteristicasProduto">
<h1 class="h1Centralizado">Carcterísticas</h1>
<br />
<ul class="caracteristicas">
<li style="background-color:#CCC">
<label>Modelo</label>
: Bolsa de ar</li>
<li>
<label>Bandejas</label>
: 0</li>
<li style="background-color:#CCC">
<label>Peso</label>
: 0 Kg</li>
<li>
<label>Prensagem</label>
: 0 Kg</li>
<li style="background-color:#CCC">
<label>Comprimento</label>
: 0 cm</li>
<li>
<label>Largura</label>
: 0 cm</li>
<li style="background-color:#CCC">
<label>Cabo</label>
: 0mm</li>
<li>
<label>Tipo de Ligação</label>
: Bifasica</li>
<li style="background-color:#CCC">
<label>Potencia</label>
:0 Whats</li>
<li>
<label>Consumo de energia</label>
: 0 Whats/h</li>
<li style="background-color:#CCC">
<label>Corrente</label>
: 0 Ampéres</li>
<li>
<label>Disjuntor Indicado</label>
: 0 Ampéres</li>
</ul>
</div>
</div>
<script>$(".caracteristicasProduto").css("display","none");</script></div>
</div>