| Server IP : 122.155.177.87 / Your IP : 122.155.177.87 Web Server : Apache/2 System : Linux cat177-87.static.lnwhostname.com 3.10.0-1160.62.1.el7.x86_64 #1 SMP Tue Apr 5 16:57:59 UTC 2022 x86_64 User : apache ( 994) PHP Version : 5.3.29 Disable Function : dl,eval,exec,mail,passthru,popen,posix_getpwuid,posix_kill,posix_mkfifo,posix_setegid,posix_seteuid,posix_setgid,posix_setpgid,posix_setsid,posix_setuid,posix_uname,proc_close,proc_open,putenv,shell_exec,show_source,system MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/moungngam/domains/moungngam.go.th/public_html/albums/ |
Upload File : |
<?
Header("Content-Type: text/html; charset=UTF-8");
include("../include/config.php");
include("../include/function.php");
include("../include/config_db.php");
$sql = "select * from `activity_album` where 1 order by `order_item` Desc ,`date_publish` Desc limit 1 ";
$result = mysql_query($sql) or die("Can't send query !A");
$c_alb_id = 0;
$c_alb_title = "";
$num_rows = mysql_num_rows($result);
if($num_rows > 0){
$c_alb_id = mysql_result($result, 0, "id");
$c_alb_title = mysql_result($result, 0, "alb_title");
}
mysql_free_result($result);
unset($result);
$slides = array(); // เก็บรายการรูปสำหรับ slideshow
if($num_rows > 0)
{
$sql = "select * From `activity_album_detail` where (`alb_id`='$c_alb_id') ";
$sql .= "Order by `id` Asc ";
$result = mysql_query($sql) or die("Can't send query !B");
While($row = mysql_fetch_assoc($result))
{
$c_ald_photopath = htmlspecialchars($row["ald_photopath"]);
if($c_ald_photopath != "")
{
$slides[] = $_web_path."/photoThumbnail/albums/a".$c_alb_id."_a/".$c_ald_photopath;
}
}
mysql_free_result($result);
unset($result);
}
include("../include/close_db.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ box-sizing:border-box; }
body{ font-family:"Tahoma","Segoe UI",sans-serif; margin:0; }
.page-wrap{
max-width:760px;
margin:0 auto;
padding:24px 16px 36px 16px;
}
/* ===== Page Header ===== */
.act-header{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-bottom:22px;
flex-wrap:wrap;
}
.act-header .mascot{ width:58px; height:58px; flex-shrink:0; }
.act-header h1{
margin:0;
font-size:23px;
font-weight:800;
text-align:center;
background:linear-gradient(90deg,#2d7fb8,#3fae6a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
/* ===== Card frame ===== */
.act-card-frame{
background:#fff;
border-radius:16px;
padding:22px 22px 24px 22px;
box-shadow:0 6px 22px rgba(30,60,100,0.12);
border:1px solid #eef1f6;
}
.alb-title{
font-size:19px;
font-weight:800;
line-height:1.55;
color:#4a2fb0;
margin:0 0 16px 0;
}
/* ===== Slide frame ===== */
.slide-frame{
position:relative;
width:100%;
height:420px;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,0.16);
background:#111;
}
.slide-track{
display:flex;
width:100%;
height:100%;
transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.slide-item{ flex:0 0 100%; height:100%; position:relative; }
.slide-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-caption{
position:absolute;
left:0; right:0; bottom:0;
padding:56px 70px 20px 70px;
background:linear-gradient(to top, rgba(21,94,46,0.92) 0%, rgba(21,94,46,0.55) 55%, rgba(21,94,46,0) 100%);
color:#fff;
font-size:14.5px;
font-weight:700;
line-height:1.6;
text-align:center;
}
/* ปุ่มเลื่อนแบบแท่งแคปซูลสีขาว ตามภาพตัวอย่าง */
.slide-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:20px;
height:78px;
border-radius:999px;
background:rgba(255,255,255,0.92);
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,0.25);
transition:background .2s ease, transform .2s ease;
z-index:5;
}
.slide-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.05); }
.slide-arrow.prev{ left:14px; }
.slide-arrow.next{ right:14px; }
.slide-arrow svg{ width:12px; height:12px; fill:#2c3648; }
.slide-dots{
display:flex;
justify-content:center;
gap:7px;
margin-top:14px;
}
.slide-dots span{
width:8px;
height:8px;
border-radius:50%;
background:#cfd8e3;
cursor:pointer;
transition:background .2s ease, transform .2s ease;
}
.slide-dots span.active{ background:#2f9e5c; transform:scale(1.25); }
.slide-empty{
text-align:center;
padding:50px 10px;
color:#888;
font-size:14px;
}
@media (max-width:640px){
.slide-frame{ height:260px; }
.slide-caption{ padding:36px 44px 14px 44px; font-size:12.5px; }
.alb-title{ font-size:16px; }
.act-header h1{ font-size:19px; }
.act-header .mascot{ width:46px; height:46px; }
.slide-arrow{ height:60px; width:16px; }
}
</style>
</head>
<body>
<div class="page-wrap">
<div class="act-card-frame">
<?
if(count($slides) > 0)
{
if($c_alb_title != ""){
echo " <p class=\"alb-title\">".$c_alb_title."</p>\n";
}
echo " <div class=\"slide-frame\" id=\"slideFrame\">\n";
echo " <div class=\"slide-track\" id=\"slideTrack\">\n";
foreach($slides as $img){
echo " <div class=\"slide-item\"><img src=\"".$img."\" alt=\"".$c_alb_title."\"></div>\n";
}
echo " </div>\n";
echo " <div class=\"slide-caption\">".$c_alb_title."</div>\n";
if(count($slides) > 1){
echo " <button class=\"slide-arrow prev\" onclick=\"actSlideMove(-1)\" aria-label=\"prev\">\n";
echo " <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6v12z\"/></svg>\n";
echo " </button>\n";
echo " <button class=\"slide-arrow next\" onclick=\"actSlideMove(1)\" aria-label=\"next\">\n";
echo " <svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6V6z\"/></svg>\n";
echo " </button>\n";
}
echo " </div>\n"; // slide-frame
if(count($slides) > 1){
echo " <div class=\"slide-dots\" id=\"slideDots\">\n";
for($i=0; $i<count($slides); $i++){
$cls = ($i==0) ? "active" : "";
echo " <span class=\"".$cls."\" onclick=\"actSlideGo(".$i.")\"></span>\n";
}
echo " </div>\n";
}
}
else
{
echo " <div class=\"slide-empty\"><b>..ยังไม่มีอัลบั้มภาพ..</b></div>\n";
}
?>
</div>
</div>
<?
if(count($slides) > 1){
?>
<script>
(function(){
var track = document.getElementById('slideTrack');
var dots = document.querySelectorAll('#slideDots span');
var total = <?=count($slides);?>;
var current = 0;
var timer = null;
var delay = 4000;
function render(){
track.style.transform = 'translateX(' + (-current * 100) + '%)';
dots.forEach(function(d, i){ d.classList.toggle('active', i === current); });
}
window.actSlideGo = function(i){ current = (i + total) % total; render(); restart(); };
window.actSlideMove = function(dir){ current = (current + dir + total) % total; render(); restart(); };
function auto(){ current = (current + 1) % total; render(); }
function start(){ timer = setInterval(auto, delay); }
function stop(){ if(timer){ clearInterval(timer); timer = null; } }
function restart(){ stop(); start(); }
var frame = document.getElementById('slideFrame');
frame.addEventListener('mouseenter', stop);
frame.addEventListener('mouseleave', start);
var startX = null;
frame.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; }, {passive:true});
frame.addEventListener('touchend', function(e){
if(startX === null) return;
var diff = e.changedTouches[0].clientX - startX;
if(diff > 40){ actSlideMove(-1); }
else if(diff < -40){ actSlideMove(1); }
startX = null;
});
render();
start();
})();
</script>
<?
}
?>
</body>
</html>