I am writing a script to prevent people from being able to right click on an image. Once they click on the image I have set a Alert box to show to state that the images are copyrighted. To try and explain how this works, the image is in a model that doesnt appear in the DOM until another ID is clicked (done through AJAX). The script I have waits till the ID is clicked and the model loads, and then executes the function to show the Alert if there is a right click. The issue is, there are multiple buttons that can be clicked on to make the model appear, and so, in my code I targeted each of them, and if any of them are clicked, the function fires. The issue happens when you click the ID to make the model appear, close the model, and then click another ID to make the same model appear. When this is done, the alert shows multiple times. And so, if you spend some time clicking on all the IDs that fire the function, when you eventually right click the image, the alert may show 10-20 times. I am looking for a way to make the alter only show once, no matter how many times the function is executed.
My script is below:
function imageClickerz( ) {
$( "#sb-wrapper-inner" ).each(function( index ) {
$('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) {
switch (event.which) {
case 3:
alert('Sorry, our images are copyrighted.');
break;
}
});
});
}
$("#product_photo").hover(function(){
setTimeout(function (){
$('div[id^=vZoomMagnifier], img[id^=alternate_product_photo_], .vCSS_img_product_photo, .vCSS_img_larger_photo, #product_photo, #sb-nav-previous, #sb-nav-next, ').click(function(event){
setTimeout(function (){
imageClickerz( )
}, 800);
});
}, 100);
});