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
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 |
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.
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.
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:
And then add the class "pdf-link" or "image-link" depending on the type of content you want to open.
Regards,
Jordi
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
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!
Another easy and perfect solution that works. Thanks again!
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:
Now all image blocks with the class "pdf-link" should open the link in a lightbox.
Hope this works for you!
Jordi