Slideshow Drag and Drop Enquiry.

deadman2k

Hi All,

I have a customer wanting to display images of their artwork, however they requested that right click and drag and drop to be disable on all images within their galleries.

I have successfully managed most of the request by updating the theme to include:

`
function nocontext(e)
{
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG")
{
//alert(alertMsg);
return false;
}
}
//var alertMsg = "Image context menu is disabled";
document.oncontextmenu = nocontext; //]]>

window.onload = function (e)
{
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop

if (evt.preventDefault)
{

imgs = document.getElementsByTagName('img');
for (i = 0; i < imgs.length; i++)
{
imgs[i].onmousedown = disableDragging;
}
}
};

function disableDragging(e)
{
e.preventDefault();
}
`
The above javascript/jquery is load as part of the header of the theme, however the above works fine for the exception of images displayed within Colorbox and Slideshows where images are still dragable.

So my enquiry is how can I stop these image presented in Colorbox and the Colorbox Sideshow from being dragged?

deadman2k

I'm using:
Zenphoto Ver: 1.4.5.9
Pluggin: Slideshow setting Colorbox
Theme: Customised I-Feel-Dirty

acrylian

The only secure image is the image you don't put on the net…

Please see a text we prepared for rather pointless measures of protection like this: http://www.zenphoto.org/news/site-protection#disabling-the-right-click-button

deadman2k

I understand the image security, but it does not help with my clients request, everything else seems to work fine, apart from image drag when displaying within the colorbox.

The images will also be secured as outline in the link above, but as mentioned the client is insistent of having these images prevented of being dragged.

Ive search the internet and the forum and not being able to find a solution. I have even inspected the page source to try an identify which object/element over-riding conditions set out in the header.

Ive even tried to find out where the element is being generated:

`

`
However Ive not being able to identify the script that is generate the above code, to manually add a do not drag statement:

`ondragstart="return false;" ondrop="return false;"`

To address my issue.

So where can I manually add the above to address my issue, if the Colorbox and Slideshow are ignoring my conditions outlined in my theme?

acrylian

The link above was meant to make clear that these are IMHO rather pointless measures (If you can't drag you can simply make a screenshot…).

It would be better if you could educate your client how the web works… Sorry, I really cannot help with this issue. This is also not really a Zenphoto specific problem.

Scripts are loaded by the theme_head filfer so whatever you wish to do you need to do it after that.

You find info about colorbox itself here: http://www.jacklmoore.com/colorbox/

deadman2k

Thanks for the advice.

I have been in contact with Jacklmoore.com and they have advice using the onComplete function that is available within Colorbox.

"Colorbox create's a new <img> element, which wasn't in the document at the time you looped through them all assigning event handlers. You should use Colorbox's onComplete callback so that you run your code after it has added your content to the document."

For example:

`
$('a.example').colorbox({onComplete:function(){
var $img = $('.cboxPhoto');
// do whatever you want to $img here
}});
`
So how would I amend my theme to use DO NOT DRAG, theme in current use is I-Feel-Dirty? as I have tried: Adding the following after line: 112 and 134;

`
onComplete:function(){disable drag #}
`
Disable Drag 1:
`
$("img").mousedown(function(){ return false; });
`
Disable Drag 2:
`
window.onload = function (e)
{
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault)
{
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++)
{
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};

// disable image dragging
function disableDragging(e)
{
e.preventDefault();
}
`
And i've tried a few others.

But I have been unable to get this to function, please advice where I'm going wrong, and if possible an easy solution in order for me to address this matter.

deadman2k

OK I have finally found a work around, as above I have had major issues trying to get the Colorbox `onComplete` to work. I decided to put a work-around in place:

• Go to https://github.com/jackmoore/colorbox/releases/tag/1.4.5 and download Colorbox 1.4.5 archive.
• Uncompress jquery.colorbox.js to your ZenPhoto Folder/zp-core/zp-extensions/colorbox_js Folder.
• Create a backup of jquery.colorbox-min.js file.
• Rename jquery.colorbox.js to jquery.colorbox-min.js
• Now edit the jquery.colorbox-min.js in a text-editor.
• Find line 919 and add the following lines in between line 919 <-> 920.
  • photo.setAttribute('ondragstart', 'return false;');
  • photo.setAttribute('ondrop', 'return false;');
  • photo.setAttribute('onmousedown', 'return false;');
  • photo.setAttribute('onselectstart', 'return false;');
• Save the file

This has now protected images from been dragged or selected whilst being displayed in a Colorbox.

Which has finally answered and fixed my problem outlined here.

Thanks to ACrylian and the Guys from Colorbox (jacklmoore.com for quick responses regarding this matter.