<?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>GOLDEN JUBILEE CELEBRATIONS 2016-17 </h3>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div class="container">
  <div class="row m_2" >
       <span class="col-lg-9 ">
       <object type="application/pdf" data="pdf/national-workshop-latex-webdesign.pdf" width="100%" height="1000">
       </object>
       </span>
       <?php include 'inc/left_index.php';?>
    <div class="col-lg-9 ">

      <div class="heading_main_2">GOLDEN JUBILEE CELEBRATIONS 2016-17  </div><br>
      
     <a href="https://docs.google.com/forms/d/1wPD_ruQ3SQ1kiOkm3KGwIbBREFcfmnvlrBll-WJL5mM/viewform?c=0&w=1" target="_blank"  style="margin:-10px 0;" class="btn btn-danger pull-right">Registration Now</a><br><br>
         <div class="sub_heaqding"> National Workshop on Latex and Website Designing, Poster </div>  
         
           <object type="application/pdf" data="http://www.sbsc.in/pdf/0138ac84ddf6f62e8337e79a11fcfa73.pdf" width="100%" height="1000">
       
      </object>
           
         
                 
    </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>