How to add a thumbnail image/photo gallery in Blogger

For those who want to display images in gallery, here is a beautiful gallery built using JavaScript and CSS. This gallery displays the available thumbnails vertically or horizontally on the selected image, making it easy to select different images by mouse click.

With the help of CSS we can do this Display the item in the same position using the thumb rest and design the small squares as small squares as specified in height and width. The script will add a click event for each of them

A being who changes a child It will set the visibility and the class name to 'active'

.

Related: CSS-Only Image Slider Motion Motion Effect

test blog

How to add a mini gallery to Blogger

Step 1. Log in to your Blogger account , select your blog and go to the Template section, then click the Edit HTML button.

Step 2. Click anywhere in the symbol field and press CTRL + F to open the search field:

Step 3. Type the following bookmark in the search box and hit Enter to find it:

Step 4. Now choose one of the styles below and copy the code below:

1 demo model

Style Show 2

Note: Width: none; In fact, the first identifier ( #imagegallery ) is to prevent images from appearing at full size before they are accessed in the gallery container.

In #jquery-gallery we have a media thumbnail width (200px) to display on two lines and for this we need to calculate the thumbnail width (80px) as well as the margins between them.

The expression to the left of #jquery-gallery li img is to move the larger thumbnail that appears on mouse click to cover it with smaller thumbnails.

Step 5. Paste the selected style icon Label.

Step 6. Now click the same Bookmark, add this script:

Basically what this script does is search for an identifier called " Gallery " and get different items from the list that might be there. These items will be displayed as thumbnails and the function will determine which one is clicked after clicking. So whenever we click on a thumbnail it will be assigned an " active " category and the thumbnail should be visible in the largest container.

Step 7. Finally, save the changes by clicking on the "Save Form" button.

And here's the HTML that provides a normal menu with a gallery ID, embedded in a DIV with relative position, to avoid the side effects of other pre-existing positions.

Eighth step. Paste the HTML code below where you want to view the gallery by going to "Layout" and adding a new device (click the "Add Device" link and select "HTML/JavaScript"), or are. Post / page in HTML section.

• URL IMAGE1 ">


• IMAGE-URL2 ">


• URL IMAGE3 "/>


• IMAGE-URL4 ">


• IMAGE-URL5 "/>

Note: If your page elements overlap this gallery, you may need to set "position:relative"; To add Dan. The height value depends on the size of your gallery.

Example:

Replace IMAGE URL1 with the URL of the image. If you don't know how to get the title of an image, see this tutorial: How to upload images and get the URL

If you need to click images, add the following HTML syntax instead:

• Page URL "> URL IMAGE1 ">


• Page URL "> IMAGE-URL2 ">


• Page URL "> URL IMAGE3 "/>


• Page URL "> IMAGE-URL4 ">


• Page URL "> IMAGE-URL5 "/>

Again, you need to replace the page text with the URL of your page/post.

Update: To add titles, enter lines in orange and replace "Title" with the text you want to appear on each image:

• Page URL "> alt = "Title" src = " IMAGE URL1 " />


• Page URL "> alt = "Title" src = " IMAGE URL2 " />


• Page URL "> alt = "Title" src = " IMAGE URL3 " />


• Page URL "> alt = "Title" src = " IMAGE URL4 " />


• Page URL "> alt = "Title" src = " IMAGE URL5 " />

Save the puzzle or publish your page and you are done adding your thumbnail/image to Blogger.