Make portfolio images clickable

Tagged: clickable image, link, portfolio

This topic contains 14 replies, has 3 voices, and was last updated by CTHthemes 9 hours, 57 minutes ago.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 5, 2018 at 8:55 pm #27163

tolucophoto
Participant

Support Expired

Hi.
I’m using the Fullwidth portfolio and I’d like to make the image clickable as a link, rather than the image’s title.
I’d also like to hide the title text.

Is this possible?

Thanks

November 5, 2018 at 10:22 pm #27164
tolucophoto
Participant

Support Expired
I worked out how to remove the title text using this, but obviously this means you can’t click anything to enter the portfolio:
```
.thumb-info {
  display: none !important;
}
```
I found another support post that offers this code for the scripts.js file, but your screenshot doesn’t show up, and when I add it where I think it needs to go, it doesn’t work.
```
$(".swiper-slide.portfolio img").on("click", function(e) {
            e.preventDefault();
            var a = $(this).parent().find('.thumb-info h3 a').attr("href");
            window.location.href = a;
            
        });
```
Cheers
November 6, 2018 at 10:39 am #27177
CTHthemes
Keymaster
Because you used this code:
```
.thumb-info {
  display: none !important;
}
```
Please use this instead:
```
.thumb-info {
  opacity: 0;
}
```
November 7, 2018 at 12:24 am #27197
tolucophoto
Participant

Support Expired
That works fine, but I’d still like the whole image to be the clickable link, not just the text.

What code do I need to add? And where? I’m using the Fullwidth portfolio.

Thanks
- This reply was modified 11 months, 2 weeks ago by tolucophoto.
November 7, 2018 at 9:47 am #27211
CTHthemes
Keymaster
Here it is:
```
.thumb-info {
  top: 0;
  opacity: 0;
}
```
November 7, 2018 at 3:58 pm #27222

tolucophoto
Participant

Support Expired

This just moves the hidden text to the top left? It doesn’t make the whole image a clickable link.

When anybody uses the site they try to click on the image and nothing happens. It’s especially annoying on a mobile.

You answered the same question in this post with a JS code, but it didn’t work when I tried it.

November 8, 2018 at 10:57 am #27233
CTHthemes
Keymaster
Try this
```
.thumb-info { 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
```
October 9, 2019 at 9:01 pm #37203

heybill
Participant

Supported

I have the same question:
How to make portfolio images clickable?

Thanks.

October 10, 2019 at 4:43 pm #37237

CTHthemes
Keymaster

You can try the solution, but don’t sure if it work?

October 10, 2019 at 11:39 pm #37273

heybill
Participant

Supported

I don’t see a solution here. I’m not concerned about removing the text. I just want to make the images clickable. Thanks.

October 14, 2019 at 9:32 am #37319

CTHthemes
Keymaster

Send me your page to check if it’s possible.

October 14, 2019 at 10:44 pm #37382

heybill
Participant

Supported

Hello,
Also when hovering over and image on this page: http://www.krkfinearts.com/dev/portfolio-sidebar-filter/

I want the title to show up, but not the descriptive text below that. I can’t seem to find a way to eliminate thethat text on hover – please advise.

Thanks.

October 15, 2019 at 10:21 am #37416
CTHthemes
Keymaster
Try this modification: https://prnt.sc/pjcm3q
```
$(document).on("click", '.gallery-item .grid-item-holder img', function(e) {
            e.preventDefault();
            var a = $(this).parent().find('.thumb-info h3 a').attr("href");
            window.location.href = a;
            
        });
```
October 18, 2019 at 1:48 am #37509

heybill
Participant

Supported

That solution broke the site. Please provide an alternative solution for making portfolio images clickable.

October 18, 2019 at 5:03 pm #37534

CTHthemes
Keymaster

Did you add the code correctly? Right bellow initparallax(); callback
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.