Image with hover effect + pfd link opens in lightbox

Permalink Browser Info Environment
Hi,

So i'm currently working on this project:http://www.udh-ronse.be/index.php...
At the slide with the activities (Activiteiten 2015) i want to have images with a pfd link that opens in a lightbox + the images have a hovereffect (with another image).

So i can't use the content block because that takes away the hover effect, and i can't use the image block because that takes away opening the pfd in a lightbox.

Any solutions?
Thanks

Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply
jordif
Hi!

You could try this:

1. Add an image block with hover effect and a link to the PDF.
2. Click on the Image block, choose Design & Custom Template, click on the Gear Icon and add a Custom Class, for instance "pdf-link".
3. Add an HTML block to the same slide with the following code:

<script type="text/javascript">
$(document).ready(function() {
  $('.pdf-link > a').magnificPopup({type:'iframe'});
});
</script>


Now all image blocks with the class "pdf-link" should open the link in a lightbox.

Hope this works for you!

Jordi
grafoman replied on at Permalink Reply
Works, thanks!

I'm having some problems for showing the pictures the right size in de lightbox.
For instance on a small mobile: can i scale the image? I can't seem to get it working.

Edit: in other words:
How can i make the popup window fit the size of the image + make it responsive? I looked through the documentation of magnific popup but i can't find the solution.
jordif replied on at Permalink Reply
jordif
Hi!

The code I posted was meant for PDF files, if you plan to open images you only need to change the type from "iframe" to "image" (Magnific Popup works very well with images, it will take care of making them responsive, etc.)

If you want to open both PDF files and images you can use the following code:

<script type="text/javascript">
$(document).ready(function() {
  $('.pdf-link > a').magnificPopup({type:'iframe'});
  $('.image-link > a').magnificPopup({type:'image'});
});
</script>


And then add the class "pdf-link" or "image-link" depending on the type of content you want to open.

Regards,

Jordi
grafoman replied on at Permalink Reply
Wow, okay! The original plan was to link pdf's, but i converted them to images along the way. So i was to focused on that.

Another easy and perfect solution that works. Thanks again!

concrete5 Environment Information

Unable to load

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.