search

codrops / ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
360 stars 143 forks source link

Only show link button for certain images #16

Open davekoen opened 9 years ago

davekoen commented 9 years ago

I am working on a website where I wanted to only show the "visit website" link for certain items. I read through the comments on http://tympanus.net and found this...

The whole thing functions off the <a> tag so you have to work with it. Therefore no matter what you do you’ll end up with a “visit website” link but you can hide it when you want. If you have a link it will insert the link but if there is no link it will just have <a href="#">visit website.</a> So in instances where we get the “#” we want to hide the element.

If you look at line 390 you will see this:

this.$href.attr( &#039;href&#039;, eldata.href );

Change/add in this:

if((eldata.href).indexOf('#') >= 0) { this.$href.attr( 'style', 'display:none;' ); } else { this.$href.attr( 'href', eldata.href ); }

It indexes the value of “eldata.href” and if it finds the “#” it applies an inline style to display none. Otherwise it goes on like normal. Works for me.

I've implemented it on my site with one little problem...

If you click on an item that does not have a link, it will not show up but if you click directly to an item that should, the link is still not visible. If you close the expanding part and reopen it, the link will be visible.

Any ideas?