<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">Zofia Rączkowska Lecture</div><br>
     
      <p>The Department also got an opportunity to listen and interact with Prof. Zofia Rączkowska of Head of Department of Geo-environmental Research, Head of the Homerka Laboratory of Fluvial Processes, Institute of Geography and Spatial Organization Polish Academy of Sciences,  Poland. She delivered a lecture on 25 September,2014 on PINDARI VALLEY RELIEF AND ITS RECENT TRANSFORMATION which gave an insight into the shrinking and expanding glaciers in Himalayan region.</p>
    <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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/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/Zofia/9.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>