Modify image content in HTML without the need for additional web pages

Question

Modify image content in HTML without the need for additional web pages

Seeking your assistance, I have recently built a website using a free HTML/CSS template that I stumbled upon. However, I am encountering an issue.

I am interested in setting up a gallery on the site, but I have an extensive collection of images spread across various categories. I am unsure if there is a way to avoid creating multiple pages for each category.

I envision having a single HTML file with a data container where, based on the selected category, the corresponding images and text will be dynamically loaded without the need to create individual pages for each category.

As someone relatively new to websites, I am unfamiliar with suitable tools or methods to achieve this objective. Are you aware of any techniques that can help me accomplish this task? Is it even feasible?

css html web

Answer 1

Answer №1

Definitely, PHP would be the way to go for this task - You can create a dynamic single page with generated content.

It might not be practical to cover an entire category-based gallery in one response, but a quick search online should yield plenty of simple PHP galleries you can explore.

Many of these solutions utilize SQL databases to display the gallery view, complete with thumbnails and more.

Answer 2

Definitely, PHP would be the way to go for this task - You can create a dynamic single page with generated content.

It might not be practical to cover an entire category-based gallery in one response, but a quick search online should yield plenty of simple PHP galleries you can explore.

Many of these solutions utilize SQL databases to display the gallery view, complete with thumbnails and more.

Answer 3

Answer №2

An easy way to organize photos in the same category is by placing them under a single div and using Jquery to show or hide based on your selection.

Here's an example of how you can achieve this:

<input type="radio" value="category1" name="type" />Category 1
<input type="radio" value="category2" name="type"/> Category 2

<div class="category1" style="display:none;">
    <ul>
        <li><img src="photo1.jpg"/>Photo 1</li>
        <li><img src="photo2.jpg"/>Photo 2</li>
    </ul>
</div>

<div class="category2" style="display:none;">
    <ul>
        <li><img src="photo3.jpg"/>Photo 3</li>
        <li><img src="photo4.jpg"/>Photo 4</li>
    </ul>
</div>

To implement this functionality, here is the corresponding JavaScript:

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="category1"){
            $(".category2").hide();
            $(".category1").show();
        }
        if($(this).attr("value")=="category2"){
            $(".category1").hide();
            $(".category2").show();
        }

    });
});

You also have the option to use anchor links instead of radio buttons. Feel free to explore different alternatives for your project.

Check out a live demo on JSFiddle.

Answer 4

An easy way to organize photos in the same category is by placing them under a single div and using Jquery to show or hide based on your selection.

Here's an example of how you can achieve this:

<input type="radio" value="category1" name="type" />Category 1
<input type="radio" value="category2" name="type"/> Category 2

<div class="category1" style="display:none;">
    <ul>
        <li><img src="photo1.jpg"/>Photo 1</li>
        <li><img src="photo2.jpg"/>Photo 2</li>
    </ul>
</div>

<div class="category2" style="display:none;">
    <ul>
        <li><img src="photo3.jpg"/>Photo 3</li>
        <li><img src="photo4.jpg"/>Photo 4</li>
    </ul>
</div>

To implement this functionality, here is the corresponding JavaScript:

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="category1"){
            $(".category2").hide();
            $(".category1").show();
        }
        if($(this).attr("value")=="category2"){
            $(".category1").hide();
            $(".category2").show();
        }

    });
});

You also have the option to use anchor links instead of radio buttons. Feel free to explore different alternatives for your project.

Check out a live demo on JSFiddle.

Answer 5

Answer №3

Instead of providing ready-to-use code, here's an idea for you to consider implementing on your website.

Imagine organizing your pictures by storing image URLs in a multi-dimensional array based on different categories and subcategories. Then, dynamically populate your gallery based on the selection made from a dropdown menu, all within one page.

The dropdown menu would display the various categories as selectable options.

Here is an example HTML structure:

<select id="menu">
    <option value="0">Select Category</option>
    <option value="1">Animals</option>
    <option value="1.1"> - Cats</option>
    <option value="1.2"> - Dogs</option>
    <option value="2">Cars</option>
    <option value="3">Hats</option>
</select>

<div id="gallery"></div>

The JavaScript array could resemble something like this:

[[[cat1, cat2], [dog1, dog2]], [car1, car2], [hat1, hat2]]

By selecting Cats, only cat pictures are displayed, while choosing Animals shows images of both cats and dogs.

Feel free to check out this interactive demo.

Answer 6

Instead of providing ready-to-use code, here's an idea for you to consider implementing on your website.

Imagine organizing your pictures by storing image URLs in a multi-dimensional array based on different categories and subcategories. Then, dynamically populate your gallery based on the selection made from a dropdown menu, all within one page.

The dropdown menu would display the various categories as selectable options.

Here is an example HTML structure:

<select id="menu">
    <option value="0">Select Category</option>
    <option value="1">Animals</option>
    <option value="1.1"> - Cats</option>
    <option value="1.2"> - Dogs</option>
    <option value="2">Cars</option>
    <option value="3">Hats</option>
</select>

<div id="gallery"></div>

The JavaScript array could resemble something like this:

[[[cat1, cat2], [dog1, dog2]], [car1, car2], [hat1, hat2]]

By selecting Cats, only cat pictures are displayed, while choosing Animals shows images of both cats and dogs.

Feel free to check out this interactive demo.

Modify image content in HTML without the need for additional web pages

Answer №1

Answer №2

Answer №3

Similar questions

HTML email - image appears in email only on selected devices

The find function within $(this) is malfunctioning

Adjust the size of a component dynamically to match another

Transferring the values of JavaScript objects to HTML as strings

Why is the angular navigation bar not appearing on the screen?

Using CSS to Showcase Text and Images

How can I activate the mobile zoom feature on kinetic js?

Alert: Angular 5 detects an invalid selector '';'

Using Python with Selenium to verify the attribute's value is correct

Exploring the varying flexbox behavior with (overflow-y) scroll on Safari, Firefox, and Edge compared to Chrome

What is the best way to make a div take up the entire screen until triggering a scrollTo function?

What are the steps to prevent the information in a text box from disappearing after submitting and calculating?

Issue when rendering HTML using bootstrap-table.js

Express and Node.js working together

Having difficulty aligning an image vertically within a table cell

Creating a row in your HTML frontend with automated three-column cards

Creating a div element that maintains a consistent aspect ratio regardless of its width or height

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Tips for providing a link to a label and passing a query string to a different page in ASP.NET using C#

HTML set hover & active states to remain active indefinitely