XQA
Back to Python
2026-02-277 min read

Tab Gallery (Python Programming)

Learn Tab Gallery (Python Programming) step by step with clear examples and exercises.

Why This Matters

Creating interactive and user-friendly interfaces is crucial in web development as it enhances the user experience and engages visitors. One such feature that can significantly improve the look and feel of your website is a tab gallery, which allows users to switch between different sections or images with ease. In this lesson, we'll learn how to create a Python-based tab gallery using HTML, CSS, JavaScript, and Flask.

Why This Matters

In web development, creating interactive and user-friendly interfaces is crucial for engaging visitors and enhancing their experience. One such feature that can significantly improve the look and feel of your website is a tab gallery, which allows users to switch between different sections or images with ease. In this lesson, we'll learn how to create a Python-based tab gallery using HTML, CSS, JavaScript, and Flask.

By mastering the creation of a tab gallery, you will be able to:

  1. Improve the overall design and usability of your web applications.
  2. Provide users with an intuitive way to navigate through different sections or images.
  3. Enhance user engagement by making it easier for them to find relevant information.
  4. Develop a versatile solution that can be customized for various use cases.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of:

  • Python programming (variables, functions, loops)
  • HTML and CSS for creating web pages
  • Basic JavaScript for handling user interactions
  • Flask for web development in Python ()

Core Concept

Our goal is to create an interactive tab gallery that displays multiple images or sections. When users click on the tabs, they can switch between different images or sections. To achieve this, we will use a combination of Python (for server-side processing), HTML, CSS, JavaScript (for client-side interactions), and Flask for web development in Python.

Server-side: Python script

We'll create a simple Python script that generates an HTML page with the tab gallery structure and the necessary JavaScript code. The script will also handle the image data sent by the client and return the corresponding image based on the selected tab.

Here is a basic outline of our Python script:

  1. Import required libraries (Flask for web development)
  2. Initialize the Flask app and define routes
  3. Define a function to generate the HTML and JavaScript code for the tab gallery
  4. In the main function, check if a request contains a selected tab index, and return the corresponding image data
  5. Serve the generated HTML page when the root route is accessed

Client-side: HTML, CSS, and JavaScript

On the client side, we'll create an HTML structure for the tab gallery, some basic styling with CSS, and handle user interactions using JavaScript.

  1. Create an HTML file with a container for the tab gallery
  2. Add the necessary CSS styles to make the tabs look attractive
  3. Write JavaScript code to manage user interactions (click events on tabs)
  4. Use AJAX to send the selected tab index to the server and display the corresponding image or section

Worked Example

Let's walk through an example of creating a simple tab gallery with three images: a cat, a dog, and a bird.

Step 1: Install Flask

First, make sure you have Flask installed. If not, install it using pip:

pip install flask

Step 2: Create the Python script (app.py)

Create a new file named app.py and paste the following code:

from flask import Flask, render_template, request, jsonify
import base64
import io
from PIL import Image

app = Flask(__name__)

