Scroll de Imagens
Olá pessoal, estou com um projeto onde no mesmo existe 11 categorias e vários modelos para cada categoria, as categorias e modelos são apresentadas por meio de imagens em miniaturas (OBS: as imagens são dispostas em duas colunas), onde ao clicar numa categoria abre os modelos existentes, esta parte esta funcionando perfeitamente, porém o que necessito fazer é limitar a exibição das categorias e modelo para uma área de no máximo 1000px, que seria umas 6 ou 7 imagens aproximadamente e adicionar botões de navegação para passar entre os itens..
Abaixo segue o código da página:
<div id="menu" class="pecasmain">
<input type="hidden" id="idlinha" name="idlinha" value="0">
<input type="hidden" id="idmodelo" name="idmodelo" value="0">
<div id="menuLinhas" class="menuLinhas">
<h3>LINHAS</h3>
<a id="linha1" idreg="225" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000225_01_gd.jpg" />
<span class="linknaoselecionado">Adubadoras Pendulares</span>
</a>
<a id="linha2" idreg="62" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000062_01_gd.jpg" />
<span class="linknaoselecionado">Mini Pá Carregadeira e Mini Retro Escavadeira</span>
</a>
<a id="linha3" idreg="63" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000063_01_gd.jpg" />
<span class="linknaoselecionado">Manejo de solo e trituração de poda: </span>
</a>
<a id="linha4" idreg="61" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000061_01_gd.jpg" />
<span class="linknaoselecionado">Adubadoras mono disco</span>
</a>
<a id="linha5" idreg="242" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000242_01_gd.jpg" />
<span class="linknaoselecionado">Recolhedora de terreiro</span>
</a>
<a id="linha6" idreg="246" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000246_01_gd.jpg" />
<span class="linknaoselecionado">Enlerador e soprador</span>
</a>
<a id="linha7" idreg="59" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000059_01_gd.jpg" />
<span class="linknaoselecionado">Adubadoras de 2 discos</span>
</a>
<a id="linha8" idreg="10419" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000010419_01_gd.jpg" />
<span class="linknaoselecionado">Adubadora cafeeira e citrus</span>
</a>
<a id="linha9" idreg="65" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000000065_01_gd.jpg" />
<span class="linknaoselecionado">Recolhedora e abonadora de chão</span>
</a>
<a id="linha10" idreg="9039" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000009039_01_gd.jpg" />
<span class="linknaoselecionado">Podadora</span>
</a>
<a id="linha11" idreg="16321" href="JavaScript: void(0);" class="linklinha">
<img src="../imgs_categorias/img_0000016321_01_gd.jpg" />
<span class="linknaoselecionado">Braço de retro agrícola</span>
</a>
</div>
<div id="menuModelos0" class="menuModelos">
<h3>MODELOS</h3>
<span>Selecione uma LINHA no menu à esquerda.</span>
</div>
<div id="menuModelos225" class="menuModelos" style="display: none;">
<h3>Adubadoras Pendulares</h3>
<a href="#" id="modelo1" idreg="69" class="linkmodelo">
<img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000069_01_gd.jpg" />
<span class="linknaoselecionado"> PS 203</span></a>
<a href="#" id="modelo2" idreg="232" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000232_01_gd.jpg" />
<span class="linknaoselecionado"> PS / PSPP 303</span></a>
<a href="#" id="modelo3" idreg="235" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000235_01_gd.jpg" />
<span class="linknaoselecionado">PS / PSPP 403</span></a>
<a href="#" id="modelo4" idreg="236" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000236_01_gd.jpg" />
<span class="linknaoselecionado">PS 503</span></a>
<a href="#" id="modelo5" idreg="237" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000237_01_gd.jpg" />
<span class="linknaoselecionado">PS / PSPP 603</span></a>
<a href="#" id="modelo6" idreg="233" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000233_01_gd.jpg" />
<span class="linknaoselecionado">PS 753</span></a>
<a href="#" id="modelo7" idreg="234" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000234_01_gd.jpg" />
<span class="linknaoselecionado">PS 953</span></a>
<a href="#" id="modelo8" idreg="238" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000238_01_gd.jpg" />
<span class="linknaoselecionado">PS 1153</span></a>
<a href="#" id="modelo9" idreg="239" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000239_01_gd.jpg" />
<span class="linknaoselecionado">PS 1353</span></a>
<a href="#" id="modelo10" idreg="240" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000240_01_gd.jpg" />
<span class="linknaoselecionado">PS 1553T</span></a>
<a href="#" id="modelo11" idreg="16808" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016808_01_gd.jpg" />
<span class="linknaoselecionado">Pendulum</span></a>
</div>
<div id="menuModelos62" class="menuModelos" style="display: none;">
<h3>Mini Pá Carregadeira e Mini Retro Escavadeira</h3>
<a href="#" id="modelo1" idreg="88" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000088_01_gd.jpg" />
<span class="linknaoselecionado">PX 04 Mini Pá carregadeira</span></a>
<a href="#" id="modelo2" idreg="89" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000089_01_gd.jpg" />
<span class="linknaoselecionado">RX 04 Mini Retro escavadeira</span></a>
</div>
<div id="menuModelos63" class="menuModelos" style="display: none;">
<h3>Manejo de solo e trituração de poda: </h3>
<a href="#" id="modelo1" idreg="86" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000086_01_gd.jpg" />
<span class="linknaoselecionado">TRSL 90</span></a>
<a href="#" id="modelo2" idreg="87" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000087_01_gd.jpg" />
<span class="linknaoselecionado">TRSL 90E</span></a>
<a href="#" id="modelo3" idreg="251" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000251_01_gd.jpg" />
<span class="linknaoselecionado">TRV 100 </span></a>
<a href="#" id="modelo4" idreg="252" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000252_01_gd.jpg" />
<span class="linknaoselecionado">TRV 120</span></a>
<a href="#" id="modelo5" idreg="16615" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016615_01_gd.jpg" />
<span class="linknaoselecionado">TRL 120</span></a>
<a href="#" id="modelo6" idreg="258" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000258_01_gd.jpg" />
<span class="linknaoselecionado">TRL 140</span></a>
<a href="#" id="modelo7" idreg="259" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000259_01_gd.jpg" />
<span class="linknaoselecionado">TRL 160</span></a>
<a href="#" id="modelo8" idreg="260" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000260_01_gd.jpg" />
<span class="linknaoselecionado">TRL 180</span></a>
<a href="#" id="modelo9" idreg="261" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000261_01_gd.jpg" />
<span class="linknaoselecionado">TRL 200</span></a>
<a href="#" id="modelo10" idreg="262" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000262_01_gd.jpg" />
<span class="linknaoselecionado">TRL 220</span></a>
<a href="#" id="modelo11" idreg="254" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000254_01_gd.jpg" />
<span class="linknaoselecionado">TRP 120</span></a>
<a href="#" id="modelo12" idreg="255" class="linkmodelo"><img id="img12" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000255_01_gd.jpg" />
<span class="linknaoselecionado">TRP 160H</span></a>
<a href="#" id="modelo13" idreg="253" class="linkmodelo"><img id="img13" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000253_01_gd.jpg" />
<span class="linknaoselecionado">TRLA 180 </span></a>
<a href="#" id="modelo14" idreg="15868" class="linkmodelo"><img id="img14" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000015868_01_gd.jpg" />
<span class="linknaoselecionado">TRLA 140</span></a>
<a href="#" id="modelo15" idreg="257" class="linkmodelo"><img id="img15" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000257_01_gd.jpg" />
<span class="linknaoselecionado">TRS 360</span></a>
<a href="#" id="modelo16" idreg="256" class="linkmodelo"><img id="img16" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000256_01_gd.jpg" />
<span class="linknaoselecionado">TRC 220</span></a>
<a href="#" id="modelo17" idreg="10327" class="linkmodelo"><img id="img17" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010327_01_gd.jpg" />
<span class="linknaoselecionado">TRSL 1,50</span></a>
<a href="#" id="modelo18" idreg="2947" class="linkmodelo"><img id="img18" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000002947_01_gd.jpg" />
<span class="linknaoselecionado">TRL 140 RS</span></a>
</div>
<div id="menuModelos61" class="menuModelos" style="display: none;">
<h3>Adubadoras mono disco</h3>
<a href="#" id="modelo1" idreg="85" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000085_01_gd.jpg" />
<span class="linknaoselecionado">Giro 400/600</span></a>
<a href="#" id="modelo2" idreg="81" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000081_01_gd.jpg" />
<span class="linknaoselecionado">Giro 400/600 INOX</span></a>
</div>
<div id="menuModelos242" class="menuModelos" style="display: none;">
<h3>Recolhedora de terreiro</h3>
<a href="#" id="modelo1" idreg="243" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000243_01_gd.jpg" />
<span class="linknaoselecionado">VRC 1600</span></a>
<a href="#" id="modelo2" idreg="10245" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010245_01_gd.jpg" />
<span class="linknaoselecionado">Varredor Hidraulico 2.6 Para Terreiro de Café</span></a>
<a href="#" id="modelo3" idreg="10421" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010421_01_gd.jpg" />
<span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café</span></a>
<a href="#" id="modelo4" idreg="13270" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013270_01_gd.jpg" />
<span class="linknaoselecionado">Varredor Hidráulico 2.6 Para Terreiro de Café Com Pistão Hid</span></a>
<a href="#" id="modelo5" idreg="13693" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013693_01_gd.jpg" />
<span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café Com Pistão Hid</span></a>
</div>
<div id="menuModelos246" class="menuModelos" style="display: none;">
<h3>Enlerador e soprador</h3>
<a href="#" id="modelo1" idreg="13885" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013885_01_gd.jpg" />
<span class="linknaoselecionado">Varrecafé Traseiro Simples Geração 2C </span></a>
<a href="#" id="modelo2" idreg="14055" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014055_01_gd.jpg" />
<span class="linknaoselecionado">Varrecafé Traseiro Duplo Geração 2C</span></a>
<a href="#" id="modelo3" idreg="14491" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014491_01_gd.jpg" />
<span class="linknaoselecionado">Varrecafé Duplo G2 Caixa Dupla</span></a>
<a href="#" id="modelo4" idreg="14351" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014351_01_gd.jpg" />
<span class="linknaoselecionado">Varrecafé Simples G2 Caixa Dupla </span></a>
<a href="#" id="modelo5" idreg="247" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000247_01_gd.jpg" />
<span class="linknaoselecionado">Cleaner café/ RTF Dual</span></a>
<a href="#" id="modelo6" idreg="248" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000248_01_gd.jpg" />
<span class="linknaoselecionado">Cleaner maçã / citrus</span></a>
<a href="#" id="modelo7" idreg="9042" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009042_01_gd.jpg" />
<span class="linknaoselecionado">Soprador</span></a>
</div>
<div id="menuModelos59" class="menuModelos" style="display: none;">
<h3>Adubadoras de 2 discos</h3>
<a href="#" id="modelo1" idreg="74" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000074_01_gd.jpg" />
<span class="linknaoselecionado">TDS 750</span></a>
<a href="#" id="modelo2" idreg="75" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000075_01_gd.jpg" />
<span class="linknaoselecionado">TDS 950</span></a>
<a href="#" id="modelo3" idreg="76" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000076_01_gd.jpg" />
<span class="linknaoselecionado">TDS 1150</span></a>
<a href="#" id="modelo4" idreg="73" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000073_01_gd.jpg" />
<span class="linknaoselecionado">TDS 1350</span></a>
<a href="#" id="modelo5" idreg="72" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000072_01_gd.jpg" />
<span class="linknaoselecionado">TDS 1550</span></a>
<a href="#" id="modelo6" idreg="71" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000071_01_gd.jpg" />
<span class="linknaoselecionado">Vibraflow II</span></a>
</div>
<div id="menuModelos10419" class="menuModelos" style="display: none;">
<h3>Adubadora cafeeira e citrus</h3>
<a href="#" id="modelo1" idreg="10420" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010420_01_gd.jpg" />
<span class="linknaoselecionado">MX 2100</span></a>
</div>
<div id="menuModelos65" class="menuModelos" style="display: none;">
<h3>Recolhedora e abonadora de chão</h3>
<a href="#" id="modelo1" idreg="9343" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009343_01_gd.jpg" />
<span class="linknaoselecionado">Catacafé </span></a>
</div>
<div id="menuModelos9039" class="menuModelos" style="display: none;">
<h3>Podadora</h3>
<a href="#" id="modelo1" idreg="9040" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009040_01_gd.jpg" />
<span class="linknaoselecionado">Podadora</span></a>
</div>
<div id="menuModelos16321" class="menuModelos" style="display: none;">
<h3>Braço de retro agrícola</h3>
<a href="#" id="modelo1" idreg="16322" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016322_01_gd.jpg" />
<span class="linknaoselecionado">BRM BRAÇO MÓVEL </span></a>
<a href="#" id="modelo2" idreg="16423" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016423_01_gd.jpg" />
<span class="linknaoselecionado">BRF BRAÇO FIXO </span></a>
</div>
<div id="pecasHome" class="pecasConteudo">
<img src="../img/pecas.jpg" />
<img src="../img/diversas-pecas.jpg" />
<div id="desconto">
<p class="desconto">
Desconto de 3% para compras efetuadas em nosso site.
</p>
</div>
</div>
<div id="pecasConteudo" class="pecasConteudo" style="display: none;"></div>
<br style="clear: both;"/>
<iframe id="frameprocessa" name="frameprocessa" style="width: 0px; height: 0px; visibility: hidden; "></iframe>
<!--<script src="../js/jquery-3.4.1.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="Javascript">
$(document).ready(function() {
$(".linklinha").click(function(e) {
$("#menuLinhas > a > span").removeClass ( 'linkselecionado' );
$("#menuLinhas > a > span").addClass ( 'linknaoselecionado' );
$(this).find('span').addClass('linkselecionado');
var idreg = parseInt($(this).attr("idreg"));
// Esconde Todas Divs Modelos
$.each($(".menuModelos"), function(e) {
$(this).hide();
});
// Exibe Div Modelo
$("#menuModelos"+idreg).show();
//console.log("idreg= " + idreg);
$("#menuModelos"+idreg+" > a > span").removeClass ( 'linkselecionado' );
$("#menuModelos"+idreg+" > a > span").addClass ( 'linknaoselecionado' );
// Ajusta Foco
$("#menuModelos"+idreg+" #modelo1").focus();
$("#pecasConteudo").hide();
$("#pecasHome").show();
// Seta Deselecionada Modelo
$("#idlinha").val(idreg);
$("#idmodelo").val(0);
});
$(".linkmodelo").click(function(e) {
var idlinha = parseInt($("#idlinha").val());
$("#menuModelos"+idlinha+" > a > span").removeClass ( 'linkselecionado' );
$("#menuModelos"+idlinha+" > a > span").addClass ( 'linknaoselecionado' );
$(this).find('span').addClass('linkselecionado');
$("#pecasHome").hide();
//alert('Vai carregar DETALHES do MODELO IDREG: ' + $(this).attr("idreg"));
$("#pecasConteudo").load( "carrega_pecas_detalhe.html?id="+ $(this).attr("idreg"), function( response, status, xhr ) {
if ( status == "error" ) {
console.log("#error" + xhr.status + " " + xhr.statusText );
}
});
$("#pecasConteudo").show();
});
function initPage() {
console.log('Carregou Linhas OK !');
var idlinha = parseInt($("#idlinha").val());
var idmodelo = parseInt($("#idmodelo").val());
// Esconde Todas Divs Modelos
$.each($(".menuModelos"), function(e) {
$(this).hide();
});
// Exibe Div Modelo
$("#menuModelos"+idlinha).show();
}
initPage();
});
</script>
Se alguém puder me ajudar, pois esse pequeno detalhe ta me tomando um grande tempo e atrasando o projeto.Discussão (0)
Carregando comentários...