php – I want to create 1 Carousel but let it show different images depending on which thumbnail image I click-ThrowExceptions

Exception or error:

I have four thumbnail images; if you click on one of them a Modal opens up with the Carousel. I was wondering to make the code clean. Can the clicked-on thumbnail be linked to a set of pictures inside the Carousel?

For example, if I click thumbnail 1, I want it to catch 3 pictures of the same Carousel, and if I click thumbnail 2, I want it to catch the 3 next pictures and, of course, hide the previous 3, etcetera. Is this possible?

I know I can copy one carousel for the second copy of the carousel, etc., but I want to my code to be as clean as possible. I am also using PHP.
Are there any ways to do this?

<!-- IndexTiles contains background images inside CSS -->
<div class="indexTiles col-md-6 portfolio1 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio2 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio3 thumbnail"></div>
<div class="indexTiles col-md-6 portfolio4 thumbnail"></div>


<!-- Modal opens at click (see script at bottom) -->
<div id="carouselModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered">

        <!-- Modal content-->
        <div class="modal-content">
            <!-- BEGIN Carousel -->
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="img/campingReserveringSysteem1.png" alt="First slide">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>My Caption Title (1st Image)</h5>
                            <p>The whole caption will only show up if the screen is at least medium size.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/webshop1.png" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/poppodium1.png" alt="Third slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="img/bedAndBreakfast1.png" alt="Fourth slide">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    $('.thumbnail').click(function () {
        $('#carouselModal').modal('show');
    });
</script>
How to solve:

One way would be to just change the images’ src attribute based on the thumbnail clicked.

For that, you can give each thumbnail an ID, e.g.:

<div class="indexTiles col-md-6 portfolio1 thumbnail" id="1"></div>
<div class="indexTiles col-md-6 portfolio2 thumbnail" id="2"></div>
<div class="indexTiles col-md-6 portfolio3 thumbnail" id="3"></div>
<div class="indexTiles col-md-6 portfolio4 thumbnail" id="4"></div> 

Then in your Javascript, you can associate each ID with a list of image sources, using an associative array:

var images = {
    "1": ["image1.png", "image2.png", "image3.png"],
    "2": ["image4.png", "image5.png", "image6.png"],
    "3": ["image7.png", "image8.png", "image9.png"],
    "4": ["image10.png", "image11.png", "image12.png"],
}

Finally, in your onclick event handler, you can access the right image list by using images[id], where id is the ID of the clicked image, and change the three images’ src attributes to match the three elements of the list.

Hope this gives you a good start!

Edit: To be more specific, in your thumbnails’ onclick handler, you would do something like this:

$(".thumbnail").click(function() {
    //the ID of the thumbnail clicked (`this` here points to the button that was clicked)
    var thumbnail_id = this.id; 

    //list of the right images (based on which button was clicked)
    //e.g. if button 1 was clicked, imagesToLoad = ["image1.png", "image2.png", "image3.png"]
    var imagesToLoad = images[thumbnail_id]; 

    //looping over the thumbnail images and changing their `src` attributes
    //so the first image gets associated with the first image URL of the list, the second with the second, etc.
    $(".carousel-item img").each(function(index, element) {
        element.src = imagesToLoad[index];
        //or if you used CSS's `background-image` instead of `src`
        element.style.backgroundImage = `url(${imagesToLoad[index]})`
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *