oduvanstudio supports this item


15 comments found.

Hi, not working on my website, I always have the backgorund blank without imagees.

The code that generates the html is as follows:

<div id="squareGallery" class="galleryContainer" style="width: 1200px;">
<div class="squareContainer" style="width: 400px; height: 400px;">
<div class="galleryCanvasContainer" style="float: left; width: 400px; height: 400px; cursor: pointer;">
<img class="galleryPreloader" />

Hi. HTML code is wrong. The code should look like this:
<div id=”squareGallery” class=”galleryContainer” style=”width: 1200px;”>
<img data-src=’...’/>
<img data-src=’...’/>
<img data-src=’...’/>
<img data-src=’...’/>
no images in the container will not work

Hi, i post the html that generate your script.

The original HTMl is:

<div id="”squareGallery”" class="”galleryContainer”">
<img data-src="/assets/images/img1.jpg" />
<img data-src="/assets/images/img2.jpg" />
<img data-src="/assets/images/img3.jpg" />
<img data-src="/assets/images/img4.jpg" />

most likely you entered is not valid path to the image
the path is relative to the html file
If that does not work, please send us a link to the site

great work. What would make it even better is if you could add lazyload option. Can you add this to your already stellar codes? Thanks

Thank you, I’m working on version 1.3 which will include slideshow and lazyload options

Awesome. looking forward to it.


It says this is compatible with IE8. When I test in IE8, none of the images load? I even looked at the demo examples in IE and its not working. Any ideas?

I’m having an issue with this on iOS, it’s doesn’t seem to crop the images. It displays them full width within the square. Any suggestions?

Hi! Could you please send to the support a screenshot or a link to the gallery?

Amazing looking gallery… but … as another reviewer mentioned, this is not compatible with IE8 (As I saw in a screenshot my client just sent back. Then I tested both my page and the square gallery sample page at sauce labs in windows 7/IE8, and sure enough, just a big blank page with an ugly “image missing” icon). Nothing loads in ie8.

Too bad, would have made a great looking gallery.

How would I go about making changes so that either the larger popup pic can be linkable with a custom url or possibly making it so I could put a link in the photoCaptions area? I want to give a customer the ability to “add a pic” to a shopping cart and am quite stuck.. any ideas?

Any plans on making this responsive for phone and tablets?

The next release will be improved support for mobile devices

Hello Im unable tu use the code in website, it doesn’t display anything, when i add the script in <head> the container id displays in red, as in marking an error. and if I add the .css it screws up all my previous .css

Hello, i don`t understand what the problem exactly happens. Can you pls make a screenshot and send me on my e-mail address (support@oduvanstudio.com).

Does this work if I add a video?

Clean and professional, GLWS

what are the best image size photos to use so that they will load?

I think the best solution will be an image of the size of 1500px on the larger side


oofzos Purchased

Hello, It’s possible to allow slide on mobile devise with click on the arrow ? It’s seems logical on mobile today ;)

Hello, the new version will definitely have this feature


oofzos Purchased

Ok thanks, when do you envisage the new version ?

I think in a few weeks

Hey man :) Its not working for me at all :) I followed your instruction put this in head

<script type=”text/javascript”> new SquareGallery({ container: ‘sqr-gallery’ }); </script>

<link rel=’stylesheet’ type=’text/css’ href=’css/square-gallery.min.css’> <script type=”text/javascript” src=”js/square-gallery.min.js”></script>

add this into body with my custom img paths


and upload your whole folder onto my ftp and I have blank page

I had to take it out cause its rewrtiting my css

Hi I have solved all the previous problems, but I have a question. On this page: http://uvinicespa.cz/galerie/ I have a gallery and when I am on mobile, its not responsive, it should be aligning photos one under the other. Can this be done please?

Hello At the moment, this is impossible. You can specify the number of columns with images and their size will be adjusted to the screen size. You can write wishes for work and I will include these functions in the nearest release.

hi, looks interesting, a few questions thought:

- i would use the gallery inside a bootsraap modal : would you see any reasons it would cause a problem ?
- i would use it with dynamically loaded images with some ajax : would you see any reasons it would cause a problem ?