Ir para conteúdo

POWERED BY:

Arquivado

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

Fábio BN

Gallery & Lightbox, não funciona

Por , em Javascript

Recommended Posts

Fábio BN    17

Fábio BN
Postado

Oi Pessoal alguém sabe por que isso não quer funcionar aqui?
Aparece as fotos mas quando clica não faz nada, quando passa o mouse também não.

 

Uma galeria de Fotos com ZOOM:

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery elevateZoom Demo</title>
	<script src='jquery-1.8.3.min.js'></script>
	<script src='jquery.elevatezoom.js'></script>
	<style type ="text/css">
/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}

 /*Change the colour*/
 .active img{border:2px solid #333 !important;} 
</style>

</head>
<body>
<h1>Gallery & Lightbox</h1>
<img id="#img_01" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/> 
<div id="gal1">
<a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
<img id="#img_01" src="images/thumb/image1.jpg" />
 </a> 

<a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
 <img id="#img_01" src="images/thumb/image2.jpg" /> 
</a> 

<a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg"> 
<img id="#img_01" src="images/thumb/image3.jpg" />
 </a>
 <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
 <img id="#img_01" src="images/thumb/image4.jpg" />
 </a>
 </div>
<script>
//initiate the plugin and pass the id of the div containing gallery images
 $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox $("#zoom_03").bind("click", function(e) {
 var ez = $('#zoom_03').data('elevateZoom');	
$.fancybox(ez.getGalleryList()); 
return false; 
});

</script>
</body>
</html>

Site de onde retirei o código:
http://www.elevateweb.co.uk/image-zoom/examples

 

 

Obrigado!

 

Fábio!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Consegui fazer funcionar:

Agora só falta eu aprender como fazer a imagem clicada abrir numa imagem estilo modal com navegação lateral e botão close.

<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery elevateZoom Demo</title>
    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>

    <style>
    /*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}

 /*Change the colour*/
 .active img{border:2px solid #333 !important;}
    </style>

</head>
<body>

<img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>

<div id="gallery_01">

  <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img id="zoom_03" src="images/thumb/image1.jpg" />
  </a>

  <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img id="zoom_03" src="images/thumb/image2.jpg" />
  </a>

  <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img id="zoom_03" src="images/thumb/image3.jpg" />
  </a>

  <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="zoom_03" src="images/thumb/image4.jpg" />
  </a>

    <a href="#" data-image="images/small/image5.png" data-zoom-image="images/large/image5.jpg">
    <img id="zoom_03" src="images/thumb/image5.jpg" />
  </a>


</div>

<script>
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom'); 
    $.fancybox(ez.getGalleryList());
  return false;
});
</script>


<script>
    $('#zoom_03').elevateZoom({

zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   }); 
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Alguém sabe como fazer com que uma foto clicada seja aberta dentro de uma modal? Onde é possível navegar pelas fotos clicando nas setas, ou pelo mouse, igual aparece no site que fornece o complemento?

 

Abraços!

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