def generate_tab_gallery(images):
html = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab Gallery</title>
<style>
.container { display: flex; }
.tab { cursor: pointer; padding: 10px; border: 1px solid #ccc; margin-right: 5px; }
.active { background-color: #f2f2f2; }
.content { display: none; }
</style>
</head>
<body>
<div class="container">
{% for image in images %}
<div id="{{ image['id'] }}" class="tab" data-image="{{ image['data_url'] }}">{{ image['name'] }}</div>
{% endfor %}

<div id="content_{{ images[0]['id'] }}" class="content active">
{% set img = images[0] %}
<img src="data:image/png;base64,{{ img['data_url'] }}" alt="{{ img['name'] }}">
</div>
{% for image in images[1:] %}
<div id="content_{{ image['id'] }}" class="content">
{% set img = image %}
<img src="data:image/png;base64,{{ img['data_url'] }}" alt="{{ img['name'] }}">
</div>
{% endfor %}

<script>
function openTab(tabName, imgId) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(imgId).style.display = "block";

tablinks = document.getElementsByClassName("tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).className += " active";
}
</script>
</body>
</html>
"""

def get_image_data():
images = [
{'name': 'Cat', 'id': 'cat', 'data_url': base64.b64encode(open("cat.png", "rb").read()).decode()},
{'name': 'Dog', 'id': 'dog', 'data_url': base64.b64encode(open("dog.png", "rb").read()).decode()},
{'name': 'Bird', 'id': 'bird', 'data_url': base64.b64encode(open("bird.png", "rb").read()).decode()}
]
return images

@app.route("/")
def home():
if request.args.get('tab'):
tab_index = int(request.args.get('tab')) - 1
return jsonify({'html': generate_tab_gallery(images)[0], 'image_data': images[tab_index]['data_url']})
else:
images = get_image_data()
return render_template("gallery.html", images=images)

if __name__ == "__main__":
app.run(debug=True)

Replace cat.png, dog.png, and bird.png with the paths to your actual image files.

Step 3: Create the HTML template (gallery.html)

Create a new file named gallery.html in the same directory as app.py and paste the following code:

{% extends "base.html" %}

{% block content %}
<div id="tab-gallery">{{ html }}</div>
{% endblock %}

Step 4: Create a basic HTML structure (base.html)

Create a new file named base.html in the same directory as app.py and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Application</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

Step 5: Run the Python script

Run the Python script using the following command:

python app.py

Now, open a web browser and navigate to http://127.0.0.1:5000/. You should see the tab gallery with three images (cat, dog, bird). Click on the tabs to switch between the images.

Common Mistakes

1. Forgetting to import required libraries

Make sure you have imported all necessary libraries at the beginning of your Python script:

from flask import Flask, render_template, request, jsonify
import base64
import io
from PIL import Image

2. Incorrectly handling image data

Ensure that you are correctly reading and encoding the images in your Python script:

def get_image_data():
images = [
{'name': 'Cat', 'id': 'cat', 'data_url': base64.b64encode(open("cat.png", "rb").read()).decode()},
{'name': 'Dog', 'id': 'dog', 'data_url': base64.b64encode(open("dog.png", "rb").read()).decode()},
{'name': 'Bird', 'id': 'bird', 'data_url': base64.b64encode(open("bird.png", "rb").read()).decode()}
]
return images

3. Incorrectly generating the HTML structure

Check that you have generated the correct HTML structure for the tab gallery, including the necessary classes and IDs:

<div id="tab-gallery">
{% for image in images %}
<div id="{{ image['id'] }}" class="tab" data-image="{{ image['data_url'] }}">{{ image['name'] }}</div>
{% endfor %}
</div>

Practice Questions

  1. Modify the example to display four images instead of three. Add a new image and update the Python script and HTML accordingly.
  2. Customize the CSS styles for the tab gallery to make it more visually appealing.
  3. Instead of using hardcoded image paths, create a folder named images in the same directory as your Python script and place the images inside it. Update the Python script to read the images from this folder.
  4. Add a new feature that allows users to upload their own images for the tab gallery. Use Flask-Uploads library to handle file uploads.

FAQ

1. Why are we using Flask instead of plain HTML and JavaScript?

Flask allows us to create dynamic web pages by handling server-side logic, such as image processing based on user interactions. It also simplifies the development process by providing a clean and consistent API for building web applications.

2. What is the purpose of using base64 encoding for images?

Base64 encoding converts binary data (like image files) into ASCII format, which can be included directly in HTML as a data URL. This allows us to display images without having to serve them separately from the server.

3. Why are we using Jinja2 templating engine?

Jinja2 is a powerful and flexible templating engine for Python that makes it easy to generate dynamic HTML pages. In our example, we use it to insert the base64-encoded image data into the HTML structure generated by our Python script.

Tab Gallery (Python Programming) | Python | XQA Learn