Make Whole Portfolio Thumbnail Clickable


#1

Does anyone know how to make the whole thumbnail clickable? I’m trying to remove the arrow and plus sign that appear during the hover state on a thumbnail.


#2

Could you please share the page URL?


#3

Hello,

Please add the following JavaScript snippet on Theme Options > Advanced > Custom JS and save your changes.

(function($){
    $('.mk-portfolio-item').each(function(){
         var href = $(this).find('a.hover-icon').attr('href');
  
         $(this).on('click', function(e) {
              var senderElementTag = e.target.nodeName;

              // Do no propagate to parent when either an <a> tag
              // or an <svg> element is clicked. These elements usually
              // have other functionalities attached to them.
              if (!/a|svg/i.test(senderElementTag)) {
                   // Simulate behavior of clicking a link.
                   window.location.href = href;
              }
         } );
     });
})(jQuery);

Then add the following CSS snippet on Theme Options > Advanced > Custom CSS and save your changes.

.mk-portfolio-item {
     cursor: pointer;
}

After that the whole portfolio thumbnail will be clickable.

Best regards,
Artbees Support.


#4

The URL is www.turntoamplify.com

Will try out the JavaScript snippet, thank you!


#5

Thank you! Is there a way to show the categories on the hover state but remove the arrow and plus button?

If you look at this screenshot, it doesn’t look good with those two elements.


#6

Hello Tatyana,

I managed to make the whole portfolio thumbnail clickable, thanks to your JS code. So thanks for that! :smiley:

Yet, I remain with a small issue: my portfolio has many thumbnails (close to 100) and I have asked the portfolio to show only the first 12 thumbnails. Your code works perfectly on these 12 first items, but does not work on the items which are charged only when scrolling the page.
You can see the problem here: http://siegl1880.com/collection/

Can I possibly change the JS code to fix that? (I am really not an expert in JavaScript)
Thanks in advance for your great help!
Olivia