<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';?>
<?php include 'inc/slider.php';?>
</div>
<div class="container">
  <div class="row m_2" >
    <?php include 'inc/left_maths.php';?>
    <div class="col-lg-9 "> 
      <script type="text/javascript">
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      <div class="heading_main_2">Events</div>
      <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/events_maths/2.JPG"  width="250" height="150"> </li>
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/3.JPG" width="250" height="150"> </li>
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/4.JPG" width="250" height="150"> </li>
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/7.JPG" width="250" height="150"> </li>
        
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/9.JPG"  width="250" height="150"> </li>
       
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/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/events_maths/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/events_maths/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/events_maths/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/events_maths/6.JPG" width="250" height="150"> </li>
        <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4 m_2"> <img class="img-responsive" src="images/events_maths/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/events_maths/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/events_maths/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/events_maths/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/events_maths/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/events_maths/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/events_maths/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/events_maths/5.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/footer.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>