-
Conteúdo Similar
-
-
Por danicarla
Oi pessoal tudo bem?
Eu estou usando um zoom no meu site, porém quando a pagina é um pouco mais pesada, ele carrega a pagina primeiro e depois dá o zoom.. como se o zom fosse aplicado atrasado na pagina...
Será que consigo carregar a pagina já com o zoom aplicado?
Meu código atualmente é esse:
<script> function ZoomTeste() { document.body.style.zoom = '140%'; } </script> </head> <body onload="ZoomTeste();">
-
Por leandro32
Senhores, me ajudem pelo amor de Deus!!!
Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes.
Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018, doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!!
<!-- CÓDIGO DO SITE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css" />
<title>ACRE - RG</title>
</head>
<body>
<!-- CABEÇALHO COM MENUS -->
<header>
<div class="container">
<div class="zoom">
<img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px">
<div id="menu">
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a>
</div>
</div>
</div>
</header>
<!-- O CORPO DO SITE -->
<div class="container2">
<fieldset>
<center><h2><i> Estado do ACRE - RG</i></h2></center>
</fieldset>
</div>
<div class="container3">
<!-- COLUNA DOS ANOS -->
<div class="container4">
<div class="col-lg-2 col-md-2 col-sm-2">
<div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px">
<div class="btn-group-vertical" role="group" aria-label="..."
<div class="zoom">
<button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%">
<small class="ng-binding">RG</small>
<br>
<small class="ng-binding">AM- 2019</small>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- O RODAPÉ Do SITE -->
<footer>
<span> <b>BASE DOCUMENTAL</b> - ©<i>Leandro do Nascimento Martins</i></span>
</footer>
</div>
</div>
</div>
</body>
</html>
<!-- ARQUIVO ESTILO.CSS -->
/* PADRÃO CSS */
/* eliminando configurações dos browsers*/
* {margin: 0; padding: 0; font-family: verdana, helvetica, arial;}
/* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */
p {color: silver; font-size: 15px; text-align: center; font-family: arial, "Times new roman"; text-shadow: 1px 1px 1px #111111;}
body {background-color: #E8E8E8; width: 100%;}
header {background-color: #08298A; height: 100px; padding: 2px; width: 100%;}
footer {clear: both; color: white; background-color: #08298A; height: 40px; text-align: center ; padding: 10px; text-shadow: 1px 1px 1px black;}
h1 {color: SILVER; text-align: center; margin: 0 0 50px 0; text-shadow: 2px 2px 2px #111111;}
h2 {color: SILVER; text-align: center; margin: 5px 0 5px 0; text-shadow: 2px 2px 2px #111111;}
/* TODAS AS ID's */ /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE .#. HASHTAG */
#div_principal {background-color: white; clear: both; background-size: 65%; min-height: 485px; padding: 40px 0 40px 0; margin: 1% 1% 1% 1%; width: 100%;}
#logo {float: left; margin: 0 20px 0 10px;}
#menu {float: right; margin-top: 40px; text-transform: uppercase;}
#menu a {padding: 32px 20px; text-decoration: none; color: white; border-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; cursor: pointer; transition: background-color 1s;}
#menu a:hover {background-color: white; color: black;}
#btn-default {text-decoration: none;}
/* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO . */
.efeito {background-color: rgba(0, 0, 0, 0.3); padding: 100px 0 100px 0;}
.container {width: 100%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/}
.container2 {width: 97%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/ background-color: white;}
.container3 {width: 95%; margin: auto; background-color: #FFFAFA; clear: both;}
.container4 {width: 10%; float: left; background-color: #FFFAFA; clear: both; }
.container5 {background-color: ; float: left;}
.col-lg-2 {width: 95%; }
.col-md-2 {width: 50px;}
.col-sm-2 { width: 79px;}
.col-lg-10 { width: 80%; }
-
Por Vilson J. Santos
Boa noite pessoa, eu estou desenvolvendo a estrutura do meu portfólio e estou tendo problemas com relação ao zoom na página, a principio eu resolvi fazer todo o site utilizando medidas em porcentagem (não sou muito experiente com html ou css e não sei qual é a maneira correta) mas quando eu dava zoom os textos e tabelas simplesmente saiam de suas divs e ficava tudo bagunçado, percebi que apenas as imagens não saiam de seus devidos lugares... enfim dei uma lida em alguns posts pela internet e descobri que poderia acabar com este problema criando uma Div que cobria todo o site com suas medidas em pixels e depois poderia fazer documentos CSS para as diversas resoluções usadas hoje em dia para não ter problemas com a resolução do site, enfim, ao colocar esta Div que cobre todo o site o problema ao dar zoom foi resolvido, contudo apareceu um outro problema que é ao diminuir o zoom, meu site simplesmente encolhe e se torna pequeno a ponto de caber no canto superior da tela.
Gostaria de saber como resolver este problema, e também se a medida que tomei de criar uma Div que cobre todo o site em pixels é a maneira correta de se lidar com esse problema do zoom.
OBS: segue foto do problema ao tirar o zoom e o código da Div que cobre o site:
#site{ background-color:; position:absolute; height:768px; width:1368px; }
-
Por leoamrl
...tamanho da imagem.
O "zoom" da imagem pode ser um Lightbox, imagem em tela cheia, ou qualquer coisa deste gênero.
-
Prezados colegas,
Estou usando o elevate zoom e esta dando um conflito no jquery das minhas miniaturas.
no final da pagina tem o <script src="js/core.min.js"></script> que roda as miniaturas bem,
se eu retiro o zoom acontece.
No começo da pagina tem o
<img id="zoom_01" src='<%# Eval("FilePath3")%>' alt="" width="400" height="400" data-zoom-image='<%# Eval("FilePath3")%>' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery("[id=zoom_01").elevateZoom({
cursor: 'pointer',
imageCrossfade: true,
loadingIcon: 'loading.gif'
});
});
</script>
Ou é um ou outro. Como posso fazer para que os 2 trabalhem juntos?
Desde já, obrigado.
Compartilhar este post
Link para o post
Compartilhar em outros sites