TypeScript: Building a Simple Image Gallery with Zoom & Lazy Loading

Written by

learnmodernjavascript

in

In the digital age, images are crucial for conveying information and engaging users. From e-commerce sites showcasing products to personal blogs sharing memories, images are everywhere. However, the way we handle these images can significantly impact user experience. Slow-loading images frustrate users and can lead to high bounce rates, while poor image quality can detract from the overall aesthetic of a website. This tutorial will guide you through building a simple, yet effective, image gallery with TypeScript, incorporating zoom and lazy loading functionalities. This will ensure a smooth, visually appealing, and performant experience for your users. We’ll explore the core concepts, from setting up the project to implementing the zoom and lazy loading features, providing you with a solid foundation for more complex image-handling projects.

Setting Up Your TypeScript Project

Before diving into the code, let’s set up a basic TypeScript project. If you’re new to TypeScript, it’s essentially JavaScript with static typing. This means you can catch errors early in development, leading to more robust and maintainable code. Here’s how to get started:

1. Initialize Your Project

Open your terminal and navigate to your project directory. Then, run the following command to initialize a new Node.js project and create a `package.json` file:

npm init -y

2. Install TypeScript

Next, install TypeScript globally or locally within your project. We’ll install it locally for this tutorial:

npm install typescript --save-dev

3. Create a TypeScript Configuration File

To configure TypeScript, create a `tsconfig.json` file in your project’s root directory. You can generate a default configuration file using the TypeScript compiler:

npx tsc --init

This command creates a `tsconfig.json` file with many options. Let’s modify it to suit our needs. Open `tsconfig.json` and ensure the following settings are present (or set to these values):

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}
  • target: "ES5": Specifies the JavaScript version to compile to.
  • module: "commonjs": Specifies the module system.
  • outDir: "./dist": Specifies the output directory for compiled JavaScript files.
  • rootDir: "./src": Specifies the root directory of the TypeScript files.
  • strict: true: Enables strict type checking.
  • esModuleInterop: true: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: true: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: true: Enforces consistent casing in file names.
  • include: ["src/**/*"]: Includes all files within the `src` directory.

4. Create the Project Structure

Create a `src` directory in your project’s root. Inside `src`, create an `index.ts` file. This is where we’ll write our TypeScript code.

Building the Image Gallery Structure (HTML & CSS)

Now, let’s set up the basic HTML and CSS for our image gallery. We’ll create a simple structure with a container for the gallery, image thumbnails, and a modal for the zoomed-in image. This is a crucial step as it sets the foundation for our gallery’s visual presentation and interactive elements.

1. HTML Structure (index.html)

Create an `index.html` file in your project’s root directory. Add the following HTML structure:

<!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-thumbnails">
            <!-- Thumbnails will be dynamically added here -->
        </div>
    </div>

    <div class="modal" id="imageModal">
        <span class="close-button">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>

    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up the basic structure:

  • <div class="gallery-container">: This is the main container for the entire gallery.
  • <div class="gallery-thumbnails">: This div will hold the image thumbnails. We will populate it dynamically with images.
  • <div class="modal" id="imageModal">: This is the modal element, which will display the zoomed-in image.
  • <span class="close-button">&times;</span>: A close button for the modal.
  • <img class="modal-content" id="modalImage">: The image element inside the modal to display the zoomed image.
  • <script src="dist/index.js"></script>: Includes the compiled JavaScript file.

2. CSS Styling (style.css)

