Monday, 30 September 2013

My jquery image gallery doesn't work in firefox (23.0.1)

My jquery image gallery doesn't work in firefox (23.0.1)

I made this jquery image gallery and it works perfect in my chrome
browser. The gallery works with 3 thumbnails which you can click on to
show it in the "current_image" div.
But If I try to use it in firefox I can't click on a thumbnail to show it.
Does anyone know how I can improve this piece of code so it works in
Firefox too?
This is my jquery code:
// Image gallery
$("#small_images .small_image").first().addClass('active');
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).show();
});
$(".small_image.active").removeClass('active');
$(this).addClass('active');
});
This it the HTML:
<div id="image_gallery">
<div id="current_image">
<img id="above" width="100%" src="<?php
the_field('image_1'); ?>" />
<img id="under" width="100%" src="<?php
the_field('image_2'); ?>" />
</div><!--End current_image-->
<div id="small_images">
<?php foreach($pictures as $picture) : ?>
<a class="small_image" rel="<?php the_field($picture);
?>"><img width="100%" src="<?php the_field($picture); ?>"
/></a>
<?php endforeach; ?>
</div><!--End small_images-->
<div class="clear"></div>
</div><!--End image_gallery-->

No comments:

Post a Comment