ok
Mini Shell
<?php
//echo phpinfo();
include "header.php";
date_default_timezone_set("Asia/Kolkata");
include "admin/includes/config.php";
error_reporting(E_ALL);
error_reporting(1);
$cquery=mysqli_query($con, "SELECT * from tbl_college");
$singleRow = mysqli_fetch_row($cquery);
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
<style>
.modal-header {
background: #ef715f;
color: #fff;
}
.modal-header .close {
height: 50px;
width: 50px;
/* background: #fff; */
border-radius: 51%;
font-size: 30px;
padding: 0;
color: #fff;
position: absolute;
left: auto;
right: 8px;
top: 5px;
}
.btn-custom {
background: #ef715f;
border-radius: 5px;
color: #fff;
padding: 9px 42px;
margin: 20px auto;
display: block;
font-size: 20px;
font-weight: 700;
}
.btn-custom:hover {
color: #fff;
}
blockquote {
font-size: 1.1em;
line-height: 1.6em;
padding: 20px 20px 20px 40px;
border-left: none;
position: relative;
text-indent: -19px
}
blockquote p {
font-size: 1em
}
blockquote:before,
blockquote:after {
font-family: Arial, serif;
font-size: 2.5em;
vertical-align: middle;
line-height: 0
}
blockquote:before {
content: open-quote;
margin-right: 3px
}
blockquote:after {
content: close-quote;
margin-left: 2px
}
blockquote.blockstyle,
blockquote.style2 {
background: #fff;
font-style: italic
}
blockquote.blockstyle p,
blockquote.style2 p {
display: inline
}
blockquote.blockstyle:before,
blockquote.blockstyle:after {
color: #f0715f
}
/* popup ends */
.counter {
background-color:#f5f5f5;
padding: 20px 0;
border-radius: 5px;
}
.count-title {
font-size: 40px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
color: #4ad1e5;
}
</style>
<!-- Launch Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="exampleModalLabel">Quotation of the Day.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<section id="block_content">
<div class="container">
<blockquote class="blockstyle"> <span class="triangle"></span><?php echo $singleRow[20]; ?> </blockquote>
</div>
</section>
<button type="button" class="btn btn-custom" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<section>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/slider/Untitled-2.jpeg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slider/7c9a778d594c025dc99213019cdf6bcf_1.jpeg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slider/4317652e7e08e3edc6d6e607122d7500_1.jpeg" alt="">
</div>
<!-- <div class="carousel-item">-->
<!-- <img class="d-block w-100" src="images/slider/NCF_Banner.jpg" alt="">-->
<!--</div>-->
<div class="carousel-item">
<img class="d-block w-100" src="images/slider/ban.jpg" alt="SWARAJ Bharat ke Swatantrata Sangram ki Samagra Gatha">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slider/Agniveer.jpg" alt="Agniveer">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/slider/banner_1636428702.jpg" alt="Ajadi ka Amrut Mahotsab">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section><section class="marquee-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="marquee-section">
<div class="updates">Latest Updates</div>
<?php
$query=mysqli_query($con,"select * from tbl_notice order by logdate desc limit 1");
$cnt=1;
while($row=mysqli_fetch_array($query)){
$noticesub=$row['subject'];
$noticepath=$row['docpath'];
}
$query1=mysqli_query($con,"select * from tbl_videogallery order by logdate desc limit 1");
while($row1=mysqli_fetch_array($query1)){
$newsub=$row1['subject'];
$newspath=$row1['vodeopath'];
}
$query2=mysqli_query($con,"select * from tbl_event order by logdate desc limit 1");
while($row2=mysqli_fetch_array($query2)){
$eventsub=$row2['subject'];
$eventpath=$row2['docpath'];
}
?>
<marquee onmouseover="this.stop()" onmouseout="this.start()" class="notice_marquee" scrollamount="4">
<a href="upload/notice/<?php echo $noticepath;?>" target="_blank"><?php echo $noticesub;?> <img src="assets/images/new.gif" alt="New" border="0" align="absmiddle"/></a> <span class="text-white">||</span>
<a href="upload/video/<?php echo $newspath;?>" target="_blank"><?php echo $newsub;?> <img src="assets/images/new.gif" alt="New" border="0" align="absmiddle"/></a> <span class="text-white">||</span>
<a href="upload/event/<?php echo $eventpath;?>" target="_blank"><?php echo $eventsub;?> <img src="assets/images/new.gif" alt="New" border="0" align="absmiddle"/></a> <span class="text-white">||</span>
</marquee>
</div>
</div>
</div>
</div>
</section> <section class="section-15 about-section" id="body">
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="title">
<h1><span>About NGWC, ASKA,GANJAM</span></h1>
</div>
<p class="text-justify"><?php echo substr($singleRow[10],0,1300);?></p>
<h2 class="subheading">Location</h2>
<p class="text-justify"> <?php echo $singleRow[5];?>
</p>
<p class="read-more-btn-p"><strong><a class="read-more-btn" href="about-us.php">Read More...</a></strong></p>
</div>
<div class="col-md-5">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Notices</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">News</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Upcoming Events</a>
</div>
</nav>
<div class="tab-content " id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<ul class="notice-list" id="style-6">
<?php
$query=mysqli_query($con,"select * from tbl_notice order by logdate desc limit 5");
$cnt=1;
while($row=mysqli_fetch_array($query)){
?>
<li><strong><span class="month"><?php echo date("M Y",strtotime($row['noticedate']));?></span><span class="year"><?php echo date("d",strtotime($row['noticedate']));?></span></strong><a href="upload/notice/<?php echo $row['docpath'];?>" target="_blank"><?php echo $row['subject'];?> <img src="assets/images/new.gif" alt="New" border="0" align="absmiddle"/></a></li>
<?php }?>
<p><a href="notices.php" class="footer-btn">Read More... </a></p>
</ul>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<ul class="notice-list" id="style-6">
<?php
$query=mysqli_query($con,"select * from tbl_videogallery order by logdate desc limit 10");
$cnt=1;
while($row=mysqli_fetch_array($query)){
?>
<li><strong><span class="month"><?php echo date("M Y",strtotime($row['edate']));?></span><span class="year"><?php echo date("d",strtotime($row['edate']));?></span></strong><a href="upload/video/<?php echo $row['vodeopath'];?>" target="_blank"><?php echo $row['subject'];?> </a></li>
<?php } ?>
<p><a href="news.php" class="footer-btn">Read More...</a></p>
</ul>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<ul class="notice-list" id="style-6">
<?php
$query=mysqli_query($con,"select * from tbl_event order by logdate desc limit 10");
// $cnt=1;
while($row=mysqli_fetch_array($query)){
?>
<li><strong><span class="month"><?php echo date("M Y",strtotime($row['dateofevent']));?></span><span class="year"><?php echo date("d",strtotime($row['dateofevent']));?></span></strong><a href="upload/event/<?php echo $row['docpath'];?>" target="_blank"><?php echo $row['subject'];?> </a></li>
<?php }?>
<p><a href="events.php" class="footer-btn">Read More...</a></p>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="info-sec">
<div class="container">
<div class="row">
<div class="col-lg-5 ">
<div class="vision-mission-box">
<div class="title">
<h1><span>Vision</span></h1>
</div>
<p class="text-justify"><?php echo $singleRow[8];?></p>
<div class="title">
<h1><span>Mission</span></h1>
</div>
<ul class="new-list">
<li><?php echo $singleRow[7];?></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="title">
<h1><span>Principal's Message</span></h1>
</div>
<div class="card mt-3">
<div class="box">
<div class="img">
<?php
$query=mysqli_query($con,"select * from tbl_principal where status='1'");
while($row=mysqli_fetch_array($query)){
$photo=$row['photopath'];
$pname=$row['pname'];
}
?>
<img src="upload/teacher/<?php echo $photo; ?>" alt="Principal's Message">
<?php ?>
</div>
<h4 class="principal-name"><?php echo $pname;?></h4>
<p><strong>Principal NGWC,ASKA,GANJAM</strong></p>
<?php echo $singleRow[15];?><p><a href="principal-s-message.php" class="footer-btn">Read More... </a></p>
</div>
</div>
</div>
<?php include"sidebar.php";?>
</div>
</section>
<!-- <section class="mt-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title">
<h1><span>RIE Videos</span><strong><a href="video-gallery.php">Load More</a></strong></h1>
</div>
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/yl8znhS-IeM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/U4CAFlVlc2w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/wsTEXMpV-8Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/qsJW_gNx_hY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/5KgTl337B0o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/6GuyjoWiMz0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="item">
<div class="pad15">
<iframe width="100%" height="170" src="https://www.youtube.com/embed/feNtDVLwErY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<button class="btn btn-primary leftLst"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
<button class="btn btn-primary rightLst"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
</section>
<section class="mb-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title">
<h1><span>RIE Images</span><strong><a href="photo-gallery.php">Load More</a></strong></h1>
</div>
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1608171535242.jpg" alt="Independence Day Celebration 2017">
</div>
<p><a href="photo-gallery.php?url=independence-day-celebration-2017">Independence Day Celebration 2017</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_2508171246340.JPG" alt="Planning Meeting of key resource persons at elementary and secondary level on ICT">
</div>
<p><a href="photo-gallery.php?url=planning-meeting-of-key-resource-persons-at-elementary-and-secondary-level-on-ict">Planning Meeting of key resource persons at elementary and secondary level on ICT</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_0201181127072.jpg" alt="National Rural Tribal Youth Convention 2018">
</div>
<p><a href="photo-gallery.php?url=national-rural-tribal-youth-convention-2018">National Rural Tribal Youth Convention 2018</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1902181526250.jpg" alt="1st Regional Institutes Student's Meet 2017-18">
</div>
<p><a href="photo-gallery.php?url=1st-regional-institutes-student-s-meet-2017-18">1st Regional Institutes Student's Meet 2017-18</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1902181545158.jpg" alt="54th Annual Athletic Meet 2018">
</div>
<p><a href="photo-gallery.php?url=54th-annual-athletic-meet-2018">54th Annual Athletic Meet 2018</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1902181556003.jpg" alt="Celebration of 69th Republic Day 2018">
</div>
<p><a href="photo-gallery.php?url=celebration-of-69th-republic-day-2018">Celebration of 69th Republic Day 2018</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1902181607162.jpg" alt="Interaction meeting of Northeastern Indian students with the vice chancellor of Utkal University">
</div>
<p><a href="photo-gallery.php?url=interaction-meeting-of-northeastern-indian-students-with-the-vice-chancellor-of-utkal-university">Interaction meeting of Northeastern Indian students with the vice chancellor of Utkal University</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_2302181727450.jpg" alt="National Science Day Celebration 2018">
</div>
<p><a href="photo-gallery.php?url=national-science-day-celebration-2018">National Science Day Celebration 2018</a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_0803181510272.jpg" alt="International Woman's Day ">
</div>
<p><a href="photo-gallery.php?url=international-woman-s-day-">International Woman's Day </a></p>
</div>
</div>
<div class="item">
<div class="pad15">
<div class="image-box item-zoom">
<img src="images/gallery/thumb/photo_1503181448060.jpg" alt="54th Cultural Festival">
</div>
<p><a href="photo-gallery.php?url=54th-cultural-festival">54th Cultural Festival</a></p>
</div>
</div>
</div>
<button class="btn btn-primary leftLst"><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
<button class="btn btn-primary rightLst"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
</section> -->
<section class="facilities">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<div class="title">
<h1><span>Special Facilities for Students</span></h1>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box">
<p><i class="fa fa-desktop" aria-hidden="true"></i></p>
<h1>e-Admission</h1>
<p>For admission into +3 and +2 1st year classes of this college an eligible candidate has to apply on-line.</p>
<p><a href="computer-application-centre.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box box-2">
<p><i class="fa fa-building-o" aria-hidden="true"></i></p>
<h1>Examination Cell</h1>
<p>The College Examination Cell conducts all the examinations of the college.</p>
<p><a href="educational-technology-et-cell.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box box-3">
<p><i class="fa fa-camera" aria-hidden="true"></i></p>
<h1>Anti Ragging Cell</h1>
<p>Ragging “means” Causing, inducing, compelling or forcing or beating a student, whether by way of practical joke or otherwise, by our college.</p>
<p><a href="ict-studio.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box box-4">
<p><i class="fa fa-ambulance" aria-hidden="true"></i></p>
<h1>Sexual Harassment Prevention Cell</h1>
<p>As per the guidelines of UGC and the Supreme Court an Anti-Sexual Harassment Cell has been established by the college.</p>
<p><a href="dispensary.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box box-5">
<p><i class="fa fa-university" aria-hidden="true"></i></p>
<h1>LIBRARY</h1>
<p>The Library is located centrally in the Institute main building and contains more than 15000 books, arranged into different sections and sub-sections</p>
<p><a href="our_library.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
<div class="col-md-4">
<div class="facilities-box box-6">
<p><i class="fa fa-home" aria-hidden="true"></i></p>
<h1>HOSTEL</h1>
<p>The College maintains two boys’ Hostel for Boys and One girls’ Hostel for Girls.</p>
<p><a href="hostel.html">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
</div>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="title">
<h1><span>Video</span></h1>
</div>
<iframe width="100%" height="265" src="https://www.youtube.com/embed/2MSjMBgQInE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <a href="https://www.youtube.com/watch?v=feNtDVLwErY" target="_blank">
<img src="assets/images/youtube.png" alt="Youtube">
</a> -->
<div class="title">
<h1><span>Great Educators</span></h1>
</div>
<div class="slider">
<div class="imgs mt-1">
<div class="img" style="left: 0;"> <img src="images/anigif.gif" class="img-thumb" style='height: 100%; width: 100%;' alt=""></div>
</div>
<!-- <div class="dots">
</div> -->
</div>
</div>
</div>
</div>
</section>
<section class="facilities">
<div class="container">
<div class="row text-center">
<div class="col-lg-3 col-md-6">
<div class="counter">
<i class="fa fa-anchor fa-2x" aria-hidden="true"></i>
<h2 class="timer count-title count-number" data-to="<?php echo $singleRow[17];?>" data-speed="1500"></h2>
<p class="count-text ">Teachers</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="counter">
<i class="fa fa-building fa-2x" aria-hidden="true"></i>
<h2 class="timer count-title count-number" data-to="<?php echo $singleRow[16];?>" data-speed="1500"></h2>
<p class="count-text ">Class Rooms</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="counter">
<i class="fa fa-user fa-2x" aria-hidden="true"></i>
<h2 class="timer count-title count-number" data-to="<?php echo $singleRow[19];?>" data-speed="1500"></h2>
<p class="count-text ">Students</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="counter">
<i class="fa fa-book fa-2x" aria-hidden="true"></i>
<h2 class="timer count-title count-number" data-to="<?php echo $singleRow['18'];?>" data-speed="1500"></h2>
<p class="count-text ">Books</p>
</div>
</div>
</div>
</div>
</section>
<section class="gallery-block compact-gallery">
<div class="container">
<div class="title">
<h1><span>Our Gallery</span></h1>
</div>
<div class="row no-gutters">
<?php
$query=mysqli_query($con,"select * from tbl_gallery where status=1 order by id desc limit 8");
$cnt=1;
while($row=mysqli_fetch_array($query)){
?>
<div class="col-md-3 col-lg-3 col-sm-6 item zoom-on-hover">
<a class="lightbox" href="upload/gallery/<?php echo $row['imagepath']; ?>">
<img class="img-fluid image" src="upload/gallery/<?php echo $row['imagepath']; ?>">
<span class="description">
<span class="description-heading"><?php echo strtoupper($row['event_date']); ?></span>
<span class="description-body"><?php echo strtoupper($row['subject']); ?></span>
</span>
</a>
</div>
<?php }?>
</div>
</div>
</section>
<?php
include "footer.php";
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', { animation: 'slideIn'});
</script>
<script>
(function ($) {
$.fn.countTo = function (options) {
options = options || {};
return $(this).each(function () {
// set options for current element
var settings = $.extend({}, $.fn.countTo.defaults, {
from: $(this).data('from'),
to: $(this).data('to'),
speed: $(this).data('speed'),
refreshInterval: $(this).data('refresh-interval'),
decimals: $(this).data('decimals')
}, options);
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(settings.speed / settings.refreshInterval),
increment = (settings.to - settings.from) / loops;
// references & variables that will change with each update
var self = this,
$self = $(this),
loopCount = 0,
value = settings.from,
data = $self.data('countTo') || {};
$self.data('countTo', data);
// if an existing interval can be found, clear it first
if (data.interval) {
clearInterval(data.interval);
}
data.interval = setInterval(updateTimer, settings.refreshInterval);
// initialize the element with the starting value
render(value);
function updateTimer() {
value += increment;
loopCount++;
render(value);
if (typeof(settings.onUpdate) == 'function') {
settings.onUpdate.call(self, value);
}
if (loopCount >= loops) {
// remove the interval
$self.removeData('countTo');
clearInterval(data.interval);
value = settings.to;
if (typeof(settings.onComplete) == 'function') {
settings.onComplete.call(self, value);
}
}
}
function render(value) {
var formattedValue = settings.formatter.call(self, value, settings);
$self.html(formattedValue);
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 0, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
formatter: formatter, // handler for formatting the value before rendering
onUpdate: null, // callback method for every time the element is updated
onComplete: null // callback method for when the element finishes updating
};
function formatter(value, settings) {
return value.toFixed(settings.decimals);
}
}(jQuery));
jQuery(function ($) {
// custom formatting example
$('.count-number').data('countToOptions', {
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
}
});
// start all the timers
$('.timer').each(count);
function count(options) {
var $this = $(this);
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
$this.countTo(options);
}
});
</script>
<script>
$(document).ready(function() {
$("#exampleModal").modal('show');
});
</script>
Zerion Mini Shell 1.0