Create a `style.css` file in your project’s root directory. Add the following CSS to style the gallery and modal. This CSS provides a basic layout and styling for the gallery, including the thumbnail display and the modal for zoomed images. You can customize the styling further to match your design preferences.

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.gallery-thumbnails img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.gallery-thumbnails img:hover {
    transform: scale(1.05);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    padding: 20px;
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-button:hover, .close-button:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

This CSS provides basic styling for the gallery container, thumbnails, and the modal. It includes:

  • .gallery-container: Styles the main container.
  • .gallery-thumbnails: Styles the thumbnails container.
  • img: Styles for the image thumbnails, including size, cursor, and hover effects.
  • .modal: Styles for the modal, including positioning, background, and display.
  • .modal-content: Styles for the image inside the modal.
  • .close-button: Styles for the close button.

Implementing the TypeScript Logic

Now, let’s bring our gallery to life with TypeScript. We’ll create classes and functions to handle the image loading, zooming, and lazy loading functionalities. This will allow us to create a dynamic and interactive image gallery.

1. Define Image Data

First, define an interface or type for your image data. This will help us manage and organize the image information effectively. Create an `Image` interface in `src/index.ts`:

interface Image {
    src: string;
    alt: string;
    title?: string; // Optional title for the image
}

This interface defines the structure for each image object, including the source (src), alternative text (alt), and an optional title (title).

2. Create an Image Gallery Class

Create a class named `ImageGallery` to encapsulate the gallery’s logic. This class will handle the loading, display, and interaction of images. Add the following code in `src/index.ts`:

class ImageGallery {
    private images: Image[];
    private thumbnailsContainer: HTMLElement;
    private modal: HTMLElement;
    private modalImage: HTMLImageElement;
    private closeButton: HTMLElement;

    constructor(images: Image[], thumbnailsContainerId: string, modalId: string, modalImageId: string, closeButtonId: string) {
        this.images = images;
        this.thumbnailsContainer = document.querySelector(`#${thumbnailsContainerId}`) as HTMLElement;
        this.modal = document.getElementById(modalId) as HTMLElement;
        this.modalImage = document.getElementById(modalImageId) as HTMLImageElement;
        this.closeButton = document.getElementById(closeButtonId) as HTMLElement;
        this.setupEventListeners();
    }

    private setupEventListeners(): void {
        this.closeButton.addEventListener('click', () => this.closeModal());
        window.addEventListener('click', (event) => {
            if (event.target === this.modal) {
                this.closeModal();
            }
        });
    }

    public renderThumbnails(): void {
        this.images.forEach(image => {
            const img = document.createElement('img');
            img.src = image.src;
            img.alt = image.alt;
            img.title = image.title || ''; // Use the title attribute if available
            img.loading = 'lazy'; // Enable lazy loading
            img.classList.add('thumbnail');
            img.addEventListener('click', () => this.openModal(image.src));
            this.thumbnailsContainer.appendChild(img);
        });
    }

    private openModal(imageUrl: string): void {
        this.modalImage.src = imageUrl;
        this.modal.style.display = 'block';
    }

    private closeModal(): void {
        this.modal.style.display = 'none';
    }
}

In this class:

  • The constructor takes an array of image data and the IDs of the HTML elements.
  • renderThumbnails() iterates through the image data, creates image elements, sets attributes, and adds event listeners for opening the modal on click. It also enables lazy loading.
  • openModal() sets the source of the modal image and displays the modal.
  • closeModal() hides the modal.
  • setupEventListeners() sets up event listeners for closing the modal on the close button click and clicking outside the modal.

3. Populate with Image Data

Create an array of image objects with the `src`, `alt`, and optional `title` properties. Add this data to your `src/index.ts` file:

const images: Image[] = [
    { src: 'image1.jpg', alt: 'Image 1', title: 'Sunset' },
    { src: 'image2.jpg', alt: 'Image 2', title: 'Mountains' },
    { src: 'image3.jpg', alt: 'Image 3', title: 'Beach' },
    { src: 'image4.jpg', alt: 'Image 4', title: 'Forest' },
    { src: 'image5.jpg', alt: 'Image 5', title: 'Cityscape' }
];

Replace `’image1.jpg’`, `’image2.jpg’`, etc., with the actual paths or URLs to your images.

4. Instantiate and Initialize the Gallery

Instantiate the `ImageGallery` class and call the `renderThumbnails()` method to display the images. Add this code to the end of `src/index.ts`:

const imageGallery = new ImageGallery(
    images,
    'gallery-thumbnails',
    'imageModal',
    'modalImage',
    'close-button'
);

imageGallery.renderThumbnails();

This code creates a new instance of the `ImageGallery` class, passing in the image data and the IDs of the relevant HTML elements. It then calls the `renderThumbnails()` method to display the image thumbnails on the page.

5. Compile the TypeScript Code

Open your terminal and run the following command to compile your TypeScript code into JavaScript:

npx tsc

This command compiles the `index.ts` file into `dist/index.js`, which is then included in your HTML.

6. Adding Zoom Functionality

To implement zoom functionality, we can adjust the CSS and add a bit of JavaScript to handle the scaling of the modal image. We can use CSS transforms to scale the image on hover within the modal.

Modify the `style.css` file to include the zoom effect on the modal image:

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    padding: 20px;
    transition: transform 0.3s ease;
}

.modal-content:hover {
    transform: scale(1.1);
}

This CSS adds a transition effect and scales the image on hover within the modal. No additional JavaScript is required for this basic zoom effect.

7. Implementing Lazy Loading

Lazy loading improves performance by only loading images when they are visible in the viewport. This reduces initial load times, especially for galleries with many images. To implement lazy loading, we’ll leverage the browser’s built-in lazy loading feature.

In the `renderThumbnails()` method of the `ImageGallery` class, we’ve already included the loading="lazy" attribute on the image elements:

img.loading = 'lazy'; // Enable lazy loading

The loading="lazy" attribute tells the browser to defer the loading of the image until it reaches a calculated distance from the viewport. This simple addition significantly improves performance without requiring extra JavaScript or complex libraries.

Testing and Deployment

Once you’ve completed the implementation, it’s essential to test your image gallery thoroughly to ensure that it functions correctly and meets your requirements. Testing and deployment are crucial steps to ensure the gallery works as expected and is accessible to users.

1. Testing

Test the following aspects:

  • Image Display: Verify that all thumbnails are displayed correctly and that the correct images are loaded.
  • Zoom Functionality: Ensure that the modal opens and the images zoom in on hover.
  • Lazy Loading: Check that images load as you scroll down the page. You can use your browser’s developer tools (Network tab) to monitor image loading.
  • Modal Closing: Confirm that the modal closes correctly when the close button is clicked or when clicking outside the modal.
  • Responsiveness: Test on different screen sizes to ensure the gallery is responsive.
  • Error Handling: Check for any console errors.

2. Deployment

To deploy your image gallery, you’ll need a web server. Here’s a general process:

  1. Prepare Your Files: Make sure your `index.html`, `style.css`, and the compiled JavaScript file (`dist/index.js`) are in the same directory, along with your image files.
  2. Choose a Hosting Provider: Select a hosting provider, such as Netlify, Vercel, GitHub Pages, or any other web hosting service.
  3. Upload Your Files: Upload your files to the hosting provider’s platform.
  4. Configure Your Domain (Optional): If you have a domain, configure it to point to your hosting provider’s servers.
  5. Test Your Gallery: Access your gallery through the URL provided by your hosting provider and verify that it works as expected.

Remember to optimize your images for web use to improve loading times. Consider using image compression tools to reduce file sizes without significantly affecting quality.

Common Mistakes and How to Fix Them

When building an image gallery, several common mistakes can occur. Here’s a guide to avoid or fix them:

1. Incorrect File Paths

Mistake: Images not displaying due to incorrect file paths in the HTML or JavaScript.

Fix: Double-check the image paths in your `src` attributes and TypeScript code. Ensure the paths are relative to your HTML file.

2. CSS Conflicts

Mistake: Styling issues due to conflicts with other CSS rules or external stylesheets.

Fix: Use your browser’s developer tools to inspect the elements and identify conflicting styles. Consider using more specific CSS selectors or the !important rule sparingly.

3. JavaScript Errors

Mistake: JavaScript errors preventing the gallery from functioning correctly.

Fix: Use your browser’s developer console to identify and debug JavaScript errors. Check for typos, incorrect variable names, and logical errors in your TypeScript code. Ensure your TypeScript compiles without errors.

4. Lazy Loading Issues

Mistake: Images not lazy loading.

Fix: Verify that the loading="lazy" attribute is correctly applied to the image elements. Ensure that your browser supports lazy loading (most modern browsers do). If you are using a custom lazy loading library, check its configuration and implementation.

5. Performance Bottlenecks

Mistake: Slow loading times due to large image files or inefficient code.

Fix: Optimize your images by compressing them. Use appropriate image formats (e.g., WebP). Ensure your JavaScript code is efficient and avoids unnecessary DOM manipulations. Consider using a CDN to serve your images.

Key Takeaways

  • TypeScript for Type Safety: TypeScript improves code quality and maintainability by providing static typing.
  • HTML Structure: The basic HTML structure provides the foundation for the gallery’s visual presentation.
  • CSS Styling: CSS styles the gallery, including thumbnails, modal, and zoom effects.
  • Image Data Management: Defining an interface helps organize image data.
  • JavaScript Logic: JavaScript handles image loading, zooming, and lazy loading.
  • Lazy Loading Optimization: Lazy loading significantly improves performance.

FAQ

1. How do I add more images to the gallery?

Simply add more objects to the images array in your TypeScript code, ensuring each object has the correct src, alt, and optional title properties. The gallery will automatically render the new images when the page loads.

2. Can I customize the zoom effect?

Yes, you can customize the zoom effect by modifying the CSS for the .modal-content class. You can adjust the transform property, add transitions, or even use more advanced CSS techniques like scaling on hover or adding a zoom animation.

3. How do I change the thumbnail size?

You can change the thumbnail size by modifying the CSS for the .gallery-thumbnails img rule. Adjust the width and height properties to your desired dimensions. Consider also adjusting the object-fit property to control how the image scales to fit the thumbnail container.

4. How can I add a caption to each image?

You can add a caption by including a caption property in your Image interface and the corresponding HTML. Add the following to your `Image` interface:

interface Image {
    src: string;
    alt: string;
    title?: string;
    caption?: string;
}

In the `renderThumbnails()` method, create a paragraph element for the caption:

img.addEventListener('click', () => this.openModal(image.src, image.caption));

    private openModal(imageUrl: string, caption?: string): void {
        this.modalImage.src = imageUrl;
        this.modal.style.display = 'block';
        const captionElement = document.createElement('p');
        captionElement.textContent = caption || '';
        captionElement.classList.add('caption');
        this.modal.appendChild(captionElement);
    }

Add the following CSS:

.caption {
    text-align: center;
    color: #fff;
    margin-top: 10px;
}

5. How do I handle errors if an image fails to load?

You can add an onerror event handler to your image elements to handle image loading errors. In the renderThumbnails() method, add an event listener to each image element:

img.onerror = () => {
    img.src = 'path/to/default-image.jpg'; // Replace with a default image
    img.alt = 'Image loading failed';
    console.error(`Failed to load image: ${image.src}`);
};

This will replace the broken image with a default image and log an error message to the console.

This tutorial has provided a comprehensive guide to building a simple image gallery with TypeScript, incorporating zoom and lazy loading. By understanding the core concepts and following the steps outlined, you can create a gallery that enhances your website’s visual appeal and improves user experience. Remember to adapt and expand on these principles to fit your specific design and functional requirements. From here, you can explore more advanced features like image filtering, pagination, and transitions. The possibilities are vast, and with TypeScript, you have a solid foundation to build upon. The combination of TypeScript’s type safety and the practical application of HTML, CSS, and JavaScript creates a robust and user-friendly experience, making your image galleries stand out and engage your audience. This approach allows for a clean, maintainable codebase and provides a strong base for future enhancements and features.

More posts