Code

Discussion on Auto Grid Responsive Gallery

castlecode

castlecode supports this item

Supported

This author's response time can be up to 1 business day.

437 comments found.

Loyz

Loyz Purchased

Hello, How can i <iframe> webm or mp4 video (stored on my server) into the grid preview please? Thank you.

I see that you sent me a private message, lets continue there :)

mrred

mrred Purchased

Hi, thx alot for your script, please let me know how to call/refresh the lazy loading before the bottom of the page, like at the middle of the page, to have uninterrupted scrolling. thx alot.

Ohhh well I haven’t try that, but try moving the button up via CSS, with this:
.media-boxes-load-more-button{
  position: relative;
  top: -400px;
}
Best, David
mrred

mrred Purchased

great it work well ! thx alot for your quick support

glad it worked :D

mrred

mrred Purchased

there is a way to add the download icon in fancybox like: https://codepen.io/anon/pen/MXjGQB thx

Hello,
yes, it is possible, just open the autoGrid.js file and find this:

buttons : [ // What buttons should appear in the top right corner.
    'slideShow',
    'fullScreen',
    'thumbs',
    'close',
],
then add the download button there like this:
buttons : [ // What buttons should appear in the top right corner.
    'slideShow',
    'fullScreen',
    'thumbs',
    'close',
    'download',
],
that should do the trick

Best, David
mrred

mrred Purchased

perfect thx !

Hello, your script look interesting I want to know how it work with the txt file? example I have all info of each image like title, url etc does your script read first the txt file to generate the gallery? I just want to be sure because add info of each image by hand it’s not good for me

what do you mean different links? the images are not in a directory in your server?

Im talking about external link not image url

Ohh I got it, then yes, you must add external links to each image in the .txt file (only to the images you wish to add an external link though)

The icon to show/hide the thumbnails within the fancybox is missing. It was there before, now it is gone. I don’t know how I deleted it and I haven’t been able to find where the code to show this feature is located. Please help. Thanks

Hello,
In your itemTemplate make sure you have the data-thumb attribute in the same element where you have the class “mb-open-popup”, like this:

itemTemplate        :   
' <div class="media-box-image mb-open-popup" {{link}} data-src="{{popup_src}}" data-title="{{name}}" data-type="{{popup_type}}" data-thumb="{{thumb_src}}"> '+
    ' <div data-thumbnail="{{thumb_src}}" {{ratio}} data-title="{{name}}" data-alt="{{name}}"></div> '+

    ' <div class="thumbnail-overlay"> '+

        ' <div class="thumbnail-overlay-animated" data-from="top"> '+
            ' <div class="media-box-title">{{name}}</div> '+
        ' </div> '+
        ' <div class="thumbnail-overlay-animated" data-from="bottom"> '+
            ' <div class="media-box-date">{{filter}}</div> '+
        ' </div> '+

    ' </div> '+
' </div>',
if still no luck, can you show me a living example online? so I can take a look and see what’s going on

Best, David

I corrected the first line and it worked, however, it duplicates all the thumbnails in the fancybox and when cycling on pictures have to click twice on the arrow to advance. This is what I have now: itemTemplate : ’ ‘+ ’ ‘+

'   '+
        '  '+
        '  '+
        '   '+
'   ' +
'   '+
    '  {{name}}  '+
    '  {{text}}  '+
'   '+
'   '+
' {{filter}} '+
'   ',
I see you have twice the mb-open-popup class, that’s why it is being duplicated, in your case I think you should use this itemTemplate:
 itemTemplate    : 
 ' <div class="media-box-image mb-open-popup" {{link}} data-src="{{popup_src}}" data-title="{{name}}" data-type="{{popup_type}}" data-thumb="{{thumb_src}}"> '+
        ' <div data-thumbnail="{{thumb_src}}" {{ratio}} data-title="{{name}}" data-alt="{{name}}"></div> '+

        ' <div class="thumbnail-overlay"> '+
        ' <i class="fa fa-plus"></i> '+
                ' <a {{link}} hide_if_empty="{{link}}"><i class="fa fa-link"></i></a> '+
        ' </div> '+
' </div> ' +

' <div class="media-box-content"> '+
        ' <div class="media-box-title">{{name}}</div> '+
        ' <div class="media-box-text" hide_if_empty="{{text}}">{{text}}</div> '+
' </div> '+

' <div class="media-box-footer"> '+
' {{filter}} '+
' </div> ',
Best, David

