Code

Discussion on Gridzy – Responsive and Justified Image Grid Gallery

Discussion on Gridzy – Responsive and Justified Image Grid Gallery

By
Cart 624 sales

eHtmlu supports this item

Supported

51 comments found.

Hi!! the Gridzy Image Gallery Grid for WordPress will be removed forever?

Hi!

Thank you for your interest!

Yes, unfortunately I had to remove it, because it’s not profitable. If you use the Gutenberg editor, you could try Gridzy for Gutenberg: https://gridzy.gallery/#headline-808-2

Gallery images do not appear when javascript is disabled. I have added a wrapper to try and override the styling but it did not work. See below:

no-js .gridzyItem {opacity: 1 !important; transform: none !important; visibility:visible !important}

Can you tell me the proper style(s) to target? I would like the images to be visible, even if it won’t be pretty. Thank you!

please try .gridzy>:not(.gridzyItem) with visibility: visible;

Thanks! Targeting .gridzy, .gridzyItem, and the class you mentioned worked. I also had to include height : auto in addition to visiblility: visible to avoid overlapping images. Finally, I added target _new to the link so the images would at least open in a new window, if not a nice lightbox. This did not have a negative impact on the lightbox on the JS enabled experience – very nice!

Great that you could solve the rest yourself! If you have any other questions, just let me know ;)

Is there an option to have the image gallery where if I click an image I see a larger version or this can only be a flat gallery?

Hi

thank you for your question. Gridzy.js itself doesn’t have an own lightbox included, but it can be combined with many lightboxes out there.

There are tutorials for combining Gridzy.js with two free lightboxes:

Gridzy.js combined with PhotoSwipe: Tutorial: https://ehtmlu.com/blog/the-royal-association-gridzy-js-photoswipe/ Lightbox-Website: https://photoswipe.com/ (PhotoSwipe is in my opinion the most professional lightbox out there)

Gridzy.js combined with Magnific Popup: Tutorial: https://ehtmlu.com/blog/gridzy-js-magnific-popup/ Lightbox-Website: https://dimsemenov.com/plugins/magnific-popup/

If you would like to combine it with another lightbox, please let me know.

I hope this helps. If you have any other questions, don’t hesitate to ask.

Best regards, Helmut

Incredibly helpful. Thank you so much. Great website you have as well.

I’m glad that I could help. Thank you very much for your nice feedback :)

Question before buying: is it possible to add a textarea to each box? I want to add an image slider (which opens a full-screen image) and simple HTML text below each box. It should behave responsively.

Hi,

Thank you for your interest. I am not sure I understand your needs. Can you please describe it in more detail?

Thank you very much and best regards, Helmut

I would like to add an image and simple HTML text BELOW the image in one Gridzy box. Also, the image shall be switcheable, like in a slider – from left to right and backwards (I might have to buy a simple slider for it) – so that I can change the image inside the Gridzy box as frontend user. It shall behave responsively, means, If I change the size of the site, I should not have overlappings or anything. Thanks in advance.

In general it is possible to put everything in a Gridzy box. So instead of an image, you can insert a smaller image or a slider that doesn’t fill the entire box and add text under the image/slider but inside the box. One important thing, however, is: When Gridzy initializes a box for the first time, the aspect ratio of the box is locked and cannot be changed afterwards. This can be a responsiveness issue, especially when the number of lines of text changes and the box contents take up less or more space in height. Gridzy has an option that allows you to bind the font size to the size of the box so that the text is also scaled when the box changes size. This can help a little, but it also means that the text size in different boxes can and will be different.

It’s hard to tell if it would work for you, because it’s really tricky. If you want to try it you can buy Gridzy and if it doesn’t work for you I will simply refund you. That really wouldn’t be a problem.

If you have any other questions, please let me know.

best regards, Helmut

Hi there! I’m looking for something that can dynamically create a gallery. I have a software watching a folder, when a new file is added is uploaded to a folder on my server, it is possible to generate a gallery “on-the-fly” or dynamically update an existing gallery as I need it? Thanks for your time

Hi,

thank you for your interest. Gridzy.js is a client side JavaScript that builds a gallery based on the HTML of a website. Of course you can build the HTML dynamically via a server side programming language like PHP. However, this is not part of Gridzy.js itself but it is possible in general to do something like this.

I hope I could answer your question. If you have any further question, just let me know.

Best regards, Helmut

