Display bigger image on click-CodePudding

I am trying to make gallery page and when I click on image, it will go bigger and then arrows shows on both sides and you can click them and display next and previous pictures. Can you please help me how to do it? I don't know JavaScript language also I would like to ask if I should change anything in my code?

<div >
<div >
    <div >
        <h1  id="title">Gallery</h1>
        <div >
            <div id="pages-viewer"  style="visibility: visible;">
                <div  style="overflow-wrap: break-word;">
                    <div >
                        <form action="" method="get">
                            <p>Category: </p>
                            <select id="category" name="category" onchange="this.form.submit()">
                                <option value="all" <?= $sort_by == 'all' ? ' selected' : '' ?>>Všetky</option>
                                <?php foreach ($categories as $c) : ?>
                                    <option value="<?= $c['title'] ?>" <?= $category == $c['title'] ? ' selected' : '' ?>><?= $c['title'] ?></option>
                                <?php endforeach; ?>
                            </select>
                            <p>Sort by: </p>
                            <select id="sort_by" name="sort_by" onchange="this.form.submit()">
                                <option value="z_to_a" <?= $sort_by == 'z_to_a' ? ' selected' : '' ?>>A-Z</option>
                                <option value="a_to_z" <?= $sort_by == 'a_to_z' ? ' selected' : '' ?>>Z-A</option>
                            </select>
                        </form>
                    </div>
                    <div >
                        <?php foreach ($media as $m) : ?>
                            <?php if (file_exists($m['thumbnailpath'])) : ?>
                                <div style="width:<?= $imgwidth ?>px;height:<?= $imgheight ?>px; margin-bottom: 100px; margin-left: 11px; margin-right: 11px;">
                                    <a href="#"><img src="<?= $m['thumbnailpath'] ?>" alt="<?= $m['title'] ?>" data-id="<?= $m['id'] ?>" data-title="<?= $m['title'] ?>" max-width="<?= $imgwidth ?>" height="<?= $imgheight ?>" style="align: center; max-height: <?= $imgheight ?>"></a>
                                    <div style="text-align:center; font-size:25px; font-weight: bold;">
                                        <p><?= substr($m['title'], 0, 23); ?>
                                    </div>
                                    <div style="text-align:center;"><?= substr($m['rok'], 0, 15); ?></p>
                                    </div>
                                </div>
                            <?php endif; ?>
                        <?php endforeach; ?>

CodePudding user response：

I think you may want to look at http://chocolat.insipi.de. It's a free cross browser JavaScript library that handles switching images.

CodePudding user response：

This is my favorite gallery and it's easy to use.

https://sachinchoolur.github.io/lightgallery.js/