128 comments found

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years
3genius Purchased

Hi there. Great plugin. Really unique.

I’m having two small issues, though:

First, if the source element is set to display:none, the browser will hang up trying to display the gallery.

Second, it appears as though every time the window is resize, another instance of tilesGallery is created (line 418). Was this intentional? It seems to me this could lead to memory/performance issues.

Thanks for your help!

GreenTreeLabs

Hi, thanks for your comment. I think the first issue happens because the plugin can’t calculate the size of the gallery, have you tried setting with and height parameters? About the second issue I’m not sure it leaks memory, but even in that case you should play resizing the browser a hundred times to notice it.

Default-user
3genius Purchased

We’re seeing very noticeable increase in heap size, and slow-down after only a few resizes (like 10). If the gallery is hidden, it’s even worse. Hundreds of new gallery objects are created.

Further, if the gallery is hidden, _jquerytg_makeTiles recurses several times per resize, which is what’s causing the slowdown.

Lastly, upon every resize all of the images in the gallery are reproduced on the page. Take this page for example: http://romanovian.com/laboratorio/mosaic/. When you load the page, 20 images are present. Every time you resize, another 20 image elements are added to the page.

How can we addesss this issue? Is there something we can do to prevent all these object from spawning?

Thanks again!

  • Bought between 10 and 49 items
  • Europe
  • Has been a member for 2-3 years

Thanks for the plugin, I want to create 6 grids 3 top and 3 bottom, I want 50% 25% 25% and for the bottom 25% 50% 25%, I stopped the random grids with deleting random() methods and gave constant float values, now I want to these 6 grids ? Please is this possible or how can I do that ? thank you very much.

GreenTreeLabs

Hi, this plugin is just based on random grids, so at least you have issues installing the plugin I can’t customize it on your needs, I’m sorry but I think it’s fair for a 5$ item.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Can I use this to fit a gallery within a fixed height container relative to the viewport height? I would like to show this gallery with no overflow x or y.

Basically wanting the gallery to fit all images in its container without scrolling.

GreenTreeLabs

Hi, you should make a custom script, use this:

function applyTiles() {
        $(".tiles").tilesGallery({
            width: $(window).width(),
            height: $(window).height(),
            margin: 5,
            caption: false,
            anchorVertical: 'middle',
            anchorHorizontal: 'center',
            reloadOnResize: true,
            callback: function () {
                $(".tiles img").fadeIn("slow");
            }
        });
    }

    var tgTO = -1;
    $(window).resize(function () {
        if(tgTO)
            clearTimeout(tgTO);

        //timeout to avoid overlapping calls
        tgTO = setTimeout(function () {
            var copy = $(".tiles-source").html();
            $(".tiles").empty().html(copy);
            applyTiles();
        }, 250);        
    });

    //first call
    applyTiles();
The result wil be like this: http://romanovian.com/laboratorio/jquery-tilesgallery/2/
Default-user

Thanks for this! However, I tried cloning the example you provided to begin to make edits here:

http://neosmultimedia.com/dev/tiles/

and the gallery won’t load. Not sure what I am missing?

GreenTreeLabs

use the jquery tiles gallery plugin bundled with the download.

Default-user

Awesome. Got it. Thanks again for the great support!!

GreenTreeLabs

Thank you for the great rating.

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
suludi Purchased

Hi, really nice script, but unfortunately, I do have some issues with it.

Very often, the image grid is not displayed as it should. It just forms one row with all the images in it. This happens on your demo, too.

Not the one here(preview) on Codecanyon, but in the files that are downloaded from codecanyon.

You can check it here: http://madebym.me/test/couch-test/ Just do a few refreshes and you will see what I mean. Or you can have a look at your own files that are given when the item is purchased and do a few refreshes there, same thing happens, it just forms one row with all the images in it.

Any advice?

Thanks,

Mirko

GreenTreeLabs

Hi Mirko, try setting the height parameter.

Default-user
suludi Purchased

Thanks for the quick reply! Yes, that did the trick :) Just one thing please, is there any way to disable the shuffling? I would really need to have items displayed as I want them.

Default-user
suludi Purchased

Please ignore my last comment about shuffling, client is ok with it! Thanks for the help

  • Bought between 10 and 49 items
  • Has been a member for 5-6 years

Hi,

As I wanted to keep the aspect ratio of the tiles container on resize, in the following code I set the height to be a percentage of the width.

Although the height of the container is displayed correctly after resize, the images do only appear after a page reload:

CSS: .tiles-item img { max-width: 999em; } .product-gallery { width: 100%; }

Javascript: function applyTiles() { $(”.product-gallery”).tilesGallery({ height: $(’.product-gallery’).width() * 0.4, reloadOnResize: true, callback: function () { $(”.tiles img”).fadeIn(“slow”); } }); }

var tgTO = -1;
$(window).resize(function () {
    if(tgTO)
        clearTimeout(tgTO);
});
//timeout to avoid overlapping calls
tgTO = setTimeout(function () {
    var copy = $(".tiles-source").html();
    $(".product-gallery").empty().html(copy);
    applyTiles();
}, 250);
//first call
applyTiles();

I would like to know if the design of this plugin makes it possible to keep the aspect ratio on resize.

Cheers,

Stefan

GreenTreeLabs

Hi, do you mean the aspect ratio of the images or the whole gallery?

Bytesource

I want to keep the aspect ratio of the gallery, that is the container containing all images.

GreenTreeLabs

Well, it’s an interesting idea, but it’s not currently supported.

Bytesource

Thanks for your reply.

I solved this problem by specifying different heights for different media queries.

GreenTreeLabs

that’s a smart idea!

Bytesource

Well, that’s what I thought, too :-)

