GreenTreeLabs

GreenTreeLabs supports this item

Supported

259 comments found.

Hi there. Thanks for this gallery! I was curious. I have this setup on the homepage of a client’s page in Squarespace using the JQuery version and it works rather well. I want to hide certain images on the responsive mobile view but I can’t seem to figure out how to do that. When in the gallery, is there a way to pinpoint a specific image to hide within the CSS?

Hi, you can use the class “ftg-hidden” and it must be added before you call .finalTilesGallery()

Hey there,

is it possible to add one or multiple sliders into the grid gallery items?

Hi, I’m sorry but the gallery accepts only images and iframes (videos, etc).

I tried the demo and twitter images are not posted. Also, google seems to print the 1st image on your page. Please clarify, thanks

That’s exact. Single images can be posted only with Facebook and Pinterest. Twitter can use images actually but it needs a much more complex development.

Hey Guys, great product. Would there be a way of using the lazy loading for a horizontal application rather than vertical? I’d like to use the gallery with a fixed height and allow the users to scroll across to see more images, rather than down.

Thank you. I’m sorry but that feature is not available.

hi , can you help me to set the demo-simple.html exactly like this http://www.final-tiles-gallery.com/gallery-full-width.html ? would be great … thanks, olaf

Hi Olaf, use the rule:

#page { max-width:100%; }

Hi, i would like to know if size of images matter or they resize in a way to perfectly fit the whole div?

Hi,

On infinite scroll example : http://www.final-tiles-gallery.com/gallery-with-infinite-scroll.html

When I put the mouse on the first images, the magnifier appear, but when I do a scroll, the others images just added don’t show the magnifier.

Do you have a solution about that ? Is it the same case with the cations or social over the images ?

Thanks.

Other point.

I need to take image data from database from your scroll. Is it possible with your script or its taken from static file ?

hi i want to install Gallery with image effects . i want to know this’s css, js code because my site have many css, js code .. do you tell me css, js code about Gallery with image effects ???

sliva86

sliva86 Purchased

The gallery Itself is quite fine (although there is no way how to set a maximum size for all images generally and for some use it generates unnecessarily huge previews), but based on description I expected a demo covering implementation of infinite scroll feature. Sure, there is many different server side platforms, but PHP + MySQL example would cover 99 % of cases for people who tend to buy gallery like this. There isn’t nothing more bundled then you can read here in the documentation for free. So I must figure it out yourself, I guess.

Hi there, I’ll try to give you some answer:

1) about a server side demo I understand what you mean. Yes, PHP/MySQL represents the majority of the server configurations and in earlier versions of this plugin I used to add a simple PHP file but that was even worst because users didn’t understand the PHP file was just an example, so they asked how to integrate the code on their site or how to fetch images from their database or even how to integrate the plugin with Laravel and other frameworks. That’s really beyond the kind of support we can offer.

2) yes, documentation is free, I don’t think that should be a problem :)

3) it’s not easy to explain in few words the reason why a max width parameter is missing. The short answer is: geometrically you have to choose between these 2 constraints: minimum width OR maximum width. I had to choose the minimum width because I consider having an image 10px wide is much worst than a too large image. If the plugin generates a grid with too large images than you can play a bit with parameters, especially the imageSizeFactor parameter.

Hi i have a question before i buy, i saw that you using Bootstrap, my site using jQuery.Mobile is there any conflict between them? does it support mobile devices properly?

