<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">Fresher Welcome</div><br>
      <p>The Geography Association organised organized its Fresher’s Welcome on 18th September, 2014 for the Ist semester students. The students participated in various cultural activities and also got opportunity to interact and perform on the stage. The special guests of the occasion were Dr. V.K.Tyagi (Retired Professor, SBSC) and Dr. Amrita Bajaj (Deputy Dean Student Welfare).  </p><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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/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/fresher/7.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 &raquo;</a>';
                html += '<a class="controls previous" href="' + (index) + '">&laquo; 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>