Unfortunately, the plugin does not seem to pick up the new height set in the CSS media query after resize, as the gallery container still appears in its original size. Even a page reload after resizing the browser window does not work.

Could it be that the plugin caches the initial height value from the stylesheet to use only that, disregarding any media queries?

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hello!!!

I can not properly use his gallery with lightbox. With the lightbox when the scroll bar is in the middle downwards, it disappears from the screen. Even leaving as fixed in css does not work. I would like the lightbox stay fixed even when I moved the bar down.

Another problem is that I would use another type of lightbox, like colorbox, because I’ll need to put videos and flash, but I could not in any way make others work.

Any idea how to help me?

Thank you and sorry my bad english.

http://www.sitetestegaleria.xpg.com.br/
GreenTreeLabs

Hi, the lightboxes are not part of my plugin, you should try to contact the author of that lightbox.

Default-user

Thanks for the reply.

I tried using magnificpopup you used in your example of another plugin (final tiles) and still could not call it after clicking on an image.

The callback function simply does not work. What am I doing wrong? Please help me.
<!DOCTYPE html>
<html class="no-js">
    <head>
        <link rel="stylesheet" href="css/jquery-tilesgallery.css">
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/jquery.tiles-gallery.js"></script>
        <script src="js/magnificpopup.js"></script>
        <script>
            $(function () {
                $("#example").tilesGallery({
                    tileMinHeight: 300,
                    margin: 15
                });
                $("#example").tilesGallery({
                    callback: function () {
                        $(".tiles a").magnificPopup();
                    }
                });
            });            
        </script>
    </head>
    <body bgcolor="#000000">
        <div id="example" class="tiles">
            <a href="photos/image-001.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-001.jpg" />
            </a>
            <a href="photos/image-002.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-002.jpg" />
            </a>
            <a href="photos/image-003.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-003.jpg" />
            </a>
            <a href="photos/image-004.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-004.jpg" />
            </a>
            <a href="photos/image-005.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-005.jpg" />
            </a>
            <a href="photos/image-006.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-006.jpg" />
            </a>
            <a href="photos/image-007.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-007.jpg" />
            </a>
            <a href="photos/image-008.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-008.jpg" />
            </a>
            <a href="photos/image-009.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-009.jpg" />
            </a>
            <a href="photos/image-010.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-010.jpg" />
            </a>
            <a href="photos/image-011.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-011.jpg" />
            </a>
            <a href="photos/image-012.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-012.jpg" />
            </a>
            <a href="photos/image-013.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-013.jpg" />
            </a>
            <a href="photos/image-014.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-014.jpg" />
            </a>
            <a href="photos/image-015.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-015.jpg" />
            </a>
            <a href="photos/image-016.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-016.jpg" />
            </a>
        </div>

best regards

Leandro Martins

Default-user

I found a mistake in my code, which had 2 functions with the same title ”# example”, but even correcting, still does not work call the magnificpopup.

    <script>
            $(function () {
                $("#tiles").tilesGallery({
                    tileMinHeight: 300,
                    margin: 15
                });
            $("#tiles a").tilesGallery({
            callback: function () {
            $(".tiles a").magnificPopup();
            }
        });
            });            
        </script>
    </head>
    <body bgcolor="#000000">
        <div id="tiles" class="tiles">
            <a href="photos/image-001.jpg">
                <p class="caption"><span /></p>
                <img src="photos/image-001.jpg" />
            </a>

</div>
GreenTreeLabs

It’s hard to debug with the code inside the comment, however it seems you’re calling the function twice, and also the selector seems wrong, (tiles is a class, not an id) I think you should use this:

$(function () {
                $(".tiles").tilesGallery({
                    tileMinHeight: 300,
                    margin: 15,
                    callback: function () {
                        $(".tiles a").magnificPopup();
                    }
                });
Default-user

Hi I do not know why, but if I call the callback function, the gallery simply does not work.

I’ve tried every way using the popup magnific documentation and even tried to use something like you used in the example of the final tiles galery (that I also bought) where you used magnific popup.

I managed to work only with the default lightbox, but it is not compatible with flash and videos.

Loved your scripts, your galleries are really the prettiest, but I can not use them. Really wanted to make it work, but I can not.

If I want to look at:

index with magnificpopup – it dont work https://dl.dropboxusercontent.com/s/sc3cn2zmg4jg8f1/index-magnificpopup.html?dl=1&token_hash=AAF37LQPrjZZCYyUvH9Rt_KBxSf0TMRlJ5Q1vRtally3NA&expiry=1401465294

index with lightbox – it work, but this lightbox is does not work with video and flash. https://dl.dropboxusercontent.com/s/eo89hpj457zgdq0/index-lightbox.html?dl=1&token_hash=AAFUx9E7CQ8xBBOVjiAKeU-x41IeptHSmsLUMXexHhhkJw&expiry=1401465284

Thanks again and sorry for the inconvenience.

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

I’m having trouble with images not filling their containers.

https://www.dropbox.com/s/i36ly1m4u2gmq5c/tiles.jpg

Any ideas?

GreenTreeLabs

Yeah, it’s a CSS conflict, there’s some rule in your CSS that override the width or the max-width set by tiles gallery. If you can send me the url of the page I could be more accurate.

Default-user

Indeed, I found it. It was an img { max-width: 100%; height: auto } that was the culprit. Thanks!

GreenTreeLabs

You’re welcome.

GreenTreeLabs

Don’t forget to rate ;-) thanks!

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi there, how can I disable random ordering photos? not random grid, but random pictures order

GreenTreeLabs

Hi, the plugin arranges the images choosing the best fitting tile, so it’s not possible to change the algorithm.

by
by
by
by
by
by