Code

Discussion on Gridzy – Responsive and Justified Image Grid Gallery

eHtmlu

eHtmlu supports this item

Supported

39 comments found.

Gridzy has been working great for me so far!

I’m experiencing a slight issue when viewing pages on mobile- sometimes the first few images load OK, but the rest are all the wrong proportions (squished vertically). This is happening in Safari on iOS.

I’ve kept all images to the same basic sizes/proportions as the demo, and define “height” and “width” attributes for each image in the HTML code.

This doesn’t happen every time the page loads- after reloading the page or restarting the browser, usually the grid shows up correctly.

https://i.imgur.com/JkuMlY9.jpg

Is there anything else I can do to ensure that gridzy is displaying my images initially at the correct proportions?

Thanks again!

I sent you an email about it ;)

hi, I have a pre-purchase question, is this plugin compatible with Visual Composer?

Hi,

thank you for your interest.

I guess you are interested in the WordPress plugin of Gridzy, right? You commented the Javascript version of Gridzy ;) .. for the WordPress plugin please click here: https://codecanyon.net/item/gridzy-image-gallery-grid-for-wordpress/15138026?ref=eHtmlu

If you use the WordPress plugin you can simply insert the shortcode of a Gridzy gallery into a Visual Composer textarea.

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

best regards, Helmut

Hi eHtmlu, I found one strange problem in running the script, I have not seen this before because I did not use many galleries on the same page. When I click on a photo that is vertical, PhotoSwype shows it horizontally. I’ve checked – all images are oriented and scaled correctly, as well as JS code, can somehow fix it somehow? The below example: http://sarota.net/LG/read_file.php?read=2017-08-13 Best Regards Jerzy!

Hi,

thank you for your question.

It maybe sounds a little strange but the problem comes from the image file itself. Usually images are saved as they are. If you want to rotate an image with any image editing software, usually the image will be completly calculated new and saved with the new orientation. But some software (including the Windows Foto app) only saves the information of the rotation into the meta data of the image file. The image itself stays saved in exactly the same orientation as it was before.

Such a rotation have the benefit that there is absolutely no quality degradation, but unfortunately such a rotated image needs software which consider the meta data of the image file and interprets it correct. Most browsers don’t consider such meta data in HTML context yet.

So the solution is to rotate the image in an image editing software which recalculates the image and saves in the correct orientation.

I hope I could help. If you have any other questions just let me know.

best regards, Helmut

Bravo! You were right with the photos and it just means that Photoswipe does not read EXIF and does not recognize the vertical and horizontal images properly. straight from the camera. When I created via PHP thumbnails, I edited the image based on EXIF, so the thumbnails were correct, but when I clicked on the enlarged image the image was incorrect even though the WEB browser was OK . I changed some of my script now and also modifies the base image so finally everything is OK. Thank you very much for your help, good job!

Best regards Jerzy

You’re welcome ;)

Hey, I’m trying to add Gridzy to ACF Photo Gallery and everything looks perfect, but when I click on a thumbnail it doesn’t enlarge a photo (it goes to photo’s url like plugin doesn’t exist). HTML looks the same as regular WP gallery render. Thanks.

Hi,

thank you for your question.

Please send me a link where I can take a closer look.

If you purchased the WP plugin, please use the support form here https://codecanyon.net/item/gridzy-image-gallery-grid-for-wordpress/15138026/support If you purchased the JS version of Gridzy, please use the support form here https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061/support

thank you and best regards, Helmut

Hello Helmut,

It is possible to set: - min-width of the images or - max number of images in a line?

There is a situation where I would like no more than 2-3 images per line or that the images are no smaller than 200 px wide.

Please advise,

Thanks, Adrian,

Hi Adrian,

thank you for your question.

In short, the answer of both questions is “no”. The number of images in a line depends always on the size of the images and the available width. The size of the images are adjustable via the “desiredElementHeight” option. This defines the average height of the images. Based on that, the whole grid gets calculated.

