Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

maiconcrespo

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

Por , em Javascript

Recommended Posts

maiconcrespo    0

maiconcrespo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

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 :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

maiconcrespo    0

maiconcrespo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito