V9: cool and simple way to show image carousel in modal popup

Developing with Concrete
1

Just want to share a cool and easy way to show an image carousel in a Bootstrap modal. Of course there’s plenty of improvements you can add. But it just works with the defaults.

Assuming there’s at least 1 image on a page, just add a modal action link to it. Wrap the default Bootstrap carousel in a modal, the page image is made carousel’s 1st. The carousel images can come from any source, e.g. file folder.

<a href="#" data-bs-toggle="modal" data-bs-target="#property_images"><img class="img-fluid" src="<?php echo $thumb->src; ?>" /> </a>

<div class="modal fade" id="property_images" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content bg-transparent p-0 border-0 shadow-none">
            <div class="modal-body">
                <div id="property_images_carousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-indicators">
                            <?php
                            for ($i = 0; $i <= $image_count; $i++) {
                                if ($i === 0) {
                                ?>
                                    <button type="button" data-bs-target="#property_images_carousel" data-bs-slide-to="<?php echo $i; ?>" class="bg-light pt-1 active"></button>
                                <?php } else { ?>
                                    <button type="button" data-bs-target="#property_images_carousel" data-bs-slide-to="<?php echo $i; ?>" class="bg-light pt-1"></button>
                                <?php
                                }
                            }
                            ?>
                        </div>
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="<?php echo $img_obj->getRelativePath(); ?>" />
                        </div>
                        <?php 
                        $images = $images->toArray();
                        
                        if (is_array($images) && count($images) > 0) {
                            foreach ($images as $image) {
                                $file = $image->getImageObj();
                                if (is_object($file)) {
                                ?>
                                    <div class="carousel-item">
                                        <img class="d-block w-100" src="<?php echo $file->getRelativePath(); ?>" />
                                    </div>
                                <?php 
                                }
                            }
                        }
                        ?>
                        <button class="carousel-control-prev" type="button" data-bs-target="#property_images_carousel" data-bs-slide="prev">
                            <span class="bg-light text-primary fw-bold fs-1 p-5"><i class="fas fa-chevron-left"></i></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#property_images_carousel" data-bs-slide="next">
                            <span class="bg-light text-primary fw-bold fs-1 p-5"><i class="fas fa-chevron-right"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
1 Like