pqina supports this item


This author's response time can be up to 1 business day.

20 comments found.

Cool one, welcome to CC. ;)


This item is great, I love the blur effect when hovering the image, it looks so elegant! Good luck with the sales!

Thank you, glad you like it :-)

Nice! Which is the minimum jQuery version required or is jquery not required? How big are the CSS and JS files?


No jQuery required.

CSS is at 30Kb minified and JS at 7Kb, when gzipped both files are below 3 Kb.

GREAT ! I hope I can use it for my next Projekt

Looks very nice. How easy would it be to use this in a system like Wordpress or other? Is it just including the JS and adding the CSS?

Thanks, Bernhard

I don’t know, I did some research, if you’re able to add the CSS and JS files than it should work by just copy pasting the Fig HTML.

This plugin will assist in adding HTML to your posts: Raw HTML.

And this plugin should allow you to link custom CSS and JS files: Insert JavaScript CSS.

If you want to create rows of Figs (as on the demo pages) you can use the following snippet.
<div class="fig-row">
    <article class="fig-item">
        <!-- fig html here -->
    <article class="fig-item">
        <!-- fig html here -->
    <article class="fig-item">
        <!-- fig html here -->

Be sure to not add a width attribute to the image tag when using it in the above .fig-row setup. You can have as much .fig-item blocks in a row as you want, they will be evenly distributed.

Looks great, good luck with sales :)

Thank you!

Looks great Rik! ;) Good luck with the sales!

Thanks! :-)

Absolutely brilliant! Bought it to try to integrate with Rapidweaver. Nothing to it, all up and working beautifully in less than an hour. Now it’s figured out (see what I did there?) I reckon it’s about as easy as you could make it. The results are awesome! Thanks -Stuart.

Excellent pun! :-D

Good to hear some feedack, thank you!

Hello again.

Yes, Fig is absolutely brilliant – loving it. But I do have one (hopefully small!) question if I may?

I desperately wish to be able to slow down the on-hover zoom effect. Ideally I would like it around three times slower. I think that would give a sort of ‘Ken Burns’ type effect on hover.

Looking at the source I can see in the .scss files various values that look like timers. For a basic Fig with:


Would you be able to simply point me to the right file which contains the timing settings. I’d really appreciate it.

..... Please???

Thanks, Stuart

No need. I worked it out. Got exactly the effect I wanted. Brilliant. Definitely going to develop a little library of custom fig.css files to use as required. Awesome stuff!

Excellent! :-)

I have to do support in the evening so could not respond earlier. Some predefined animation speed options might be a nice feature to add in a next version.

Any way to make this responsive?

Currently working it. It will feature a set of classes to present the Fig elements in various grids.

The current version has scaleable images and responsive grids.

cool…. cant wait to test this out

Hi Rik,

Thanks for this plugin, its really nice and easy. i was just wondering if i would be able to get the unminified css to strip out all the the code im not using?

Cheers, Andrew

Please contact me through the support section and I’ll send you the file :-) I’ll also see to it that it’s included in the next version.

Can I use this with a light box gallery viewer like Highslide or how can I use this to create an active window slideshow pop-up for the galleries I create?

Thx, Alec

Your code has great value with or without lightbox so I purchased :-)

Thanks! :) And thank you for your question, I’ll probably add some example lightbox library implementations to the docs in the near future.

If you remember me, please let me know when you do :-)

This is a great item, but I have 2 problems. 1. I can’t set it to display an image in its original size, the image always zooms a bit when showing (so its a little bit blurred), even when I don’t supply an intro effect. 2. I can’t get a blur effect of figcaption (fig-fill-blur) to show on my own photoshop edited jpg images. It only works on an original images in the media folder.

Thank you. Zvonimir.

It’s possible other scripts might be delaying/blocking the image load, (I noticed on Safari the image only loads after the google search component). You could remove the ‘data-src’ attribute and set the ‘src’ attribute directly, that should make it load the image immediately.

Yes, using src attribute instead of data-src solved the problem. Thank You, great support…

You’re welcome! Glad everything is working! :-)

Thanks for the great job, but i have an issues. If load the page then the animations performed also in the same time. Then they stops and not animated again. If is maybe a JS conflict? The template is “Flights” http://themeforest.net/item/flights-creative-portfolio-wordpress-theme/full_screen_preview/6913832 Thank you.

Do you maybe have a public location I could test this? Happy to assist.

Thank you and sorry, i had an error in the configuration. The fig works well ;-)

Best regards

Glad to hear it :)

I was about to buy this, I made an account on here any everything, even got my credit card out… But this site wants me to ‘add credit’ to my account so that I can spend the credit I’ve ‘added’. The minimum you can add is $20, So I’d be left with $15 worth of ‘credit’ wasted. ( I won’t even mention the $2 ‘surcharge’ for using paypal… A dirty and underhanded way of them screwing me for more $$. Sorry rikschennink, totally worth $5 but I’m not getting conned by a website in the process.

I was not aware of this, I’m afraid I can’t influence it either. Thanks for the positive feedback though. :)

How can I control the speed of the effects?

Out of the box this is currently not possible as the various transitions are finely tuned to match each other.

You can override the default transition speed using the transition-duration CSS property in another CSS file. Use Chrome Web Inspector to see which transition styles are applied to which part of a fig element and override them accordingly.

Mozilla docs on transition-duration

Hi How to I change the fig height ? I only set the width, but height not ?

thanks :)

Most times you’ll want the height of the image automatically derived from the width (using the images aspect ratio). You can however also set the ‘height’ attribute and force a certain height. It’s currently not in the configurator but you can add it manually.

I would like to say thank you for the support. I had some issues and Rik helped me every step of the way. Thanks for the assistance and I appreciate your work. :)

You’re welcome :)

Hello, I think, I have to trigger the script again by pushing a “load more” button. I´m using a masonry grid and containers are hidden when I click “load more”. data-state=ready and the framework around the images do show up . Hope you can help me out with script I have, using a “load more” button. Best Tom

Hi Tom, please contact me an email (containing a link or a zip with your files) via the contact form on my profile page, I’ll see what I can do :)

Do you have a sample where fig gallery images open in a lightbox? I want to use the fig animation effects and would like the images to open in a lightbox with the ability to go to the next and previous image w/o leaving the lightbox.

I currently don’t have such an example. Most lightbox scripts should work with Fig without problems.

Hi pqina and thank you for this awesome product. I purchased it from another account and I got it to work properly. I would like to know: is there a way to make the caption always visible on mobile devices like phones and tablets? Thank you.

Thank you very much, I am going to give this a try.

Yes window.matchMedia is a very good approach. How do you suggest hiding the data-interact attribute using this technique? Thanks.

Select the element with document.querySelector and use elementVariable.removeAttribute('data-interact');