como carregar script com .load() ou outra funnção?

maiconcrespo · Outubro 4, 2014

Olá pessoal, tenho uma nova duvida,

Estou montando um site, e nele tenho um catalo de produtos, com a função load, consigo carregar ao clicar em um produto os detalhes dele agora o problema é o seguinte, cada imagem tem um zoom automatico , que funciona quando a pagina é carregada, mas quando clico em um link ele desativa e nao funciona mais.

produtos.html

essa é a informação (div) que quero carregar na pagina em q eu esteje junto com o script. aqui o zoom funciona normal, mas quando chamo ela em outra pagina, não.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src='elevatezoom-master/jquery-1.8.3.min.js'></script>
	<script src='elevatezoom-master/jquery.elevatezoom.js'></script>
    <script src="cssmenu/script.js"></script>
    
</head>

<body>
<div class="detail" id="transformadordetail" >
   <img class="imgclass" src="produtos/miniaturas/JPEG/Transformador  new.jpg"  height="250" id="transformadordet" data-zoom-image="produtos/Transformador  new.jpg" style="float:left"/>
      <div class="detailtext" >
        <p><strong>Transformador Casador de Impedância</strong></p>
        <p> (<a href="manual/GSA 6000.pdf">MANUAL</a>)  </p>
      </div>
   
<script>
    $('#transformadordet').elevateZoom({
   scrollZoom : true, 
   zoomLevel: 2 
   
   }); 
    
</script>


</div>
</body>
</html>

Agora a index.html

aqui o zoom nao funciona mais, pq pelo que eu li o script desativa com a .load, o que posso fazer então

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src='elevatezoom-master/jquery-1.8.3.min.js'></script>
	<script src='elevatezoom-master/jquery.elevatezoom.js'></script>
    <script src="cssmenu/script.js"></script>
    <script type="text/javascript">

	$(document).ready(function(){
		$("#cssmenu a").click(function( e ){
			e.preventDefault();
			var href = $( this ).attr('href');
			 
			$("#contentitens").load(href);
		});
	});
	
	</script>
</head>

<body>
<a href="produto.html #trasnformadordetail">Transformador</a>

<div id="contentitens" class="intensGlobal" style="margin:20px">

aqui vai o conteudo

</div>

</body>
</html>

noo script mudei o seguinte

<script type="text/javascript">

    $(document).ready(function(){
        $("#cssmenu a").click(function( e ){
            e.preventDefault();
            var href = $( this ).attr('href');
            
            $("#contentitens").load(href);
//adicionei aqui o script mas ele nao funciona diretamente, só quando clico em um link vazio..porque?? Se eu tiver varios terei  q colocar essas linhas abaixo pra cada produto??
            $('#transformadordet').elevateZoom({ 
            scrollZoom : true, 
             zoomLevel: 2 
             }); 
        });
    });
    
    </script>

});

});
});

</script>

Douglas Julião · Outubro 6, 2014

Cara tenta fazer assim, tira o script da página produtos.html e coloca ele em um callback no load:

$("#contentitens").load(href,function(){
  $('#transformadordet').elevateZoom({
     scrollZoom : true, 
     zoomLevel: 2 
   }); 
});

Boa sorte!

maiconcrespo · Outubro 6, 2014

Opa, Douglas, vlw mesmo, era isso, eu tava no caminho certo, mas colocando no lugar errado...rsrsr

agora mas uma duvida, relacionada ao mesmo assunto...rsrs

queria simplificar esse codigo aki, por exemplo, pra nao ter que colocar o nome de todos os produtos e repetir o script, queria fazer algo mais ou menos assim...

<script type="text/javascript">

    $(document).ready(function(){
        $("#cssmenu a").click(function( e ){
            e.preventDefault();
            var href = $( this ).attr('href');// aqui quando eu clico no link ele joga o "produto.html #tranformadordet, mas queria tbm pegar o id de uma img q esta dentro dessa div"

            var idimg = $( this ).attr('id');// aqui ele pega o id da div(mas eu queria pegar o id da "img src" que esta dentro da div.

           $("#contentitens").load(href,function(){
           $(idimg).elevateZoom({ //e queria jogar dentro dessa "idimg", ai eu so colocaria esse codigo dentro da pagina
            scrollZoom : true, 
             zoomLevel: 2 ,
			 easing : true
                                     }); 
                                                 });
                                           });  
	                            });
    
    
    </script>

William Bruno · Outubro 6, 2014

 var idimg = $( this ).find('img').attr('id');

Douglas Julião · Outubro 6, 2014

Pra pegar a class ou o id da imagem ela estando assim:

<div><a href="page.html"><img id="id_image" class="class_image" src="img.jpg"></a></div>

você pode usar esse código javascript:

this.childNodes[0].className;
this.childNodes[0].id;

Ai você pode tentar concatenar a sua variável com a class ou id da imagem, é isso que você quer?