Hi there. Yes it works smoothly with bootstrap and it works with mobile devices (have a look at http://www.final-tiles-gallery.com/index.html#demo

no Sir i know your program works with Bootstrap my question was if it conflicts with JQUERY MOBILE .js i have juqery.mobile running on my website and i had problem with bootstrap.

is your script will conflict with jquery.mobile.js?

Sorry, yes it works also with jQuery mobile.

f1nn

f1nn Purchased

It seems if one of provided galleries containers has 0 tiles, gallery crashes with `jquery.finaltilesgallery.js:412 Uncaught TypeError: Cannot read property ‘tagName’ of undefined`, preventing all other galleries to render.

f1nn

f1nn Purchased

Also found a strange collapsing behaviour with Bootstrap 4. PM’ed you a demo not to discover FTG code in pubic. Thanks.

Hi there. Well, I’ve never tested the plugin with 0 images, I don’t see the benefit of a gallery without images.

About the problem of the demo you sent me is the invalid markup. Look at the documentation, your code doesn’t have the element.

f1nn

f1nn Purchased

Thank you very much for fast response!

> Well, I’ve never tested the plugin with 0 images, I don’t see the benefit of a gallery without images.

OK, thats not a problem actually: I can just remove ftg-classes myself when images[].length=0.

I’ve been playing with FTG for last days. Just to ensure that I’m not trying to use FTG as it not supposed to: I need a fixed height image gallery with 1-10 images. No matter how much images it has, it should be 100%×500px filling all the grid with no gaps. Also I need to add/remove images from gallery dynamicly and rebuild grid as soon as one’s added.

It is possibe with FTG now?

So can I just specify a directory (with hundreds of images) and this will automatically put all the images into a grid?

This is a javascript plugin, so it can’t have access to filesystem. However you can find dozens of examples in Google about how to scan a directory (with any language).

ecomatt

ecomatt Purchased

Hi is there a way to set a maxTileWidth in the same way you can specify a minTileWidth? thanks

Hi. I have problem with my freshly bought gallery with filters. It is not changing height after click on the filter. Im using LightGallery lightbox. How to repair it? Link: http://serwer1449491.home.pl/ftp_nasz/tomek/snapshot_new/oferta/packshoty/

Yes, maybe because i bought it today, but Problem solved! Some of filters was simply empty.

Ahaha!!! Yes sure!

Just beware cracked scripts usually contains malware and/or spyware ;)

This looks likes this could be perfect for a site I’m starting. It appears that between the various parameters that are implemented that I could create a gallery that would tile on large screens but would be reduced to a single column on a phone. For the desktop display I would plan to have the zoom feature enabled but if the images are displaying as large as possible on a phone, I would like the zoom not to be active since it wouldn’t provide any additional value to the visitor. Is it possible to selectively disable this? If not, would you recommend conditional calling finalTilesGallery() with different sets of parameters based on the detected width of the screen?

Hi, well you can check the device before activating the lightbox. You can find a function like that here: http://detectmobilebrowsers.com/

Hi, is that possible if i get your demo page source code?

i need it to show it to my UI staff. Thank you

The file name that i download codecanyon-4734090-final-tiles-grid-gallery.zip
how to check version ? is that correct version ?

1 & 2. IMAGE take a look at 6,9,10 3 . Yes i have read your docs, but still cant <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/B52626/ffffff&text=1"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/B52626/ffffff&text=1" /> <div class="caption-block"> <div class="text-wrapper"> <h4 class="title">Title here</h4> <h5 class="subtitle">Subtitle here </h5></div> </div> </a> </div> Captions not show up

i Attach Full code