If you increase the value of “desiredElementHeight”, the images would get bigger. Maybe that could reach your needs.

I hope that helps. If you have any other questions, please let me know.

best regards, Helmut

Thank you for the answer.

Best regards, Adrian.

You’re welcome ;)

Hi. Definitely the best grid i’ve seen. Thanks for coding:) I have the same issue on small screens as cunadesign asked a bit earlier. I’ve found, that something depends on initial load – if screen width is quite small (nearly bootstrap md in my case), further calculations on resize will fail with aspect ratio. Could you please help me too?:)

Hi,

thank you for your purchase, your question and especially for your rating. I’m glad, that you like Gridzy :)

Maybe the following css snippet could solve the issue:
.gridzy img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
}

If it doesn’t solve the issue, please send me a link, where I can take a closer look. You can send it via the support form: https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061/support

best regards, Helmut

Yes, this worked, thank you very much! GLWS;)

great! .. you’re welcome ;)

Hi your library is so great !! but I have experiencing some trouble when I erase all the innerHTML of $(’.gridzy’) , replacing with a new one (containing those same elemenst with different attribute) and executing $(‘gridzy’).gridzy({parameter}); nothing is happening can you help me pls ?

Hi,

please try following:

after the line:
document.getElementById('gridzy_gallery').innerHTML=icontent;
just write:
delete document.getElementById('gridzy_gallery').gridzy;
Gridzy will be initialized fully new then.

Hope it helps! If you have any other questions, just let me know ;)

All the best, Helmut

iam so stupid XD thank you :)

no, you couldn’t know that ;) ... I’m glad that it helped :)

Hello, I see there is a major update. Will I lose anything by updating from the old version? Have to recreate any galleries etc?

Hi,

thank you for your question!

It depends on your specific use case. There are some changes, especially how the skins are applied. So, maybe you need to adapt a few things. There are also changes about how the gallery initializes, but these things should be backwards compatible.

If you send me a link where I could take a closer look I can tell you exactly what changes would be needed in your case.

Best regards, Helmut

New update is awesome! For the filters is there the option to set the styling for the active/selected filter? I could probably do it with custom JS but its something that would be nice if it were embedded into your script.

Hi,

thank you very much for your great feedback! :)

Do you mean the styling for the form element where you activate the filter?

Thank you, Helmut

Yeah exactly, so when “All” is clicked it should highlight and remain highlighted until another option/filter is clicked.

You can simply use radio buttons instead of button elements. Then you’re able to style it via CSS and the pseudo selector ”:checked”. If you wonder how you can style radio buttons, just let me know. Then I’ll help you with that

best regards, Helmut

Brosis

Brosis Purchased

Hi, I have the latest version of the plugin and it’s working great. However when I try to wrap images with “a“ tag (link) it starts to work very slowly as if it’s overloading the CPU. Any advice on how to solve this?

Hi!

Thank you for your purchase and your question!

That’s an unusual issue. If you send me a link (e.g. via the support form) then I could take a closer look.

Best regards, Helmut

Brosis

Brosis Purchased

Hi Helmut, I figured out what caused the issue. The reason was I had css filter applied to the image (filter: grayscale(1)) and this way it was working fine if there are just images in the Gridzy container, but would start freezing if you wrap images with any tag. Once I added “transform: translateZ(0)” to the image class with applied filter – it solved the issue.

Hi!

Great that you could solve it by yourself. And thank you very much for sharing the solution. I couldn’t reproduce the issue on my machine, but maybe this helps other people. Thank you very much!

Best regards, Helmut

Loving the library so far, but I have an issue when trying to render just 1 or 2 images. They take up the full width of the view and ignore my desired row height. Otherwise it works great.

You got an email ;)

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

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

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

egency

egency Purchased

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

egency

egency Purchased

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. 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

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

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

twoloze

twoloze Purchased

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

twoloze

twoloze Purchased

Thank you for the example!

by
by
by
by
by
by