ikan Uploader :
Directory : /home/u956822991/domains/kalamasserylocalnews.com/public_html/
Upload File : |
| Current File : /home/u956822991/domains/kalamasserylocalnews.com/public_html/epaper-test.php |
<?php
error_reporting(0);
include('includes/config.php');
date_default_timezone_set('Asia/Kolkata');
$date = date("d-m-Y");
// Get the latest newspaper date from database
$ret = mysqli_query($con, "SELECT postingDate FROM uploads ORDER BY id DESC LIMIT 1");
$row = mysqli_fetch_array($ret);
$postingDate = $row['postingDate'];
// Get all images from the directory for this date
$imageDir = "admin/newsimages/" . $postingDate . "/";
$images = array();
if (is_dir($imageDir)) {
$files = scandir($imageDir);
foreach ($files as $file) {
if (!in_array($file, array('.', '..')) {
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
if (in_array($ext, array('jpg', 'jpeg', 'png', 'gif'))) {
$images[] = $imageDir . $file;
}
}
}
// Sort images naturally (1.jpg, 2.jpg, etc.)
natsort($images);
$images = array_values($images); // Re-index array
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Kalamassery Local News</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Magazine flip effect CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.1/turn.min.css">
<style>
#magazine {
width: 800px;
height: 500px;
margin: 20px auto;
}
#magazine .page {
background-color: white;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.magazine-controls {
text-align: center;
margin: 20px 0;
}
.magazine-controls button {
padding: 10px 20px;
margin: 0 10px;
background: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.no-images {
text-align: center;
padding: 50px;
font-size: 18px;
}
</style>
</head>
<body>
<?php include('header.php'); ?>
<div class="container">
<h1>Today's Newspaper (<?php echo date("d-M-Y"); ?>)</h1>
<div id="magazine">
<?php if (empty($images)): ?>
<div class="no-images">No pages found for today's newspaper</div>
<?php endif; ?>
</div>
<?php if (!empty($images)): ?>
<div class="magazine-controls">
<button id="prev-page">Previous</button>
<span id="page-indicator">Page 1 of <?php echo ceil(count($images)/2); ?></span>
<button id="next-page">Next</button>
</div>
<?php endif; ?>
</div>
<?php include('footer.php'); ?>
<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.1/turn.min.js"></script>
<script>
$(document).ready(function() {
<?php if (!empty($images)): ?>
// Initialize the magazine with our images
var magazine = $('#magazine');
// Create pages (2 images per spread)
<?php
for ($i = 0; $i < count($images); $i += 2) {
echo 'magazine.append(\'<div><div class="page" style="background-image:url('.$images[$i].')"></div>';
if (isset($images[$i+1])) {
echo '<div class="page" style="background-image:url('.$images[$i+1].')"></div></div>\');';
} else {
echo '<div class="page"></div></div>\');'; // Empty back page
}
}
?>
// Initialize turn.js
magazine.turn({
width: 800,
height: 500,
display: 'double',
acceleration: true,
duration: 1000,
when: {
turned: function(e, page) {
// Update page indicator
$('#page-indicator').text('Page ' + page + ' of ' + magazine.turn('pages'));
// Enable/disable buttons
$('#prev-page').prop('disabled', page === 1);
$('#next-page').prop('disabled', page === magazine.turn('pages'));
}
}
});
// Navigation controls
$('#prev-page').click(function() {
magazine.turn('previous');
});
$('#next-page').click(function() {
magazine.turn('next');
});
// Keyboard navigation
$(document).keydown(function(e) {
if (e.keyCode == 37) magazine.turn('previous');
else if (e.keyCode == 39) magazine.turn('next');
});
// Initial button states
$('#prev-page').prop('disabled', true);
if (<?php echo count($images); ?> <= 2) {
$('#next-page').prop('disabled', true);
}
<?php endif; ?>
});
</script>
</body>
</html>
........