Jump to content
NunoDinis

Problema com galeria de imagens

Recommended Posts

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 ?


Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Share this post


Link to post
Share on other sites
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 by NunoDinis

Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.