<?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>National Workshop</h3>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="container">
  <div class="row m_2" >
       <?php include 'inc/left_index.php';?>
    <div class="col-lg-9 ">

      <div class="heading_main_2">National Workshop</div><br>
     
      <p>Shaheed Bhagat Singh college organized a National Workshop on<br/>
Monitoring and Modelling Socio-Economic Impact of Land Use/Land Cover<br/>
and pollution under the aegis of Innovation Project SBS 202 on Feb. 14, 2015. Dr R B Singh of University of Delhi was Key note speaker and guest of honour was Dr. Masateru Hino of Tohoku University of Japan. Dr. Vishwa Raj Sharma was convener of this workshop.</p>
 
            <div class="col-lg-6 m_2">
                <img class="img-responsive" src="images/National-Workshop/1.JPG">
            </div>
            <div class="col-lg-6 m_2">
                <img   class="img-responsive" src="images/National-Workshop/2.JPG" >
            </div>
            <div class="col-lg-6 m_2">
                <img class="img-responsive" src="images/National-Workshop/3.JPG">
            </div>
            <div class="col-lg-6 m_2">
                <img class="img-responsive" src="images/National-Workshop/4.JPG">
            </div>
            <div class="col-lg-6 m_2">
                <img class="img-responsive" src="images/National-Workshop/5.JPG">
            </div>
      
      
           
                 
    </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>