Problema com galeria de imagens

[NunoDinis]

Boa tarde,

Numa aplicação que estou a desenvolver tenho que inserir uma galeria de imagens. Já a concluí e está a dar como pretendo, mas há um pequeno senão. Eu chamo essa mesma galeria dentro de uma página chamada pelo index.php (está desenvolvido assim porque a página onde estará a galeria terá uns filtros dinâmicos feitos em ajax), e quando carrego sobre uma imagem para abrir em tamanho maior não me obedece, e não faz nada 🙂

Já pensei que fosse conflitos de js, caminhos mal direcionados, mas já testei várias vezes, de diversas formas e continuo com o problema.

Alguma ideia ?

[yoda]

Experimentas-te usar o Inspector (Chrome) ou Firebug (Firebox) para ver se ocorria algum erro no javascript? Deixa aqui o código.

[NunoDinis]

Não, vou usar, ainda que não pareça ser porque se fosse não dava num ficheiro aparte. Estou certo ? 🙂

O javascript:

<!--TESTE GALERIA-->
$(document).ready(function() {

//select all the a tag with name equal to modal
$('#left_boxes img').click(function(e) {
//Cancel the link behavior
e.preventDefault();
var imgID = $(this).attr('id');
//Get the A tag
var id = $(this).attr('src');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(200);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$("#dialog2").css('top', winH/5-$("#dialog2").height()/5);
$("#dialog2").css('left', winW/2-$("#dialog2").width()/2);

//transition effect
$("#dialog2").fadeIn(500);
$("#showImage").html('<img src="'+id+'" id="'+imgID+'" width="500" height="340" />');

});

// next
$('#next').click(function(e) {

var id = $('#showImage img').attr('id');

if($("#left_boxes").find('img').length == id)
id = 1;
else
id = parseInt(id)+parseInt(1);

$("#showImage").html('');
$("#showImage").html('<img src="'+id+'.jpg" id="'+id+'" width="500" height="340" />').fadeIn(700);

});

// prev
$('#prev').click(function(e) {

var id = $('#showImage img').attr('id');

if(id == 1)
id = 12;
else
id = parseInt(id)-parseInt(1);

$("#showImage").html('');
$("#showImage").html('<img src="'+id+'.jpg" id="'+id+'" width="500" height="340" />').fadeIn(700);

});

//if close button is clicked
$('.window #hide').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
//$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

});
</script>

HTML:

<div id="left_bar">
 <div id="left_boxes">
 <div class="box"><img src="galerias/GALERIA/1.jpg" width="120" height="100" id="1" /></div>
 <div class="box"><img src="galerias/GALERIA/2.jpg" width="120" height="100" id="2" /></div>
 <div class="box"><img src="galerias/GALERIA/3.jpg" width="120" height="100" id="3" /></div>
 <div class="box"><img src="galerias/GALERIA/4.jpg" width="120" height="100" id="4" /></div>
 </div>
 </div>

 <div id="dialog2" class="window">
 <table>
 <tr>
	 <td>
	 <img src="prev.png" id="prev" height="40" title="Anterior" />
	 </td>

	 <td>
	 <!-- IMAGEM -->
	 <span id="showImage"></span>
	 <img src="close.png" id="hide" height="40" title="Fechar" align="right" />
	 </td>

	 <td>
	 <img src="next.png" id="next" height="40" title="Seguinte" />
	 </td>
 </tr>
 </table>
 </div>
 <div id="mask"></div>
 <br clear="all" /><br clear="all" />

Edited April 23, 2013 at 03:40 PM by NunoDinis