3d gallery link problem

[jundo12]

basically, i need to add links to the images in the gallery i found here http://tympanus.net/Development/3DGalleryRoom/ i was able to add the image links but they don't do anything when clicked, presumably because the images are encased in special divs called "figure". figure is further defined with css and javascript files, that i have yet to find any reason for not allowing the images to be clickable. the cursor reacts on hover to the image link being present but something is stopping it from being clickable. in effect, what is stopping the image links from accepting the click ? is it the css or is it javascript? if the javascript, ill post this in the javascript area instead.

[jscheuer1]

First thing I would try is getting rid of this set of rules (component.css around line 69):


.gr-gallery figure::before {
content: '';
position: absolute;
width: 180%;
height: 150%;
top: -45%;
left: -40%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 23%, rgba(255,255,255,0) 66%);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 23%, rgba(255,255,255,0) 66%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 23%, rgba(255,255,255,0) 66%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.7) 23%, rgba(255,255,255,0) 66%);
pointer-events: none;
opacity: 0.5;
}

There could be other issues and/or this may have nothing to do with it, those images are not linked, so it's hard to tell.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please provide a link to a page on your site that shows the problem.

[jundo12]

thank you for the help. i swear you must be the best problem solving webmaster i have ever met. you're fast to respond, have a wide swath of knowledge on the related topics and are generally awesome.

i currently don't have this uploaded to the net and no way to do so, so there's no way for me to show you other than to copy/paste it in the box here.

[jscheuer1]

I've played with this a bit more. I don't think my above solution will work. The problem appears to be that the gallery script sets the return value on all clicks to the figure elements to false. This prevents links from inside them from firing. It can be worked with, but I'm going to have a closer look before I determine the easiest way.

[jscheuer1]

Looks like the easiest thing might be to add a hard coded onclick event to those links, ex:


<figure>
<div>
<a href="http://www.google.com" onclick="window.location.href = this.href; return true;"><img src="images/11.jpg" alt="img01" /></a>
</div>
<figcaption>
<h2><span>Penn. Station, Madison Square Garden and Empire State Building</span></h2>
<div><p>New York City, 2009, by <a href="http://www.flickr.com/photos/thomasclaveirole">Thomas Claveirole</a></p></div>
</figcaption>
</figure>

This still might not work though. And remember first:

The browser cache may need to be cleared and/or the page refreshed to see changes.

[jundo12]

I've played with this a bit more. I don't think my above solution will work. The problem appears to be that the gallery script sets the return value on all clicks to the figure elements to false. This prevents links from inside them from firing. It can be worked with, but I'm going to have a closer look before I determine the easiest way.

thanks! i'm excited. i'm wondering why the author didn't include it, as galleries usually have the option to click and see larger version as well, although my intention is to make it link to a different page, not open a larger version of the image.

[jundo12]

Looks like the easiest thing might be to add a hard coded onclick event to those links, ex:


<figure>
<div>
<a href="http://www.google.com" onclick="window.location.href = this.href; return true;"><img src="images/11.jpg" alt="img01" /></a>
</div>
<figcaption>
<h2><span>Penn. Station, Madison Square Garden and Empire State Building</span></h2>
<div><p>New York City, 2009, by <a href="http://www.flickr.com/photos/thomasclaveirole">Thomas Claveirole</a></p></div>
</figcaption>
</figure>

This still might not work though. And remember first:

The browser cache may need to be cleared and/or the page refreshed to see changes.


It works! Woohoo! Thank you, sir. you are a genius!

[daalevis]

actually it works :D