disable photos & photoset permalinks tumblr

I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)

I've tried removing {LinkOpenTag} and {LinkCloseTag} from:

{block:Photo}
<div class="wide-sizer">
    <div class="image">
        {LinkOpenTag}
            <img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
                data-high-res="{PhotoURL-HighRes}"
                data-width="{PhotoWidth-HighRes}"
                data-height="{PhotoHeight-HighRes}"
            />
        {LinkCloseTag}
    </div>

But photos and photosets are still clickable.

This is my page: http://woodstudiofr.tumblr.com I'm using the "Spectator Theme".

UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.

Any ideas? thanks again for your time !

Solution

As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.

Go to the bottom of your template, before the closing <body> tag and add this code:

<script type="text/javascript">
   $(document).ready(function(){
      $('.post').unbind('click').click(function(){});
   });
</script>

(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).

I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).

EDIT

In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).

Alternatively inside the style tags at the bottom, add the following css:

.post-grid .post.photo.clickable a,
.post.clickable {
    cursor: default;
}