The concept: display a series of thumbnail images in a row. When clicked on the images expand to fill the screen and display a much larger image. Controls are added to the viewer to include forward, back, close and full screen buttons. The viewer also displays thumbnails and descriptions of each image.
In the 'Little Red Trailer example all the images have been cropped an reduced to a size of 1100x695px. Each image is exactly the same size. This technique allows for smooth transitions from one picture to the next in the image gallery.
If you want to create an infographic now is the time. I used 'Paint.net' to manipulate these image. The point is you should plan out what information you want to show ahead of time. This will help reduce the build time. Try to make all your images the same size. If you add text make it all the same size and color. In this example I used 28px high text. This is large enough but more importantly it will still be readable on smaller screen sizes.
Step 2: Open up your webpage in Solo Build It Block Builder 2. Pick the location you want the gallery to appear and drag in a 'Responsive Grid' element.
A popup dialog box appears. Select the number of columns you desire on the slider bar. The grid will be divided equally into the nuber of columns you choose.
Step 3 In BB2 drag and drop an 'Image' element into each cell.
Check the 'Gallery' option in the tool bar. Click on desc and add a description to the gallery image. Repeat this process for each image. Be sure to fill in the "Alt" and "Title" option for each image.
Each image regardless of original size will be reduced to fit inside the cell block. In this example we used 1000px wide images. Notice in the gallery the images are reduced to be 20% width of the page. (This is done in BlockBuilder.) For a 4 column gallery the images would be 25% width of the responsive grid block.
Plan out your gallery by choosing image sizes and thumbnail sizes to be appropriate for yout page layout. For instance this site has a 1100px. wide screen. So, 25% or 1/5 of the screen width is 220px wide. But a screenwidth only 600px a 3 column grid would look better. So, 33% or 1/3 screen width is 200px.. Think about the size of the thumbnails you want compared to the size of the gallery/
Step 4 Check your work. Be sure to preview and test the gallery before you release it to the Internet. Some Do's and Don'ts:
To be honest the best way to build a gallery for UYOH is to do it first in SBI's BlockBuilder2 and then copy and paste your code into your own editor.
If you use your own html editor offline you want to place the files in the appropriate directory to work on your computer.
Step 3 There are several code chunks in the head section that need to be inserted into your webpage. Place these in the <head> section of your webpage. They look like this;
This is important because my style.css file already contains the right styles to make the responsive grid work. Without that code this tutorial won't work. Contact me if you need help obtaining the code for the responsive grid.
Note 1 you will have to add your domain name to the beginning of each file call. ex: "/plugins/jquery/jquery.js" becomes "https://www.best-website-tools.com/plugins/jquery/jquery.js" Inspect the code above to see what I mean.
Ideally you want to place this code in the 'head section of your source code. If that is impractical you can load it with the page. It must be placed BEFORE the HTML code containing the images.
Note 2 this is where you can change the 'theme' See that is it currently set to 'light_square'. Simply rename this to your desired theme.
Note: the 'theme' can be changed here. Currently it is set to 'light_square' theme. To change themes select your theme name from the /Themes directory and rename it here and in the <head> section. Be sure to upload the corresponding images to your 'image-files' directory in SBI.
Thank you for reading Image Gallery Tutorial for Solo Build It!
Confused? Let Best Website Tools build it for you. We wrote the image gallery tutorial so we know how and why it works.