i’m using chrome browsers <!DOCTYPE html> <head> <!-- Final Tiles Grid Gallery 3.0 by GreenTreeLabs - http://codecanyon.net/item/final-tiles-grid-gallery/4734090?ref=GreenTreeLabs --> <meta charset="utf-8"> <title>jQuery Final Tiles Grid Gallery demo</title> <!-- CSS for this demo, don't use in your project --> <link rel="stylesheet" href="css/main.css"> <!-- FontAwesome CSS for cool icons --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- Final Tiles Grid Gallery CSS --> <link rel="stylesheet" href="css/finaltilesgallery.css"> <!-- Include jQuery only if it is not already present in your code --> <script src="js/jquery-1.11.1.min.js"></script> <!-- Final Tiles Grid Gallery script --> <script src="js/jquery.finaltilesgallery.js"></script> <!-- * Lightbox v2.7.1 * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/ * * @license http://creativecommons.org/licenses/by/2.5/ --> <script src="js/lightbox2.js"></script> <link rel="stylesheet" href="css/lightbox2.css"> <script> $(function () { //we call Final Tiles Grid Gallery without parameters, //see reference for customisations: http://final-tiles-gallery.com/index.html#get-started $(".final-tiles-gallery").finalTilesGallery( { layout: 'columns', columns: [ [4000, 3], [1024, 3], [800, 3], [480, 2], [320, 1] ], margin: 10, minTileWidth: 400, gridSize: 10, imageSizeFactor: [[4000, .4],[1024, .3],[800, .7],[600, .6],[480, .5]] } ); }); </script> </head> <div id="page"> <h1>Final Tiles Grid Gallery Lightbox demo</h1> <p> See complete reference <a href="https://www.final-tiles-gallery.com/documentation">here</a>. </p> <div id="gallery" class="final-tiles-gallery"> <div class="ftg-items"> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/B52626/ffffff&text=1"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/B52626/ffffff&text=1" /> <div class="caption-block"> <div class="text-wrapper"> <h4 class="title">Title here</h4> <h5 class="subtitle">Subtitle here </h5></div> </div> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/2B7E7E/ffffff&text=2"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/2B7E7E/ffffff&text=2" /> <div class="caption-block"> <div class="text-wrapper"> <h4 class="title">Title here</h4> <h5 class="subtitle">Subtitle here </h5></div> </div> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/99C542/ffffff&text=3"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/99C542/ffffff&text=3" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/F57373/ffffff&text=4"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/F57373/ffffff&text=4" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/7CA924/ffffff&text=5"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/7CA924/ffffff&text=5" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/76B8B8/ffffff&text=6"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/76B8B8/ffffff&text=6" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/B52626/ffffff&text=7"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/B52626/ffffff&text=7" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/8F0D0D/ffffff&text=8"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/8F0D0D/ffffff&text=8" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/5D860C/ffffff&text=9"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/5D860C/ffffff&text=9" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/76B8B8/ffffff&text=10"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/76B8B8/ffffff&text=10" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/8F0D0D/ffffff&text=11"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/8F0D0D/ffffff&text=11" /> </a> </div> <div class="tile"> <a class="tile-inner" data-title="Lorem ipsum" data-lightbox="gallery" href="http://placehold.it/500x500/459393/ffffff&text=12"> <img class="item" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://placehold.it/500x500/459393/ffffff&text=12" /> </a> </div> </div> </div> </div>

IMHO : much better if you update your demo file and make it clear as much as possible, this will make your life easier and make your customer happy

At least more or less like your online demo page

The lightbox demo is correct, the “layout” default value is “final”, not “column”, so that’s the expected behavior.

Your code is correct except there’s no CSS class about captions. There’s even a tool here https://www.final-tiles-gallery.com/gallery-with-captions where you can choose the kind of caption and it shows the classes you need to add to the main container:

<div class="final-tiles-gallery caption-middle caption-left effect-zoom-in caption-slide-from-bottom caption-color-light">....</div>

In your code you only have the “final-tiles-gallery” class.

This is also documented https://www.final-tiles-gallery.com/documentation#captions

I appreciate suggestions and I’ll try to make demo file clearer.

So why do you only answer questions on CodeCanyon? Been waiting MONTHS for an answer about your Everlightbox plugin, and nothing!

Salshine

Salshine Purchased

Hello, lovely plugin. I have initiated custom $_post ajax, I am using the plugin on a wordpress website using an example you gave in the comment section, and it works fine. However, I am seeing an error in the console log with each loaded image (Cannot read property 'tagName' of undefined). Could you have a clue what would be causing this behavior. I am using this two lines on ajax post success

var instance = $("#final-tg").data("finalTilesGallery");
 instance.addElements(html);

Hi,that error usually means the HTML markup is not correct,check the code and the class names.another reason could be it can’t load One or more images.

Salshine

Salshine Purchased

Thank you, I have sorted it out

by
by
by
by
by
by