Topic: Thumbnail photo gallery?

Is there a possibility to create a gallery with rows and columns of thumbnails and once you click on the thumbnail, the large image pops up?

I need my viewers to see an entire array of thumbnails (around 50= 5 columns, 10 rows) and enlarge only the ones they like. No pagination or thumbnails sliding on the bottom.

Re: Thumbnail photo gallery?

The only way to do this would be to use a Juicebox gallery page and set screenMode="SMALL" (in the gallery page's 'General (Pro)' section).
Please note that screenMode is a Juicebox-Pro option which is not supported by Juicebox-Lite, the free version.

Small Screen Mode is intended to be used on mobile devices (thumbnails and main images are displayed on separate pages to give the main images as much room as possible) but you can display your gallery in Small Screen Mode (on all devices and in all browsers) by setting screenMode="SMALL".

When a gallery is initially displayed in Small Screen Mode, the site visitor is presented with a grid of thumbnails from which a main image can be selected. When an image is selected, the grid of thumbnails is replaced with the chosen image and the user can then navigate through the main images or return to the grid of thumbnails at any time via the Thumbnail Button on the gallery's Button Bar.

The actual number of thumbnails displayed in the grid will depend on the dimensions of the thumbnails (set in the gallery page's 'Thumbnails (Pro)' section) and the space available in the site visitor's browser.
If there is not enough space to display all the thumbnails in a single page, then additional thumbnail pages are dynamically created and the visitor can navigate between them via thumbnail page navigation buttons (in desktop browsers) or by swiping (on mobile devices).

Here is a sample Juicebox-Pro gallery displayed in Small Screen Mode: https://www.juicebox.net/demos/pro/full … Mode=SMALL

I hope this helps.

Re: Thumbnail photo gallery?

Thank you, that was helpful :-)

4 (edited by ndmker 2019-05-09 17:26:32)

Re: Thumbnail photo gallery?

Hmmm.... and I have another question...

My titles and descriptions do not want to show in all the photos, specifically those ones by the end of the list. I have an album with around 190 photos and I get the following messages when I save the page:

Notice: Undefined offset: 166
Notice: Undefined offset: 166
Notice: Undefined offset: 166
Notice: Undefined offset: 166
Notice: Undefined offset: 167
Notice: Undefined offset: 167
Notice: Undefined offset: 167
Notice: Undefined offset: 167
Notice: Undefined offset: 167
Notice: Undefined offset: 168
Notice: Undefined offset: 168
Notice: Undefined offset: 168
Notice: Undefined offset: 168
Notice: Undefined offset: 168
Notice: Undefined offset: 169
Notice: Undefined offset: 169
Notice: Undefined offset: 169
Notice: Undefined offset: 169
Notice: Undefined offset: 169
Notice: Undefined offset: 170
Notice: Undefined offset: 170
Notice: Undefined offset: 170
Notice: Undefined offset: 170
Notice: Undefined offset: 170
etc......

Oh and another thing....

Most of my viewers use phones. How to display thumbnails on a phone? Only one thumbnail displays and not rows and columns.

5 (edited by ndmker 2019-05-09 18:30:30)

Re: Thumbnail photo gallery?

This is what it looks like on my phone...

https://i.ibb.co/ZJpGKC8/Screenshot-20190509-102810-Kiwi-Browser.jpg



And this is what it looks like on my computer... Much better.

https://i.ibb.co/H29MWsn/temp-tumbs.jpg


Can I edit the juicebox gallery so that I can have at least 3x5 rows of images? One thumbnail per page is horrible and users will not be happy. Not good if I mention that 70% of my viewers use phones and not desktop computers...

A mid-range phone like the discontinued Samsun Galaxy S7 (which I have) can display 4 or 5 columns of thumbnails easily because the screen resolution is high enough (2560x1440px). If I divide 1440px by 5, I get 288px. Substracting a little bit for spacing/padding and I can easily display 250px thumbnails without any problems. Meanwhile the gallery displays one thumbnail which is resized to around 40% of the screen. The thumbnail is set to 150px in the gallery settings.

Re: Thumbnail photo gallery?

Notice: Undefined offset: 166

It sounds like you have reached your current PHP max_input_vars limit.
Each image in a Showkase gallery page has several different variables associated with it and, in order to process a large gallery, you will need to ensure that max_input_vars is large enough to accommodate all the images. (It should be set to at least 7 x the number of images in your largest gallery.)

It sounds like your max_input_vars might currently be set to 1000 (as the undefined offsets start at image #166).
Try increasing your max_input_vars, perhaps to 2000 (or even larger to give yourself a buffer for very large galleries).

You should be able to check your current PHP settings in your web hosting Control Panel or by using phpinfo() as follows:
(1) Create a new file in a plain text editor with the following code: <?php phpinfo(); ?>
(2) Save the file with a .php file extension (for example, 'phpinfo.php').
(3) Upload the file to your web server and open it in a browser.
(4) Search the web page for max_input_vars.

You should be able to change PHP values using one of the following methods:
(1) Via a php.ini file.
(2) Via an .htaccess file.
(3) Via your web hosting account's online Control Panel.

If you have trouble changing your PHP max_input_vars value, your web host should be able to help you out.

Only one thumbnail displays and not rows and columns.

From your screenshot, it looks like this is due to your thumbnail dimensions (and the available screen size).
It looks like there is not enough room within the mobile device's browser to display more than one thumbnail.
The only solution to this (to allow more thumbnails to be displayed on the mobile device pictured) would be to reduce the thumbWidth and thumbHeight (in the 'Thumbnails (Pro)' section of your gallery page).
I notice you have increased both the thumbWidth and thumbHeight to 150 (from the default values of 85).
More thumbnails will be displayed per page if you revert to the default values of 85.
Unfortunately, it is not possible to use different thumbnail dimensions for Large Screen Mode and Small Screen Mode so a compromise may need to be made, especially if the majority of your target audience is likely to be viewing your galleries on small screen devices.

Can I edit the juicebox gallery so that I can have at least 3x5 rows of images?

You cannot specify the number of thumbnails to be displayed on each thumbnail page in Small Screen Mode.
The number of thumbnails displayed per page is determined by the thumbnail dimensions and the space available in the browser viewport.
If you load your gallery's thumbnail page in a desktop browser and then change the size of the browser window, you'll see the number of thumbnails dynamically change (and the number of thumbnail pages will also dynamically change).

I hope my notes above help.
Please let me know how you get on and if I can be of any further assistance.

7 (edited by ndmker 2019-05-09 19:07:56)

Re: Thumbnail photo gallery?

Thank you for your quick reply. I am aware that phones have phisically smaller screens but in terms of resolution they are sometimes quite capable.

I am aware that the gallery is fully responsive but in terms of thumbnails on the phone it is overdoing it.

Open the app with your phone photos and no matter if you have Android od iOS you have a set of 4-5 columns of CRISP thumbnails whch you can scroll down for as long as you reach the end.

I have just resized the thumbs to 100px and then to 85px and they look tiny on the desktop screen but on my phone (with enough resolution to accept 6-10 columns of thumbs) I get only an array of 2x2=4 big thumbs. I think there must be a way to change it so that it is more attractive and intuitive, just like photo galleries in phones.

Or open your instagram app on the phone and you will see three rows but scrollable...

Re: Thumbnail photo gallery?

I notice that you currently set showSplashPage="NEVER".
If you use the default value of showSplashPage="AUTO", then the Splash Page will be displayed when the gallery is displayed in Small Screen Mode (on mobile devices) and when the gallery is expanded from the Splash Page, it will be displayed on a page of its own without the Showkase header or footer, giving more room for more thumbnails to be displayed.

For reference, more information about Juicebox Screen Modes and the Splash Page can be found here.