I am using several categories folders within the gallery folder. Is there a way to exclude the ALL button and show just the Categories buttons? I would like to avoid mixing the pictures in the grid thumbnails and when showing in the fancybox. Even if the initial thumbnail loading does not show pictures until you click on one of the category buttons. I realize I may need more than one config.txt file. Thanks My “brute force” solution would have been to have multiple plugin_only.php type files and control the link from the index file.

Hello,
Yes, you can do that, you just need to pass this JS settings:

filterAll           : false,
filterDefault       : 'Category 1',
in the second setting just define your default category

Best, David

I am using an app that stores the videos in public_html/API/upload/video Is there a “process” “Function” ability with your gallery to display the videos (mp4) in this folder? Automatically so whatever is in th efolder would display in the web page ? Hope that makes sense

Hello,
You can configure the auto grid to read any folder, but unfortunately videos (mp4) are not supported, you can only configure an image to open iframe based videos, like youtube/vimeo

Best, David

How much text can you have in the txt files for the images? Like could I have a page or more of information attached to a picture?

Wonderful :) Yea, like text box with Scroll so if there is to much text you can just scroll through it. I’m trying to figure out something for good old Protestant pictures and it is nice to have the possibility to put the text with it. Like I have a picture that I think has 3 pages of description or something to explain it. That would be a neat feature to have at hand.

Something you might look into in the future, so I can have a look at it? ;)

Yes, I’ll take at this possibility in the future :) but unfortunately at the moment it wouldn’t be possible

Okay I’ll follow along, I’m still looking around for something and really there is not much out there that I’m satisfied with. So I wanna know if everything is there before trying something out :)

In any case, I think others would find the feature useful as well.

Thanks for your time.

I’m trying to use this to create a video gallery (a gallery of images that load videos when clicked). I would like the auto grid to be populated with thumbnail images that when click load a video file, such as an .mp4 (not youtube link). Ideally, it would be great if I could put my .mp4 files in one folder with the thumbnails in another, then auto grid would auto populate my page with the images that when clicked would load the appropriate video file. I’m an animator and this is going to be my portfolio site.

Does the auto grid support video files, such as .mp4 or other standard web video formats? Is there a way to set this up like I described?

Hello,
Currently the plugin doesn’t automatically detect the mp4 files, but using the .txt file you could add them in the popup, for example for an specific image you could add an mp4 file which its inside your galleries folder like this:

image             => Category 1/Autumn.jpg
popup_src         => galleries/gallery/Category 1/sample.mp4
I hope this makes sense :)

Pre-sale Question
Hi
Could you please confirm if it will work with multi-users each user has multi categories each category with multi photos
Kind regards

Hello,
Can you describe a little bit more what do you mean with “multi-users”?

Best, David

Hi
A school with many classroom teachers each teacher would like display their class activities under different category like this

Teacher-A
    Teacher-A-Maths
        + Many photos
    Teacher-A-Sports
        + Many photos
    Teacher-A-Art
        + Many photos
.
.
Teacher-B
    Teacher-B-Maths
        + Many photos
    Teacher-B-Sports
        + Many photos
    Teacher-B-Art
        + Many photos
.
.
etc

and Displayed by specific user (Teacher)
Kind regards

Ohh I see, unfortunately the plugin doesn’t have galleries based on users, the galleries are visible for everybody and you can connect via FTP in order to upload images/folders

Best, David

Hi
A school with many classroom teachers each teacher would like display their class activities under different category like this

Teacher-A
    Teacher-A-Maths
        + Many photos
    Teacher-A-Sports
        + Many photos
    Teacher-A-Art
        + Many photos
.
.
Teacher-B
    Teacher-B-Maths
        + Many photos
    Teacher-B-Sports
        + Many photos
    Teacher-B-Art
        + Many photos
.
.
etc

Kind regards

and Displayed by specific user (Teacher)

Ohh I see, unfortunately the plugin doesn’t have galleries based on users, the galleries are visible for everybody and you can connect via FTP in order to upload images/folders

Best, David

So autoGrid just stopped working on site out of nowhere, while I’m on vacation of course and client is freaking out.

Hello,
Can you show me a living example so I can take a look and see what’s going on?

Best, David

So the site not working. have login for you to look at it. do not see PM to send to you

Hi,
You can contact me privately via email here: https://codecanyon.net/user/castlecode#contact

Best, David

BMonkey

BMonkey Purchased

How do you use this product? There is no setup instructions, only files.

BMonkey

