codrops / imagegrideffects

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

Image Grid Effects

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

Article on Codrops

Demo

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

Credits

Masonry by David DeSandro. Released under the MIT license.

Font Awesome created by Dave Gandy. License: Font Awesome license information.

Camera icons made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Images from Unsplash.com

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2015

imagegrideffects's Issues

Example 5 Different Album Link

Hi again:)

i want to give different album links to collages actually i want to make different collages for every different images . Is there any solution for this?

Edit: i bring button to desc. and ok but different collages still waiting

Demo 2, pop up scrolling

Hi,

First of all, amazing grid and thank you for sharing.

Now, the problem. I am using this grid and when I click the image it pops up and everything is good, but when I scroll it the pop up with the original image and the details scrolls and don't stay on top. Or when I scroll down the grid and click an image that is way down on the grid I get a black screen unless I scroll to the top of the page where the pop up preview is stuck. I want it so that when I click the image it does not scroll, and when I look at your demo it works and on mine it scrolls.

(Everything is good until....)

(... you scroll and the black at the bottom shows up.) (P.S. Ignore the spelling error in the image. ;P)

I think I know where the problem lies, but don't know how to fix it. So here is where I think it is.
Since I am using another Tympanus theme called "Page Stack" and that theme is not scrollable and I wanted to use your grid theme (which needs scroll), I made it scrollable by writing page.style.overflow = 'scroll'; into the following javascript for the navigation.

 for(var i = 0; i < pagesTotal; ++i) {
            var page = pages[i],
                posIdx = stackPagesIdxs.indexOf(i);

            if( current !== i ) {
                classie.add(page, 'page--inactive');

                if( posIdx !== -1 ) {
                    // visible pages in the stack
                    page.style.WebkitTransform = 'translate3d(0,100%,0)';
                    page.style.transform = 'translate3d(0,100%,0)';
                }
                else {
                    // invisible pages in the stack
                    page.style.WebkitTransform = 'translate3d(0,75%,-300px)';
                    page.style.transform = 'translate3d(0,75%,-300px)';     
                }
            }
            else {
                classie.remove(page, 'page--inactive');
                page.style.overflow = 'scroll';
            }

Now I don't know how to make it so that when the image preview opens page.style.overflow = 'scroll'; disables. I tried putting page.style.overflow = 'hidden'; in the javascript for the grid. I also tried page.style.height = 'initial';. So what should I change in the javascript to make it not scroll?

Here is the link to the live "website". The grid located in the menu under photos.

Issue with clickEvent for FireFox

clickEvent = (document.ontouchstart!==null ? 'click' : 'touchstart');

Just wanted to let you know, firefox returns touchstart all the time on the clickEvent var, at least for me that is.
My ff is bugged, works on my coworkers PC. Closing.

Demo 4 : Thumbnail link is not working

After pop up the image, thumbnail and arrow are not working

Ajax support

It would be super cool, if the modal content would be loaded via ajax.

Demo#02 Mobile Friendly

Hi,

Is there a possibility to smoothly change the fullscreen view ui of the selected image.
Instead of having left (photo) - right (data), can we go top (photo) - bottom (data)?

About example 2

Hi @crnacura ,
i follow tympanus few years first thanks for everything really good content!
About this grid effects i play with 2nd example i added to head modernizr.js and style2.css for body added other jss and script exaclty like example. and run it. But it didnt works error was at :
main.js :80
Uncaught TypeError: Cannot read property 'querySelector' of null
What do you think about this?

Android Firefox image popup issue

I've been playing with this and come across a very strange behaviour on firefox for android (everything else is fine, it's most puzzling), namely if the image has been cached it popups up as an image before the preventDefault() function has a chance to trigger.

Haven't been able to replicate in any other browser, so I think it might be something of an edge case, just wondered if anyone had any ideas as to what might be the cause.

Filtering Images

I'm having trouble adding functionality for filtering images. Any ideas on how users can filter images? Which functions should be altered? Similar to : https://tympanus.net/Blueprints/FilterableProductGrid/