gallery problem to open and close elements

Personal I'm developing a photo gallery on my website, when you click on the photo a box appears with a text and a side image, explaining about the image follows a print ClickingonthenormalxdatebutifIclickonanotherimageopenstheboxabouttheimagethatIclicked,butthefirstonedoesnotclosethereisoneontopoftheotherandattheclosingtimeithastocloseonebyone,thatisiftheguyclickedon8imagesbeforeclosingonxhewillhavetogoclosingmanuallyafterwards.Iwouldliketoknowifthereisanywaytofixthissothatwhenthepersonhasalreadyopenedaboxbyclickingonanotherimagetheboxthatwasopenclosefollowmycode:

HTML:

<divclass="wmg-item work-screenshots">
                                    <div class="wmg-thumbnail">
                                        <div class="wmg-thumbnail-content">
                                            <!-- exemplo de conteudo para thumbnail -->
                                            <img src="http://www.missnikkey.com.br/wp-content/uploads/2015/01/350x350.gif"alt="image">
                                            <!-- fim do exemplo -->
                                        </div>
                                    <div class="wmg-arrow"></div>
                                </div>
                                <div class="wmg-details">
                                    <!-- <span class="wmg-close"></span> -->
                                    <i class="fa fa-times wmg-close" aria-hidden="true"></i>
                                    <div class="wmg-details-content">
                                        <!-- exemplo de coteúdo para detail -->
                                        <div class="container description-work">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <img src="http://www.htreafarms.com/images/new-family-photos/blank.jpg"alt="image">
                                                </div>
                                                <div class="col-md-6 text-left">
                                                    <h2 class="title-work">Decathlon</h2>
                                                    <hr class="bar">
                                                    <h4>Cliente desde - <span>2006</span></h4>
                                                    <p class="text-work">
                                                        Fundada em 1976 é hoje um dos maiores varejistas do mundo no segmento esportivo, a rede francesa Decathlon está presente no Brasil desde 2001, quando abriu sua primeira loja em Campinas, no interior paulista. Hoje conta com 11 lojas no Brasil e 535 no Mundo.
                                                    </p>
                                                    <a href="#" target="_BLANK" class="prt_btn">Visite o site</a>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- fim do exemplo -->
                                    </div>
                                </div>
                                </div><!-- .wmg-item -->

JS

$(".work-screenshots").slice(0, 6).show();
    $("#loadMore-works").on('click', function (e) {
        e.preventDefault();
        $(".work-screenshots:hidden").slice(0, 3).slideDown();
        if ($(".work-screenshots:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
    });