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);
});
Make a variable var hasSeenAlert = false before all those functions. Then set up your mousedown function callback to only execute if hasSeenAlert is false.
$('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) {
if(hasSeenAlert === false){
switch (event.which) {
case 3:
alert('Sorry, our images are copyrighted.');
break;
}
hasSeenAlert = true
}
});
Instead of showing an alert and using JavaScript, place a div on top of the picture, just as effective but less invasive. Just by the way, you simply cannot stop people from downloading anything they can see on your website..
You will most likely want to grab context events, it's better to trust that rather than right click since it will also include touch events (e.g. holding down the touch to get the context)
$('#sb-wrapper-inner').on('ContextMenu contextmenu oncontextmenu', function(e) {
e.preventDefault();
alert('Sorry, our images are copyrighted.');
return false;
});
$( ".sb-wrapper-inner.protected" ).on('contextmenu', function(event) {
switch (event.which) {
case 3:
alert('Sorry, our images are copyrighted.');
event.preventDefault();
break;
}
});
you can have a look to this HTML snippet also, might look like your's
<div class="wrapper">
<div class="sb-wrapper-inner protected">
<img src="http://www.lftechnology.com/media/images/home_feature_notebook_bg.png" alt="" />
</div>
<div class="sb-wrapper-inner">
<img src="http://www.lftechnology.com/media/images/clients_interac.png" alt="" />
</div>
<div class="sb-wrapper-inner protected">
<img src="http://www.lftechnology.com/media/images/home_feature_notebook_bg.png" alt="" />
</div>
</div>
For anyone interested, this is how I corrected the issue: I set a global variable to 0, and then set the variable to 2 once the function is called. If the the variable is equal to either 0 or 2, then the code in the function will run fine. I then surrounded the other click events with a if statement so they would only run the function if the variable was 0. Therefore preventing the function from being called multiple times, and allowing the pop up to show every time the image is right clicked.
var clicked = 0;
function imageClickerz( ) {
if(clicked === 0 || 2) {
$('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) {
switch (event.which) {
case 3:
confirm('Sorry, our images are copyrighted.');
break;
}
clicked = 2;
});
}
}
$("#product_photo").hover(function(){
setTimeout(function (){
$('div[id^=vZoomMagnifier]').click(function(event){
setTimeout(function (){
if (clicked === 0 ) {
imageClickerz( )
} else {console.log("its done dude")}
}, 800);
});
}, 100);
});
$('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 (){
if (clicked === 0 ) {
imageClickerz( )
} else {console.log("its done dude")}
}, 800);
});