CODEWITHSUNDEEP
javascriptjquery
Jiroscopes
Jiroscopes

Reputation: 555

Better way to use onclick functions with image gallery

I have an image gallery that shows small thumbnails on a page, and when you click on a particular thumbnail a slideshow modal opens with 2-3 pictures in each set. Instead of listing each onClick method out in my script I am wondering if there is some better way to target the same elements and get the same effect in a much cleaner and easier to read manner.

The jist of my code is that you click the thumbnail, an image list (ul) appears and you can slide through them.

I just want to simplify the the clicking and targeting of the correct ul for the selected thumbnail.

jQuery:

$('#port-img-one').on('click', function(){
    $('#img-set-one').removeClass('hidden');
});
$('#port-img-two').on('click', function(){
    $('#img-set-two').removeClass('hidden');
});

HTML:

    <div class="row work_gallery">
        <div class="offset-md-1 col-md-5 gallery_block gallery_block_left" id="block-1">
           <!-- This is whats being clicked -->
            <img id="port-img-one" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
        </div>
        <div class="col-md-5 gallery_block gallery_block_right" id="block-1">
            <img id="port-img-two" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
        </div>
    </div>
<div class="row modal_top">
    <div class="col-12 modal_img_wrapper">
        <!-- The matching ul needs to be revealed -->
        <ul class="images hidden" id="img-set-one">
            <li>
                <img class="main_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
            </li>
            <li>
                <img class="other_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
            </li>
        </ul>
        <ul class="images hidden" id="img-set-two">
            <li>
                <img class="main_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
            </li>
            <li>
                <img class="other_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
            </li>
        </ul>
        <ul class="triggers">
            <li class="img_nav" id="one"></li>
            <li class="img_nav" id="two"></li>
            <li class="img_nav" id="three"></li>
            <li class="img_nav" id="four"></li>
        </ul>
    </div>
</div>

Upvotes: 1

Views: 72

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3883

Put on click handlers on the gallery images, add a data-images attribute to your images, and then when an image is clicked, you can get the id of the gallery to remove the hidden class from.

$('.gallery_img').on('click', function(){
    var imageSetId = $(this).data('images');
    $('#' + imageSetId).removeClass('hidden');
});

Your HTML would look like this for your images:

<img id="port-img-one" data-images="img-set-one" ... />

Upvotes: 2

Related Questions