<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-8" style="margin-top: 10%;"> <div class="row"> <div class="col-sm-4"> <img src="img/1.png" onclick="guru('grur_',1)" id="grur_1" class="my_res"> </div> <div class="col-sm-4"> <img src="img/2.png" onclick="guru('grur_',2)" id="grur_2" class="my_res"> </div> <div class="col-sm-4"> <img src="img/3.jpg" onclick="guru('grur_',3)" id="grur_3" class="my_res"> </div> <div class="col-sm-4"> <img src="img/4.jpg" onclick="guru('grur_',4)" id="grur_4" class="my_res"> </div> <div class="col-sm-4"> <img src="img/5.png" onclick="guru('grur_',5)" id="grur_5" class="my_res"> </div> <div class="col-sm-4"> <img src="img/6.jpg" onclick="guru('grur_',6)" id="grur_6" class="my_res"> </div> </div> </div> </div> </div> <div class="pop_up" id="popup"> <div class="container"> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="box_box"> <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="set_img" style="width: 100%; height: 400px;" class="sk"> <h2> <a href="javascript:;" id="pre_view_img" style= "display: none" class="btn btn-info col-sm-4">Previews Img</a> <a href="javascript:;" id="next_img" class="btn btn-success pull-right">Next Img</a> </h2> </div> </div> </div> </div> </div>

.ss{ margin-bottom: 10px; } #set_all_number{text-align: right;font-weight: bold;font-size: 20px;} .ss a{font-size: 25px;font-weight: bold; color: #000;} .ss{font-size: 25px;font-weight: bold; color: #170000;} .my_res{ width: 100%; height: 200px; border:2px solid #000; margin-bottom: 10px; } .pop_up{ background-color: rgb(0 0 0 / 79%); height: 100%; width: 100%; z-index: 99991; background-size: 100%; position: fixed; z-index: 99999; top: 0px; display: none; } .box_box{ background: #fff; padding: 10px; margin-top: 15%; border: 5px solid #1d6f1b; } .box_box h1{ height: 50px; margin: 0px; }

function hide_pop(){ document.getElementById('popup').style.display = "none"; } function guru(id_name,num){ var full_id = id_name+num; //show pop document.getElementById("popup").style.display="block"; //get img var src = document.getElementById(full_id).getAttribute('src'); //set img var src = document.getElementById("set_img").setAttribute('src',src); //set nex 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"; } //next document.getElementById("next_img").setAttribute('onclick','guru('+next_id+')'); //pre ; 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"; } } function pre_view_img(){ alert(); } function next_img(id_name){ //get img var src = document.getElementById(id_name).getAttribute('src'); //set img var src = document.getElementById("set_img").setAttribute('src',src); }