I4C

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>I4C</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="css/responsive.css" rel="stylesheet"> <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon"> <link rel="icon" href="images/favicon.png" type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <style> #content { width: 100%; padding: 10px; margin-bottom: 10px; } .pagination { display: flex; justify-content: center; margin-top: 10px; } .pagination button { margin: 0 5px; } </style> <div class="page-wrapper"> <div class="preloader"></div> <span class="header-span"></span> <header class="main-header header-style-two"> <div class="main-box"> <div class="auto-containers clearfix"> <div class="logo-box"> <div class="logo innerlg"> <a href="index.php"> <img src="images/Logo_I4C.png" alt="" title=""> </a> </div> </div>  <div class="nav-outer clearfix">  <div class="mobile-nav-toggler"><span class="icon flaticon-menu"></span></div>  <nav class="main-menu navbar-expand-md navbar-light"> <div class="navbar-header">  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon flaticon-menu-button"></span> </button> </div> <div class="collapse navbar-collapse clearfix" id="navbarSupportedContent"> <ul class="navigation clearfix"> <li ><a href="index.php">Home</a> </li> <li ><a href="about.php">About</a></li> <li ><a href="committee.php">Committee</a></li> <li class="dropdown"><a href="">Conference</a> <ul> <li><a href="pastconference.php">Past Conference</a></li> <li><a href="awards.php">Awards and Recognations</a></li> </ul> </li> <li ><a href="gallery.php">Gallery</a></li> <li ><a href="schedule.php">Schedule</a></li> <li ><a href="publication.php">Publication</a></li> <li ><a href="venue.php">Venue</a></li> </ul> </div> </nav>   <div class="outer-box">    <div class="btn-box"> <a href="submission.php" class="theme-btn btn-style-one"><span class="btn-title">Submission</span></a> </div> <div class="btn-box"> <a href="index.php#reg-sec" class="theme-btn btn-style-one"><span class="btn-title">Registration</span></a> </div> </div> </div> </div> </div>  <div class="mobile-menu"> <div class="menu-backdrop"></div> <div class="close-btn"><span class="icon flaticon-cancel-1"></span></div> <nav class="menu-box"> <div class="nav-logo"><a href="index.php"><img src="images/Logo_I4C.png" alt="" title=""></a></div> <ul class="navigation clearfix"> </ul> <div class="btn-box"> <a href="submission.php" class="theme-btn btn-style-one"><span class="btn-title">Submission</span></a> </div> <div class="btn-box"> <a href="index.php#reg-sec" class="theme-btn btn-style-one"><span class="btn-title">Registration</span></a> </div> </nav> </div>  </header> <section class="page-title" style="background-image:url(images/background/5.jpg);"> <div class="auto-container"> <h1>Gallery</h1> </div> </section> <section class="gallery-section"> <div class="auto-container"> <div class="sec-title text-center">  <h2>Event Gallery</h2> </div> <div class="row" id="content"></div> <div class="pagination"></div> </div> </section> <style> .float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 50px; box-shadow: 2px 2px 3px #999; z-index: 100; margin-bottom: 100px; } .my-float { margin-top: 16px; } </style> <footer class="main-footer">  <div class="widgets-section"> <div class="auto-container"> <div class="row">  <div class="big-column col-xl-6 col-lg-12 col-md-12 col-sm-12"> <div class="row">  <div class="footer-column col-xl-7 col-lg-6 col-md-6 col-sm-12"> <div class="footer-widget about-widget"> <div class="logo"> <a href="">  <img src="images/Logo_I4C.png" alt="" title=""> </a> </div> <div class="text"> <p>The Industry 4.0 Conference is a significant event that focuses on the advancements and implications of the Fourth Industrial Revolution, often referred to as Industry 4.0. </p> </div> <ul class="social-icon-one social-icon-colored"> <li><a href="https://www.facebook.com/profile.php?id=61558004499885" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li><a href="https://www.youtube.com/@coreresearchfoundation1974" target="_blank"><i class="fab fa-youtube"></i></a></li> <li><a href="https://www.instagram.com/coreresearchfoundation/?fbclid=IwAR3CgMUP_7YUcdihPGPWDIzzG5MndA9ZEvjVsXSHZXVJaznZirkYQloyEDU" target="_blank"><i class="fab fa-instagram"></i></a></li> <li><a href="https://www.linkedin.com/company/coreresearch-foundation/mycompany/" target="_blank"><i class="fab fa-linkedin"></i></a></li> </ul> </div> </div>  <div class="footer-column col-xl-5 col-lg-6 col-md-6 col-sm-12"> <div class="footer-widget useful-links"> <h2 class="widget-title">Useful Links</h2> <ul class="user-links"> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="committee.php">Committee</a></li> <li><a href="gallery.php">Gallery</a></li> <li><a href="schedule.php">Schedule</a></li> <li><a href="publication.php">Publication</a></li> <li><a href="venue.php">Venue</a></li> </ul> </div> </div> </div> </div>  <div class="big-column col-xl-6 col-lg-12 col-md-12 col-sm-12"> <div class="row">  <div class="footer-column col-lg-6 col-md-6 col-sm-12">  <div class="footer-widget contact-widget"> <h2 class="widget-title">Contact Us</h2>  <div class="widget-content"> <ul class="contact-list"> <li> <span class="icon flaticon-clock"></span> <div class="text">Mon - Fri: 09:00 - 18:00</div> </li> <li> <span class="icon flaticon-phone"></span> <div class="text"> <a href="">+91 9237388323</a>  </div> </li> <li> <span class="icon flaticon-paper-plane"></span> <div class="text"> <a href="">info@i4conference.com</a> </div> </li> <li> <span class="icon flaticon-worldwide"></span> <div class="text">Kuala lumpur, Malaysia </div> </li> </ul> </div> </div> </div>  <div class="footer-column col-lg-6 col-md-6 col-sm-12">  <div class="footer-widget instagram-widget"> <h2 class="widget-title">Gallery</h2> <div class="widget-content"> <div class="outer clearfix"> <figure class="image"> <a href="images/gallery/01.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/01.png" alt=""> </a> </figure> <figure class="image"> <a href="images/gallery/02.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/02.png" alt=""> </a> </figure> <figure class="image"> <a href="images/gallery/03.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/03.png" alt=""> </a> </figure> <figure class="image"> <a href="images/gallery/04.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/04.png" alt=""> </a> </figure> <figure class="image"> <a href="images/gallery/05.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/05.png" alt=""> </a> </figure> <figure class="image"> <a href="images/gallery/06.png" class="lightbox-image" title="Image Title Here"> <img src="images/gallery/06.png" alt=""> </a> </figure> </div> </div> </div> </div> </div> </div> </div> </div> </div> <a href="https://api.whatsapp.com/send?phone=+919237388323&text=Hi I4C" class="float" target="_blank"> <i class="fab fa-whatsapp my-float"></i> </a>  <div class="footer-bottom"> <div class="auto-container"> <div class="inner-container clearfix"> <div class="copyright-text"> <p>漏 Copyright 2023 All Rights Reserved by <a href="index.php">Kytics Technology</a></p> </div> </div> </div> </div> </footer>  <script type="text/javascript"> var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date(); (function() { var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0]; s1.async = true; s1.src = 'https://embed.tawk.to/66177ae91ec1082f04e11725/1hr5rg8be'; s1.charset = 'UTF-8'; s1.setAttribute('crossorigin', '*'); s0.parentNode.insertBefore(s1, s0); })(); </script>  </div> <div id="search-popup" class="search-popup"> <div class="close-search theme-btn"><span class="fas fa-window-close"></span></div> <div class="popup-inner"> <div class="overlay-layer"></div> <div class="search-form"> <form method="post" action="index.php"> <div class="form-group"> <fieldset> <input type="search" class="form-control" name="search-input" value="" placeholder="Search Here" required> <input type="submit" value="Search Now!" class="theme-btn"> </fieldset> </div> </form> <br> <h3>Recent Search Keywords</h3> <ul class="recent-searches"> <li><a href="#">Seo</a></li> <li><a href="#">Bussiness</a></li> <li><a href="#">Events</a></li> <li><a href="#">Digital</a></li> <li><a href="#">Conferance</a></li> </ul> </div> </div> </div> <div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-angle-double-up"></span></div> <script src="js/jquery.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/jquery.fancybox.js"></script> <script src="js/appear.js"></script> <script src="js/owl.js"></script> <script src="js/wow.js"></script> <script src="js/script.js"></script> <script src="js/color-settings.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPH8h1UpcK01BdcvoZeOzq-_wJqRxN1Pc"></script> <script src="js/map-script.js"></script> <script> var all_data = []; var all_data_arr = []; var items; all_data_arr = ["01.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","09.png","10.png","11.png","12.png","13.png","14.png","15.png","16.png","17.png","18.png","19.png","20.png","Untitled-2.jpg"]; $.each(all_data_arr, (j, k) => { all_data.push( `<div class="image-box"></div><figure class="image"><img src="images/` + k + `" alt=""></figure><div class="overlay-box"><a href="images/` + k + `" class="lightbox-image" data-fancybox='gallery'><span class="icon fa fa-expand-arrows-alt"></span></a></div>` ); }); items = all_data; const itemsPerPage = 9; let currentPage = 1; function displayItems(page) { const startIndex = (page - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; const paginatedItems = items.slice(startIndex, endIndex); const contentDiv = document.getElementById('content'); contentDiv.innerHTML = ''; paginatedItems.forEach(item => { const itemDiv = document.createElement('div'); itemDiv.classList.add('gallery-item'); itemDiv.classList.add('col-lg-4'); itemDiv.classList.add('col-md-6'); itemDiv.classList.add('col-sm-12'); itemDiv.classList.add('wow'); itemDiv.classList.add('fadeIn'); itemDiv.innerHTML = item; contentDiv.appendChild(itemDiv); }); } function displayPagination() { const totalPages = Math.ceil(items.length / itemsPerPage); const paginationDiv = document.querySelector('.pagination'); paginationDiv.innerHTML = ''; for (let i = 1; i <= totalPages; i++) { const button = document.createElement('button'); button.classList.add('btn'); button.classList.add('btn-primary'); button.textContent = i; button.addEventListener('click', () => { currentPage = i; displayItems(currentPage); updateActiveButton(); }); paginationDiv.appendChild(button); } updateActiveButton(); } function updateActiveButton() { const buttons = document.querySelectorAll('.pagination button'); buttons.forEach(button => { if (parseInt(button.textContent) === currentPage) { button.classList.add('active'); } else { button.classList.remove('active'); } }); } displayItems(currentPage); displayPagination(); </script> </body> </html>

CINXE.COM

I4C