TypeScript Tutorial: Build a Web-Based Image Gallery

Written by

learnmodernjavascript

in

In today’s digital age, images are everywhere. From social media to e-commerce, websites are visually driven, and a well-designed image gallery is crucial for engaging users and showcasing content effectively. Building an image gallery from scratch can seem daunting, but with TypeScript, we can create a robust and interactive gallery that’s both efficient and maintainable. This tutorial will guide you through the process, providing clear explanations, practical examples, and step-by-step instructions to help you build your own web-based image gallery, even if you’re new to TypeScript.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your projects. This means you can catch errors early in the development process, improving code quality and reducing debugging time. TypeScript also offers enhanced code completion, refactoring capabilities, and better tooling support, making it an excellent choice for building complex applications like an image gallery.

Project Setup

Let’s start by setting up our project. You’ll need Node.js and npm (Node Package Manager) installed on your system. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project and navigate into it.
mkdir image-gallery-ts
cd image-gallery-ts
  1. Initialize npm: Initialize a new npm project. This will create a package.json file.
npm init -y
  1. Install TypeScript: Install TypeScript as a development dependency.
npm install --save-dev typescript
  1. Initialize TypeScript: Create a tsconfig.json file to configure TypeScript.
npx tsc --init

This will create a tsconfig.json file with default settings. You can customize this file to fit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files (the outDir option).

HTML Structure

Next, let’s create the basic HTML structure for our image gallery. Create an index.html file in your project directory and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery-container">
        <div class="gallery-controls">
            <button id="prevBtn">Previous</button>
            <button id="nextBtn">Next</button>
        </div>
        <div class="gallery-images">
            <img id="galleryImage" src="" alt="">
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

This HTML provides the basic structure:

  • A container for the entire gallery (gallery-container).
  • Controls for navigation (gallery-controls) with “Previous” and “Next” buttons.
  • A container for the images (gallery-images) and an img tag to display the current image.
  • Links to a CSS file (style.css) for styling.
  • A script tag to include our TypeScript-compiled JavaScript file (app.js).

CSS Styling

Create a file named style.css in your project directory and add some basic styles to make the gallery visually appealing. This is a basic example; feel free to customize it to your liking:

.gallery-container {
    width: 80%;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
}

.gallery-controls {
    margin-bottom: 10px;
}

.gallery-images {
    margin-bottom: 20px;
}

#galleryImage {
    max-width: 100%;
    height: auto;
}

TypeScript Code (app.ts)

Now, let’s write the TypeScript code that will handle the gallery’s functionality. Create a file named app.ts in your project directory. This is where the core logic of our image gallery will reside. We’ll start by defining some types and variables:


// Define an interface for the image data
interface Image {
    src: string;
    alt: string;
}

// Get references to HTML elements
const prevBtn = document.getElementById('prevBtn') as HTMLButtonElement;
const nextBtn = document.getElementById('nextBtn') as HTMLButtonElement;
const galleryImage = document.getElementById('galleryImage') as HTMLImageElement;

// Image data (replace with your image sources and alt texts)
const images: Image[] = [
    { src: 'image1.jpg', alt: 'Image 1' },
    { src: 'image2.jpg', alt: 'Image 2' },
    { src: 'image3.jpg', alt: 'Image 3' },
    // Add more images here
];

let currentImageIndex = 0;

// Function to update the image in the gallery
function updateImage(): void {
    galleryImage.src = images[currentImageIndex].src;
    galleryImage.alt = images[currentImageIndex].alt;
}

// Function to handle the "Next" button click
function nextImage(): void {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    updateImage();
}

// Function to handle the "Previous" button click
function prevImage(): void {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
    updateImage();
}

// Event listeners for the buttons
prevBtn.addEventListener('click', prevImage);
nextBtn.addEventListener('click', nextImage);

// Initialize the gallery with the first image
updateImage();

Let’s break down the code:

  • Image Interface: Defines the structure of our image data, including a src (source URL) and an alt (alternative text) property.
  • Element References: Retrieves references to the HTML elements (buttons and the image element) using their IDs. The as HTMLButtonElement and as HTMLImageElement are type assertions, telling TypeScript the specific type of the element.
  • images Array: An array of Image objects, each representing an image in the gallery. Replace the placeholder image data with the actual paths to your images and their alt texts.
  • currentImageIndex: A variable to keep track of the currently displayed image’s index.
  • updateImage() Function: Updates the src and alt attributes of the img element with the data from the current image in the images array.
  • nextImage() Function: Increments the currentImageIndex (using the modulo operator % to loop back to the beginning when reaching the end) and calls updateImage() to display the next image.
  • prevImage() Function: Decrements the currentImageIndex (using the modulo operator to loop to the end when reaching the beginning) and calls updateImage() to display the previous image.
  • Event Listeners: Attaches click event listeners to the “Previous” and “Next” buttons, calling the respective functions when clicked.
  • Initialization: Calls updateImage() to display the first image when the page loads.

Compiling and Running the Code

Now that we have our TypeScript code, we need to compile it into JavaScript. In your terminal, run the following command:

tsc app.ts

This will create a file named app.js in your project directory. This is the JavaScript code that the browser will execute.

To run the gallery, you’ll need to serve the HTML file. A simple way to do this is to use a local web server. You can use a tool like serve (install it globally with npm install -g serve) or any other web server you prefer.

serve .

This command will typically provide a local URL (e.g., http://localhost:5000) that you can open in your web browser. Navigate to that URL, and you should see your image gallery!

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect Image Paths: Ensure that the paths to your images in the images array are correct relative to your HTML file. Double-check that the image files exist in the specified locations.
  • Typos: Typos in your HTML element IDs (e.g., prevBtn instead of prevButton) or in your TypeScript variable names can cause errors. TypeScript’s static typing can help catch these, but always double-check.
  • Missing Event Listeners: If the buttons don’t work, make sure the event listeners are correctly attached to the buttons.
  • Incorrect Module Paths: If you are using modules, make sure the import/export paths are correct.
  • CORS Issues: If you’re loading images from a different domain, you might encounter CORS (Cross-Origin Resource Sharing) issues. Make sure the server hosting the images allows access from your domain.

Advanced Features

Once you have the basic image gallery working, you can enhance it with more features:

  • Image Preloading: Preload images to improve the user experience by avoiding delays when navigating between images.
  • Keyboard Navigation: Add keyboard shortcuts (e.g., left and right arrow keys) to navigate the gallery.
  • Image Zooming: Implement image zooming functionality to allow users to view images in more detail.
  • Responsive Design: Make the gallery responsive to different screen sizes using CSS media queries.
  • Captions: Add captions or descriptions to your images.
  • Transitions/Animations: Add smooth transitions between images using CSS or JavaScript animations.
  • Thumbnails: Include thumbnail images for easier navigation.
  • Lazy Loading: Load images only when they are about to be displayed to improve performance, especially for galleries with many images.

Implementing these features will make your image gallery more user-friendly and visually appealing. Remember to break down the implementation of these features into smaller, manageable steps.

Summary / Key Takeaways

In this tutorial, we’ve built a simple yet functional web-based image gallery using TypeScript. We’ve covered the essential steps, from project setup and HTML structure to writing the TypeScript code and adding basic styling. You’ve learned how to define interfaces, handle events, and manipulate the DOM. This project provides a solid foundation for building more complex web applications and demonstrates the power and benefits of using TypeScript. Remember that the key to mastering TypeScript, like any programming language, is practice. Experiment with the code, add new features, and try different approaches to solidify your understanding.

By using TypeScript, we were able to create a more maintainable, scalable, and robust image gallery. This approach not only helps in building a functional image gallery but also in developing good coding habits and understanding how to structure a web application using modern JavaScript practices.

FAQ

Q: How do I add more images to the gallery?

A: Simply add more objects to the images array in app.ts, providing the src (path to the image) and alt (alternative text) for each image.

Q: How can I change the gallery’s appearance?

A: Modify the CSS in style.css to change the gallery’s layout, colors, fonts, and other visual aspects.

Q: Why are my images not displaying?

A: Double-check the image paths in the images array. Make sure the paths are correct relative to your HTML file. Also, ensure your images are accessible (e.g., not blocked by permissions or CORS issues).

Q: How do I deploy this gallery to a website?

A: You can deploy the gallery to a web server. You’ll need to upload the HTML file (index.html), the compiled JavaScript file (app.js), the CSS file (style.css), and your image files to your web server. You might also need to configure your server to serve these files correctly.

The journey of building this image gallery underscores the importance of a structured approach to web development. By leveraging TypeScript, you equip yourself with the tools to build more sophisticated and maintainable applications. As you continue to experiment and expand on this project, the principles of clear code, modular design, and effective error handling will become second nature, paving the way for more complex web projects.

More posts