BMonkey Purchased

I figured it out. Issue on my part. Now I am just trying to move the files out of the “example” folder. When I do this the page loads correctly but the images and the categories buttons won’t load for some reason.

Hello,
I’m glad you found the docs, about your issue, you only need to modify your page and fix the path of the CSS, JS and the php file, for example by default the URL of the CSS files are like this:

href="../plugin/components/Font Awesome/css/font-awesome.min.css" 
but if the plugin folder will be next to your page, then it should be like this:
href="plugin/components/Font Awesome/css/font-awesome.min.css" 
without the ”../”

I hope this makes sense :)
BMonkey

BMonkey Purchased

How can I change the sort of the images?

I want to be able to change the sorts with a button on the page (random, byDate, byDateReverse).

I am not seeing reader.php that other people were commenting about.
BMonkey

BMonkey Purchased

Thank you for this! This helped a lot!

BMonkey

BMonkey Purchased

Hello, the more photos you add the slower the script loads. I’ve added 60k photos and the site doesn’t load anymore. I think it is trying to load all of the images at once and sort them. Any ideas to something I may be doing wrong?

Hello,
wow, I wouldn’t recommend using that many images with a Gallery plugin, since web browser tend to lag with that many images, you could try to reduce the thumbnail weight, but still, that’s to many images, for that amount of images I would break it into many subfolders like albums, and use something like this: https://codecanyon.net/item/auto-photo-albums-multi-level-image-grid/5319229

Best, David

Ktex

Ktex Purchased

Hello, I hope you’re fine with all the actual crisis.

I need to put a description instead of filename when I open the picture in fullscreen, but even if I found the line in the .js file where the name is (and also can hide it), I couldn’t replace it with the description in my config.txt. What should I do to replace it

Thanks!

Hello,
You can take this demo as an example: http://www.castlecodeweb.com/autogrid/example/portfolio.php#

you need to edit the itemTemplate variable, in there you can define the data-title attribute of the element with the class of mb-open-popup, so it uses the “text” variable instead of the name, it should look like this:

itemTemplate    :   
' <div class="media-box-image> '+
    ' <div data-thumbnail="{{thumb_src}}" {{ratio}} data-title="{{name}}" data-alt="{{name}}"></div> '+

    ' <div class="thumbnail-overlay"> '+
        ' <a href="#" class="mb-open-popup btn btn-sm btn-default" data-src="{{popup_src}}" data-title="{{text}}"> '+
            ' View Larger '+
        ' </a> '+
        ' <a {{link}} hide_if_empty="{{link}}" class="btn btn-sm btn-default">More Details</a> '+
    ' </div> '+
' </div> ' +    

' <div class="media-box-content"> '+
    ' <div class="media-box-categories"><span>{{filter}}</span></div> '+
    ' <div class="media-box-title">{{name}}</div> '+
    ' <div class="media-box-text"> '+
        ' {{text}} '+
    ' </div> '+
' </div> ',
I hope this makes sense,

Also don’t forget to renew your support period, since it has expired

Best, David
Ktex

Ktex Purchased

Thanks a lot, that’s great !

glewe

glewe Purchased

Hi there I am testing out your Auto-Grid script. Love it. It is so easy to use. However, I ran into a design issue. I want to integrate it into a Bootstrap based website. The media-boxes-filter buttons (created by

  • elements) don’t look that good. How can I format them as Bootstrap buttons? Best regards, George
  • Hello George,
    Thank you :D

    About your concern, you can use your own manual HTML for the filters, you just have to do the following:
    1) First turn off the filters generated by the auto grid by passing the following JS option to the auto grid:

    filter: false,
    

    2) Second, add your own HTML for the filters, for example like this:
    <div class="auto_grid_filter_grid">
        <a class="btn btn-primary selected" href="#" data-filter="*">All</a>
        <a class="btn btn-primary" href="#" data-filter=".Category-1">Category 1</a>
        <a class="btn btn-primary" href="#" data-filter=".Category-2">Category 2</a>
        <a class="btn btn-primary" href="#" data-filter=".Category-3">Category 3</a>
    </div>
    

    and that’s it, that should work, the key here is the container class named “auto_grid_filter_grid” and the items attributes named “data-filter”

    Also one last thing, if some of your categories have white spaces just replace them for a dash in the data-filter attribute, for example if you have a category named “Category 1” it would be like this:
    data-filter=".Category-1" 
    


    I hope this makes sense :)
    by
    by
    by
    by
    by
    by