CODEWITHSUNDEEP
htmlsassbootstrap-4
Alex
Alex

Reputation: 37

bootstrap responsive icons and images

enter image description here

The thing is I need to make these icons on the right link to the photos that will appear on click. If I click the first one, it will show strawberries, on the second ones some other fruit etc etc. And at the same time it needs to write the name of that fruit on the left like in this case Strawberry, etc.

HTML:

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-4 text-center">
            <h2>Nasi Proizvodi</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ullam temporibus ex et
                consequatur eligendi error, voluptatibus quaerat? Quam qui nesciunt doloribus adipisci placeat nam
                incidunt cupiditate repellat! Animi, blanditiis.</p>
        </div>
        <div class="col-xl-6">
            <img src=" np-assets/images/tekstura.png" class="hero-image ml-auto">
            <ul class="nav links_up justify-content-center">
                <li class="nav-item slika1">
                    <a class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>
                </li>
                <li class="nav-item slika2">
                    <a class="nav-link active" href="#"><img src="np-assets/images/sljiva.png"></a>
                </li>
                <li class="nav-item slika3">
                    <a class="nav-link active" href="#"><img src="np-assets/images/tresnja.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/malina.png"></a>
                </li>
                <li class="nav-item slika4">
                    <a class="nav-link active" href="#"><img src="np-assets/images/kupina.png"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

.links_up {
    margin-top: -27%;
    color: #ffffff;
    position: relative;
    size: 1vw;

    .slika1 {
        width: 85px;
        height: 85px;
        padding: 0px;

        img {
            margin: 0px;
            padding: 0px 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika2 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika3 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika4 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }

    .slika5 {
        width: 85px;
        height: 85px;
        padding: 0px 0px;

        img {
            margin: 0px;
            padding: 0px;

            &:hover {
                background-color: #82b53f;
            }
        }
    }
}

Upvotes: 0

Views: 1098

Answers (1)

imvain2
imvain2

Reputation: 15847

There are many ways to accomplish this, one simple way that allows for it to grow is using data attributes.

<a data-image="photo-strawberries.png" data-title="Strawberries" class="nav-link active" href="#"><img src="np-assets/images/jagodica.png"></a>

then using jQuery:

$(document).ready(function(){
     $(".nav-link").on("click",function(){
         $("h2").html($(this).data("title"));
         $(".hero-image").attr("src",$(this).data("image"));
         return false;
      });
});

Upvotes: 1

Related Questions