I have created a quick JavaScript module that opens an image and fades out a container to reveal the image. The HTML markup for the image looks like this:
<div style="margin-bottom:1px;" class="rsNavItem rsThumb front">
<div class="rsTmb portfolio">
<img src="http://www.mysterium.ch/revelation/pictures/revelation_highres_06.jpg"/>
</div>
</div>
When a user clicks on the image, it is supposed to fade out a div and display the container. However, the event does not seem to be registering.
loadSlide: function () {
console.log('clicked');
var containerT = $('.rsnav-container'),
containerB = containerT.find('.rsThumb');
$('.rsThumb').click(function (e) {
console.log('clicked again');
e.preventDefault();
var sliderObject = $('.collection #gallery-t-group').data('royalSlider');
var s = this;
$('body').addClass('rsSlider-active');
$('.loader').show().transition({
opacity: 1
}, 100, 'easeInOutQuart');
$('.body').transition({
opacity: 0
}, 100, 'easeInOutQuart');
setTimeout(function () {
$('.body').transition({
opacity: 1
}, 500, function() {
$('.loader').transition({
opacity: 0
}, 500).hide();
});
theSliderActivated();
theSocialActivated();
sliderObject.updateSliderSize(true);
$('div#container').css('margin',0);
}, 1000);
});
}
The script is included at the top of the page like so:
init: function() {
var app = this;
this.fakingIt();
this.loadSlide();
this.unloadSlide();
this.mobileNav();
this.loadThumbs();
this.royalSlider();
this.thumbsSwitch();
this.functionResize();
this.theSocialActivated();
this.slideEventChange();
console.log('======> new.global.js');
}
However, despite including the script correctly, the click event is still not being registered. I am unsure where the issue lies - any suggestions would be appreciated.