Wsrtjtyk

$(document).ready(function(){

    $.ajax({

        type:"GET",

        url:"data.xml",

        dataType:"xml",

        success:xmlParser2

    });

   });

   function xmlParser2(xml){

    xml = $(xml).children();

    let i = 0;

    let total = $(xml).children().length;

    $(xml).children().each(function (idx,index,item) {



        let tag = $(this).prop("tagName");

        let nextIdx = idx + 1;

        let prevIdx = idx - 1;

        //to make cyclic

        nextIdx = nextIdx == total ? 0 : nextIdx;

        prevIdx = prevIdx == -1 ? (total -1) : prevIdx;

 

        let image = '<img style="background-image:url(' + $(this).find("image").text() + ')"' + '" />';

        let image2 = '<div><img src="' + $(this).find("image").text() + '" width="100%" alt="' + '" />' + '</div>';

        let head = '<div>' + $(this).find("head").text() + '</div>';

       

        let html = `<div class="col-sm-4 random reveal" id="random">

                    <div class="thumbnail randomdiv3">

                    <a href="#${tag + idx}" id="openModalBtn">

                            <div>${image}</div>

                            <h5>${head}</h5>

                        </a>

                    </div>

                 </div>`;

        let popup = `<div id="${tag + idx}" class="overlay">

                <div class="popup">

                

                <a href="#${tag + prevIdx}" class="previous round">‹</a>

                <a href="#${tag + nextIdx}" class="next round">›</a>

                    <h6>${head}</h6>

                    <a class="close" href="#">&times;</a>

                    <div>${image2}</div>

                </div>

            </div>`;



            $("#xmldata").append(html);

 

        $("#popup").append(popup);

    });

}