Boa sorte!

Agora que vi o esquema do William Bruno em jquery, foi mau.

Mas vou deixar aqui o meu modelo também, vai que alguém precise :)

maiconcrespo · Outubro 6, 2014

Acho que é isso tenho que pegar a imagem daqui

<div id="div1">

<img id="id_image"  src="img.jpg" data-zoom-image="imgbig.jpg"></a>

</div>

e jogar na id img pq o script do zoom é esse aqui

//esse funciona perfeito
$(document).ready(function(){
$("#cssmenu a").click(function( e ){
e.preventDefault();
var href = $( this ).attr('href');
//aqui eu queria encontra uma maneira de colocar pra capturar o id e jogar como #idimg
$("#contentitens").load(href,function(){
$('#id_image').elevateZoom({
scrollZoom : true,
zoomLevel: 2 
}); 
});

só que eu queria simplificar pra nao ter que fazer isso aqui...pq o elevatezoom funciona com o id da<img>

$("#contentitens").load(href,function(){
$('#id_image1').elevateZoom({
scrollZoom : true,
zoomLevel: 2
});
$('#id_image2').elevateZoom({
scrollZoom : true,
zoomLevel: 2
});
$('#id_image3').elevateZoom({
scrollZoom : true,
zoomLevel: 2
});
$('#id_image4').elevateZoom({
scrollZoom : true,
zoomLevel: 2
});
});

$(document).ready(function(){
$("#cssmenu a").click(function( e ){
e.preventDefault();
var href = $( this ).attr('href');
//aqui eu queria encontra uma maneira de colocar pra capturar o id e jogar como #idimg
$("#contentitens").load(href,function(){
$('#idimg').elevateZoom({
scrollZoom : true,
zoomLevel: 2
});
});

como ficaria o código tentei da maneira que vc me mostraram li em alguns site mas nao entendi bem ai nda...

Isso foi o que eu fiz...não deveria funcionar?

<script type="text/javascript">


    $(document).ready(function(){
        $("#cssmenu a").click(function( e ){
            e.preventDefault();
            var href = $( this ).attr('href');
           var idimg = $( this ).find('img').attr('id');
           $("#contentitens").load(href,function(){
           $("#"+idimg).elevateZoom({
            scrollZoom : true, 
             zoomLevel: 2 ,
easing : true
                                     }); 
                                                 });
                                           });  
                           });
    
    
    </script>
    
    
    </script>

Douglas Julião · Outubro 6, 2014

Quando você clica ele procura pela tag a e no seu código acima está assim:

<div id="div1">

<img id="id_image"  src="img.jpg" data-zoom-image="imgbig.jpg"></a>

</div>

ou seja ele nao está encontrando o elemento img que está dentro do a, faça isso:

<div id="div1"> // e vc tem que ficar atento ao id principal, ali no click está #cssmenu

<a href=""><img id="id_image"  src="img.jpg" data-zoom-image="imgbig.jpg"></a>

</div>

Provavelmente seja isso!

maiconcrespo · Outubro 6, 2014

O meu codigo esta assim...(não é o codigo real..rsrr) só as partes principais. mas vou deixar ele de lado e terminar o site com outro tipo, vou fazer só com mostrar e ocultar detalhes dos produtos...ta funcionando bem assim, vou deixar pra implementar esse aqui mais pra frente, pq tenho que colocar display none e depois q chamar na outra pagina mostrar ...queri fazer algo mais ou menos como esse aqui ... www.oneal.com.br quando clico em um produto

Obrigado a todos que tentaram me ajudar.

index.html

<script type="text/javascript">


    $(document).ready(function(){
        $("#cssmenu a").click(function( e ){
            e.preventDefault();
            var href = $( this ).attr('href');
            var idimg = $( this ).find('img').attr('id');
           $("#contentitens").load(href,function(){
           $("#"+idimg).elevateZoom({
            scrollZoom : true, 
             zoomLevel: 2 ,
easing : true
                                     }); 
                                                 });
                                           });  
                           });
    
    
    </script>
    
    
    </script>
<div id="cssmenu">
<a href="amplificadores.html #produto1div"><span>Produto1</span></a>
<a href="amplificadores.html #produto2div"><span>Produto2</span></a></div>

amplificadores.html

<div id="produto1div">

<img id="id_image1"  src="img1.jpg" data-zoom-image="img1big.jpg">

</div>

<div id="produto2div">

<img id="id_image2"  src="img2.jpg" data-zoom-image="img2big.jpg">

</div>

Arquivado

como carregar script com .load() ou outra funnção?

Recommended Posts

maiconcrespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Julião 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

maiconcrespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Julião 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

maiconcrespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas Julião 34

Compartilhar este post

Link para o post

Compartilhar em outros sites

maiconcrespo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Fóruns

Tempo Real

Informação importante