Hi presale questions does this have option to download gallery people make ?

If user A is using gallery maker can user B also use this maker same time to make his own gallery? So it will not conflict withe eschother?

Do you have any plans to add option for people to add own overlay text ?

Thank you

Hi,

thank you for your interest.

Maybe I need to clarify something: This is not a tool to let people create galleries. This is only a JavaScript library that allows you to put beautiful galleries on your website. I suspect the live preview caused some confusion: However, the live preview only shows some functionality of the gallery, but the control elements of the live preview are not part of the product itself.

If you are a JavaScript expert, you could theoretically create a gallery maker with Gridzy.js, but Gridzy.js is not a gallery maker itself. It’s just a gallery.

I hope I could help.

If you have any other questions, please let me know

Best regards, Helmut

Good luck with your sales

Thank you very much ;-) Likewise!

Hi Helmut, I have the same issue another user described some years ago. lots of images are loaded with wrong proportions on mobile devices, although I have set the correct widhts and heights. your answer was, that you sent an email to this user. Could you help me out with a solution or some hints too? that would be great, thank you.

Hi,

thank you for your question!

Please send me a link where I can take a closer look. You can use the support form here: https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061/support

Best regards, Helmut

Hi, when I click the ADD IMAGE button nothing happens? I have tried this in Safari and Firefox

Hi,

thank you for your question!

Please send me a link where I can take a closer look. You can use the support form of the WordPress-Version of Gridzy here: https://codecanyon.net/item/gridzy-image-gallery-grid-for-wordpress/15138026/support

Best regards, Helmut

Hi, Your plugin looks impressive like masonry. My requirement, Need to show 14 slides each time. “load more” button have to keep. If more than 14 exists, show next 14 when “load more” button clicked. Otherwise, hide. Can bring this approach from this plugin. Thanks

Hi,

thank you for your feedback and question. Gridzy.js itself doesn’t have such a feature, but Gridzy.js has an API that allows you to add pictures dynamically via JavaScript. This way your needs could be reached. An other way to realize it, could be to append additional Gridzy galleries dynamically via JavaScript. However, both require knowledge of JavaScript.

I hope this helps. If you have any other questions, just let me know.

Best regards, Helmut

Good morning, I use fillLastRow = true and I add a set of images (normally 5 – 10 – 20) at times. I need to add from a new line and I don’t want the images added first to be modified. (moved or add new image to old row) it’s possbile? Thank you Marco

Hi!

Thank you for your question.

It’s not really possible. You can only add a new gallery directly after the existing one. So it would look like one gallery while in fact there are two, or more.

best regards, Helmut

Thank you i add a new gallery dinamically with image inside. Thank you Marco

Hello, Thanks for your great script. I just encountered a little problem

1)Please advice if there is only two or three pictures. How to force the script to display .col-6 .col-md-4 in lg and xl . Because some of my galleries only have one or two pictures.

2)About the skin. Is it possible to do it with some caption under the picture? Even a

under the picture is good enough.

For example.

https://florianbrinkmann.com/en/wp-content/uploads/sites/11/2017/02/masonry-grid-korrekt.jpg

Thank You

Sorry for trouble. A little amendment.

2)About the skin. Is it possible to do it with some caption under the picture? Even a h4 tag under the picture is good enough. Than You

Hello Tommy!

Thank you for your purchase and questions!

1) If you use the standard layout (“justified”), you can try to set the “fillSingleRow” option to false. I think that could help.

2) Unfortunately there is currently no way to place the caption under the picture, as this would require more complex calculations in the background.

However, I hope that I could at least help with the first question. If you have any further questions, don’t hesitate to ask.

All the best, Helmut

with version 1 we could use callback functions for desiredHeight and spacingBetween so it would update when resized. Can we still do this in version 2? I cant seem to get it to work.

Thank you for your question! Unfortunately I had to remove this feature, because it wasn’t compatible to some new features (e.g. the new way, how to set options as data-attributes). However, you can reach the same effect very easily with something like this:

document.addEventListener('DOMContentLoaded', function() {
  // get the gridzy instance
  var gridzyInstance = document.querySelector('.gridzy').gridzy;

  // set resize event handler
  window.addEventListener('resize', function(){
    var resultValue,
        viewportWidth = document.documentElement.clientWidth;

    if (viewportWidth > 1000) {
        resultValue = 200;
    } else if (viewportWidth > 500) {
        resultValue = 150;
    } else {
        resultValue = 100;
    }

    // set new option value
    gridzyInstance.setOptions({
      desiredHeight: resultValue
    });
  });
});

