File: /home/nyiet8349bzl/Backup/sbc_back/homedir/public_html/uttrakhand.php
<style type="text/css">
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
}
ul li img {
cursor: pointer; border:solid 2px #ccc; border-radius:5px ; box-shadow:#000 0px 1px 5px;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
/*override modal for demo only*/
.modal-dialog {
max-width:800px;
padding-top: 90px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:800px;
padding-top: 90px;
}
}
@media screen and (max-width:1500px){
#ads {
display:none;
}
}
</style>
<?php include 'inc/header.php';?>
<div class="slider_bg">
<div class="container">
<div class="row">
<div class="col-lg-12"> <img src="images/banner_sbsc.jpg" class="img-responsive" alt="">
<div class="heading_departments">
<h3>Department of Geography</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row m_2" >
<?php include 'inc/left_Geography.php';?>
<div class="col-lg-9 ">
<script type="text/javascript">
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="heading_main_2">Uttrakhand Visit</div><br><br>
<ul class="row">
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/1.jpg">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/2.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/3.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/4.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/5.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/6.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/7.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/8.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/9.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/10.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/11.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/12.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/13.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/14.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/15.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/16.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/17.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/18.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/19.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/20.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/21.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/22.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/23.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/24.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/25.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/26.JPG">
</li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/27.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/28.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/29.JPG">
</li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/30.JPG">
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2">
<img class="img-responsive" src="images/Uttranchal/31.JPG">
</li>
</ul>
</div> <!-- /container -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="clr"></div>
<br/>
<br/>
<br/>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clr"></div>
<?php include 'inc/fotter.php';?>
<script type="text/javascript">
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
//start of new code new code
var index = $(this).parent('li').index();
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
//new code
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');
$('.modal-body img').attr('src', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
</script>