<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-4"> <img src="https://images.csmonitor.com/csm/2020/04/0407%20DDP%20NATURECALM%20topaz%20lake.jpg?alias=standard_900x600" class="img-responsive main_img" onclick="guru('grur_',1)" id="grur_1"> </div> <div class="col-sm-4"> <img src="https://static.bnr.bg/gallery/7d/7dbd10e1f28587e769fbec1098fbbeaf.jpg" class="img-responsive main_img" onclick="guru('grur_',2)" id="grur_2"> </div> <div class="col-sm-4"> <img src="https://www.viewbug.com/media/mediafiles/2016/12/31/70592702_medium.jpg" class="img-responsive main_img" onclick="guru('grur_',3)" id="grur_3"> </div> <div class="col-sm-4"> <img src="https://d1taxzywhomyrl.cloudfront.net/s3/ag-images-eu/10/bfd3dfb4d0744a18adc41a619391b400.jpg?width=550&height=350&mode=crop" class="img-responsive main_img" onclick="guru('grur_',4)" id="grur_4"> </div> <div class="col-sm-4"> <img src="https://www.nationalobserver.com/sites/nationalobserver.com/files/styles/nat_header_full_size/public/img/2020/04/26/eastern_moose._zack_metcalfe_photo_002_-_a_flower_for_the_prosecution_-_december_20_-_2019_-_resized.jpg?itok=gYbqZEiw" class="img-responsive main_img" onclick="guru('grur_',5)" id="grur_5"> </div> <div class="col-sm-4"> <img src="https://cache.desktopnexus.com/thumbseg/1814/1814758-bigthumbnail.jpg" class="img-responsive main_img" onclick="guru('grur_',6)" id="grur_6"> </div> </div> </div> <div id="popup_img"> <div class="container"> <div class="row"> <div class="col-sm-3" id="top"> <a href="javascript:;" id="pre_view_img" style="display: none" class="btn btn-success pull-left">Pre Img</a> </div> <div class="col-sm-6"> <div class="box_box" id="bod"> <h1>Light box popup <span class="pull-right"> <a href ="javascript:;" onclick="hide_pop()" class="btn btn-info" >Close</a></span> </h1> <img src="" id="img_popup" style="width: 100%; height: 400px;"> </div> </div> <div class="col-sm-3" id="top"> <a href="javascript:;" id="next_img" class="btn btn-info pull-right">Next Img</a> </div> </div> </div> </div>

.main_img{ height: 250px; width: 100%; margin-bottom: 20px; border: 4px solid gray; padding: 2px; } #popup_img{ background-color: rgb(0 0 0 / 79%); height: 100%; width: 100%; z-index: 999; position: fixed; z-index: 99999; top: 0px; display: none; } #img_popup{ height: 500px; width: 100%; } #bod { background-color: #fff; padding: 10px; border: 5px solid green; } #top{ margin-top: 250px; }

function hide_pop(){ document.getElementById('popup_img').style.display = "none"; } function guru(id_name,num){ var full_id = id_name+num; document.getElementById("popup_img").style.display="block"; var src = document.getElementById(full_id).getAttribute('src'); var src = document.getElementById("img_popup").setAttribute('src',src); if(num==6){ var next_id = id_name+(num); document.getElementById("next_img").style.display = "none"; }else{ var next_id = "'"+id_name+"'"+","+(num+1); document.getElementById("next_img").style.display = "block"; } document.getElementById("next_img").setAttribute('onclick','guru('+next_id+')'); if(num>=2){ document.getElementById("pre_view_img").style.display = "block"; var pre_id = "'"+id_name+"'"+","+(num-1); document.getElementById("pre_view_img").setAttribute('onclick','guru('+pre_id+')'); }else if(num==1){ document.getElementById("pre_view_img").style.display = "none"; } }