If you have questions about it, just let me know.

All the best, Helmut

Thank you for the example!

Got a question – I’m working on improving a gallery. Part of that is trying to implement captions in PhotoSwipe. Position and styling them is a challenge. On the PhotoSwipe forum, it seems like not much has been done with it for several years. Is there a more current Lightbox script to pair with Gridzy that you’ve explored? Thanks!

Hi,

sorry for the delay and thank you for your question.

For long time PhotoSwipe was the one most professional and outstanding lightbox and it’s still a really great choice. However, I’m not up to date about alternative lightboxes and so I haven’t tested newer lightboxes yet. But Gridzy should be compatible to very most. If you find a more modern lightbox, please let me know. Maybe I can make a tutorial then.

In my opinion, the requirements for lightboxes haven’t changed the last years. And so I think PhotoSwipe is still modern. Maybe I can help you .. you can write me a support message here: https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061/support

Best regards, Helmut

Is it possible to have the caption appear under the image? I need to somehow force a large spacing below the image to support the caption sitting below.

Hi

thank you for your question. Unfortunately there is no way to do this currently. Sorry!

Best regards, Helmut

Hi. It seems, there is still a bug with image size, supposedly only in FF (last) cause in Chrome it’s ok. I use gridzy with dropzone.js to show thumbs. It happens when I upload simultaneously 4+ images, then 5th and further don’t resize properly and have failures=true. All images are in base64. However, if I set multiple base64 images without loading, then it’s ok.

By the way, automatism is useless when container invisible, so it make sense to apply it when it become displayed. At least as an option. And also to add render method parameter to recalculate all layout from scratch.

Solved using styles hack on container: position: absolute; left: -9999px; visibility: hidden; opacity: 0; Nevertheless the options above is actual.

Thank you for your feedback and really great suggestions. I wrote them on my list.

Best regards, Helmut

Hi Helmut, thank you for this awesome script! Do you see also a way to integrate a live text search filter (like https://vdw.github.io/HideSeek) which would reduce the gallery items like the buttons? Kind regards, Patrick

Hi!

Thank you for your nice feedback!

Have you already tried to just combine Gridzy.js with HideSeek? I don’t know, but maybe it could work. If HideSeek hides some items, Gridzy.js should recognize this and adapt the grid fully automatically.

However, such functionality can also be easily added with a small javascript snippet. If you don’t want to use HideSeek, just let me know. Then I’ll write a small tutorial ;)

Have a great day, Helmut

Hi Helmut, thank you for your quick answer! Actually HideSeek offers much more than I would need. A js snippet creating a simple text form to reduce the gallery items would be a very nice add-on for gridzy. All the best, Patrick

Hi!

I just wrote an article about it. Here it is: https://ehtmlu.com/blog/a-search-field-for-gridzy-js/

If you miss something or if you have any issues or suggestions, just let me know ;)

Best regards, Helmut

hi, Helmut The news skins are wunderbar ! Are there available in WP version ? And, please, could you add a html demo in the download zip, it will be great… Thanks. best regards. Sabine

Hi Sabine,

thank you very much for your feedback. I’m glad that you like the new skins. Unfortunately they aren’t available for the WP version yet. However, I’ll try to implement Gridzy.js 2 and its new skins soon. Same about the html demo in the download zip of Gridzy.js 2.

Thank you again for your feedback :)

Best regards, Helmut

is there an option to display description on lightbox?

Hi,

thank you for your interest. Gridzy.js itself has no lightbox included. However, you can combine Gridzy.js with many lightboxes and show descriptions there as well.

A tutorial how to combine Gridzy.js with PhotoSwipe you can find here: https://ehtmlu.com/blog/the-royal-association-gridzy-js-photoswipe/

If you have any other questions, don’t hesitate to ask ;)

Best regards, Helmut

Does your script have lazy load support?

Hi!

Thank you for your question. Yes, Gridzy.js supports lazy loading for the images as a built in feature.

If you want to lazy load the HTML too, you can add your own Javascript to update the DOM. This is not built in, because it needs a server side part too, which can have very different needs.

If you have any other questions, don’t hesitate to ask ;)

Best regards, Helmut

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey