Thứ Năm, 20 tháng 8, 2026

360° Virtual Tour

Để làm hình ảnh panorama 360 độ và tích hợp trình xem tương tác (360° Virtual Tour) giống trong ảnh lên website, bạn cần thực hiện theo 2 bước chính dưới đây.

Bước 1: Chụp và chuẩn bị ảnh 360 độ (Equirectangular)

Chụp bằng điện thoại/máy ảnh: Sử dụng ứng dụng chụp Panorama 360 (Google Street View, Polycam, Google Camera) hoặc chụp từ flycam/máy ảnh panorama chuyên dụng (Insta360, Ricoh Theta).
Định dạng ảnh: Xuất ảnh dưới dạng panorama toàn cảnh góc nhìn 360° × 180° (thường có tỉ lệ 2:1, định dạng .jpg hoặc .png).

Bước 2: Nhúng tính năng tương tác 360° vào Website

Bạn có thể chọn 1 trong 2 cách triển khai tùy thuộc vào nền tảng website của bạn:

Cách 1: Sử dụng thư viện JavaScript (Dành cho mã nguồn tự viết / HTML-JS) Dùng thư viện mã nguồn mở Pannellum (miễn phí, siêu nhẹ và phổ biến nhất).

Thêm thư viện vào tệp HTML của bạn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

Tạo thẻ div chứa khung nhìn và thêm đoạn script cấu hình:

<div id="panorama" style="width: 100%; height: 400px;"></div>

<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "duong-dan-den-anh-360.jpg",
    "autoLoad": true,
    "autoRotate": -2
});
</script>

Cách 2: Sử dụng Plugin hoặc Nền tảng có sẵn (Không cần viết code)

Website WordPress: Cài đặt các plugin như WP VR - 360 Panorama Tour hoặc iPanorama 360. Bạn chỉ cần tải ảnh 360 lên, plugin sẽ tự tạo trình xem tương tác và cung cấp Shortcode để chèn vào bất kỳ đâu trên trang.
Nền tảng nhúng đám mây: Tải ảnh lên các dịch vụ như Kuula.co hoặc Momento360, sau đó sao chép đoạn mã <iframe> được tạo tự động và dán vào website.

Chủ Nhật, 9 tháng 8, 2026

Fancybox - Swiper - Zoomin

- Demo : ketsathalan

<!DOCTYPE html>

<head>

<title>Product Gallery Zoom & Fancybox</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: Arial, sans-serif;

padding: 40px;

background-color: #f5f5f5;

}

.product-gallery-wrapper {

display: flex;

gap: 20px;

max-width: 1000px;

margin: 0 auto;

position: relative;

}

/* Container bên trái chứa Ảnh lớn + Thumbnails */

.gallery-left {

width: 450px;

position: relative;

}

/* Khung ảnh chính */

.main-image-container {

width: 100%;

height: 450px;

border: 1px solid #ddd;

position: relative;

overflow: hidden;

cursor: pointer;

background: #fff;

}

.main-image-container img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}

/* Khung Lens di chuyển trên ảnh chính */

.zoom-lens {

position: absolute;

width: 150px;

height: 150px;

border: 1px solid #999;

background-color: rgba(255, 255, 255, 0.4);

display: none;

pointer-events: none; /* Cho phép click xuyên qua lens */

}

/* Khung hiển thị Zoom kết quả (Bên phải) */

.zoom-result {

position: absolute;

top: 0;

left: 470px; /* Nằm ngay cạnh gallery-left */

width: 450px;

height: 450px;

border: 1px solid #ccc;

background-repeat: no-repeat;

background-color: #fff;

display: none;

z-index: 99;

box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}

/* Slider ảnh thu nhỏ (Thumbnails) */

.thumb-slider-container {

margin-top: 15px;

position: relative;

padding: 0 30px; /* Dành khoảng trống cho nút Prev/Next */

}

.swiper-slide {

border: 2px solid transparent;

border-radius: 4px;

overflow: hidden;

cursor: pointer;

height: 70px;

opacity: 0.7;

transition: all 0.2s ease;

}

.swiper-slide-thumb-active,

.swiper-slide:hover {

border-color: #d71921;

opacity: 1;

}

.swiper-slide img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* Nút di chuyển Prev / Next */

.swiper-button-next,

.swiper-button-prev {

width: 24px;

height: 24px;

color: #333;

}

.swiper-button-next::after,

.swiper-button-prev::after {

font-size: 14px;

font-weight: bold;

}

.swiper-button-prev { left: 0; }

.swiper-button-next { right: 0; }

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

// 1. Cấu hình Swiper Slider cho thumbnails (Hiển thị 5 ảnh, vượt quá 5 sẽ scroll/next)

const swiper = new Swiper('.thumbSwiper', {

slidesPerView: 5,

spaceBetween: 8,

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

});

const mainImgContainer = document.getElementById('mainImgContainer');

const mainImage = document.getElementById('mainImage');

const zoomLens = document.getElementById('zoomLens');

const zoomResult = document.getElementById('zoomResult');

const slides = document.querySelectorAll('.thumbSwiper .swiper-slide');

// Mặc định active slide đầu tiên

slides[0].classList.add('swiper-slide-thumb-active');

// Danh sách URL ảnh dùng cho Fancybox

let galleryItems = Array.from(slides).map(slide => {

return { src: slide.querySelector('img').src, type: "image" };

});

let currentActiveIndex = 0;

// 2. Chuyển đổi ảnh chính khi click vào thumbnail

slides.forEach((slide, index) => {

slide.addEventListener('click', () => {

document.querySelector('.swiper-slide-thumb-active')?.classList.remove('swiper-slide-thumb-active');

slide.classList.add('swiper-slide-thumb-active');

currentActiveIndex = index;

mainImage.src = slide.querySelector('img').src;

updateZoomBackground();

});

// 3. Xử lý hiệu ứng Zoom khi Hover chuột

function updateZoomBackground() {

zoomResult.style.backgroundImage = `url('${mainImage.src}')`;

}

updateZoomBackground();

mainImgContainer.addEventListener('mouseenter', () => {

zoomLens.style.display = 'block';

zoomResult.style.display = 'block';

// Tính toán tỷ lệ zoom dựa trên kích thước thực tế của ảnh

const cx = zoomResult.offsetWidth / zoomLens.offsetWidth;

const cy = zoomResult.offsetHeight / zoomLens.offsetHeight;

zoomResult.style.backgroundSize = `${mainImage.width * cx}px ${mainImage.height * cy}px`;

});

mainImgContainer.addEventListener('mouseleave', () => {

zoomLens.style.display = 'none';

zoomResult.style.display = 'none';

});

mainImgContainer.addEventListener('mousemove', moveLens);

function moveLens(e) {

e.preventDefault();

const rect = mainImgContainer.getBoundingClientRect();

// Lấy tọa độ chuột tương đối trong khung ảnh

let x = e.clientX - rect.left - (zoomLens.offsetWidth / 2);

let y = e.clientY - rect.top - (zoomLens.offsetHeight / 2);

// Giới hạn không cho lens ra ngoài khung ảnh

if (x > mainImgContainer.offsetWidth - zoomLens.offsetWidth) {

x = mainImgContainer.offsetWidth - zoomLens.offsetWidth;

}

if (x < 0) { x = 0; }

if (y > mainImgContainer.offsetHeight - zoomLens.offsetHeight) {

y = mainImgContainer.offsetHeight - zoomLens.offsetHeight;

}

if (y < 0) { y = 0; }

zoomLens.style.left = x + 'px';

zoomLens.style.top = y + 'px';

// Tính tỷ lệ và di chuyển background của ô zoom kết quả

const cx = zoomResult.offsetWidth / zoomLens.offsetWidth;

const cy = zoomResult.offsetHeight / zoomLens.offsetHeight;

zoomResult.style.backgroundPosition = `-${x * cx}px -${y * cy}px`;

}

// 4. Xử lý Click vào ảnh chính để mở Fancybox Lightbox

mainImgContainer.addEventListener('click', () => {

Fancybox.show(galleryItems, {

startIndex: currentActiveIndex

});

</script>

</body>

</html>

Thứ Hai, 3 tháng 8, 2026

Day - Date - Month - Year PHP

$thoigian = $value["thoigian"]; ("2026-07-31 14:41:39")

$timestamp = strtotime($thoigian);

$days = array(

'Sunday' => 'Chủ nhật',

'Monday' => 'Thứ Hai',

'Tuesday' => 'Thứ Ba',

'Wednesday' => 'Thứ Tư',

'Thursday' => 'Thứ Năm',

'Friday' => 'Thứ Sáu',

'Saturday' => 'Thứ Bảy'

);

$day = $days[date('l', $timestamp)];

'.date('d/m/Y', $timestamp).'

</span>

</div>

Thứ Ba, 28 tháng 7, 2026

Chọn vị trí để IN (print) ra nội dung của div

** HTML

</div>

** CSS

@media print{

.certificate-container{

margin:0 !important;

padding:8mm !important;

height:auto !important;

min-height:auto !important;

}

.certificate-inner-border{

padding:6mm !important;

}

p,h1,h2,h3,h4,h5,h6{

margin-top:2px !important;

margin-bottom:2px !important;

}

.no-print{

display:none!important;

}

body *{

visibility:hidden;

}

#printArea,

#printArea *{

visibility:visible;

}

#printArea{

position:absolute;

left:0;

top:0;

width:100%;

}

</style>

** JS

function printDiv(){

window.print();

}

</script>

Thứ Hai, 20 tháng 7, 2026

Nhập số tự chuyển thành "period / dot" và "comma"

** HTML
<input type='text' name='currency' id='currency' class='form-control'>

Nhập 25500 -> thành 25.500

** PHP

Code php lấy lại giá trị: 25500

$currency = str_replace('.', '', $_POST['currency']);

** JS

<script type="text/javascript">

$("#currency").on("input", function () {

// Chỉ giữ lại số

let value = $(this).val().replace(/\D/g, "");

// Format 25.500

if (value !== "") {

value = Number(value).toLocaleString("vi-VN");

}

$(this).val(value);

});

</script>

Thứ Ba, 14 tháng 7, 2026

explode - implode - uploads Images code php

##┌────────────────────────────────────────────────┐

## Implode

##└────────────────────────────────────────────────┘

function ConvertImplode($post){

if(empty($post) || !is_array($post)){

return '';

}

$post = array_map('trim', $post);

$post = array_filter($post);

return implode('**', $post);

}

$maymoc1 = ConvertImplode($_POST['maymoc1']);

$maymoc2 = ConvertImplode($_POST['maymoc2']);

$maymoc3 = ConvertImplode($_POST['maymoc3']);

$maymoc4 = ConvertImplode($_POST['maymoc4']);

##┌────────────────────────────────────────────────┐

## upload-image

##└────────────────────────────────────────────────┘

function uploadVerifiedImage($file, $path){

if (!isset($file['tmp_name']) || $file['error'] != 0) {

return '';

}

$ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));

$allow = array('jpg','jpeg','png','gif','webp');

if (!in_array($ext, $allow)) {

return '';

}

$filename = time().'_'.mt_rand(1000,9999).'.'.$ext;

if (move_uploaded_file($file['tmp_name'], $path.$filename)) {

return $filename;

}

return '';

}

$path = "uploads/verified/";

if (!is_dir($path)) {
mkdir($path, 0777, true);
}

$gate_image = uploadVerifiedImage($_FILES['gate_image'], $path);

$production_image = uploadVerifiedImage($_FILES['production_image'], $path);

$machinery_image = uploadVerifiedImage($_FILES['machinery_image'], $path);

$certificate_file = uploadVerifiedImage($_FILES['certificate_file'], $path);

$video_file = uploadVerifiedImage($_FILES['video_file'], $path);

if($gate_image != ''){

$input_data['gate_image'] = $gate_image;

}

if($production_image != ''){

$input_data['production_image'] = $production_image;

}

if($machinery_image != ''){

$input_data['machinery_image'] = $machinery_image;

}

if($certificate_file != ''){

$input_data['certificate_file'] = $certificate_file;

}

if($video_file != ''){

$input_data['video_file'] = $video_file;

}

##┌────────────────────────────────────────────────┐

## Note: RESULT

##└────────────────────────────────────────────────┘

$input_data = array(

'bangke1' => $bangke1,

'bangke2' => $bangke2,

);

$xsql = "SELECT id FROM api_Vfactory WHERE shopid=".$shopid;

$rs = $db->sql_query($xsql);

if($db->sql_numrows($rs)){

// UPDATE

$sql = "UPDATE api_Vfactory SET "

.$db->sql_build_array('UPDATE', $input_data)

." WHERE shopid=".$shopid;

}else{

// INSERT

$input_data['shopid'] = $shopid;

$input_data['created_at'] = time();

$sql = "INSERT INTO api_Vfactory "

.$db->sql_build_array('INSERT', $input_data);

}

##┌────────────────────────────────────────────────┐

## Note: explode

##└────────────────────────────────────────────────┘

function parseData($value){

return !empty($value) ? explode('**', $value) : array();

}

$data = data__Vfactory($shopid);

extract($data[0]);

$bangke1 = parseData($bangke1);

$bangke2 = parseData($bangke2);

foreach ($bangke1 as $key => $value) {

<tr>

<td>'.$value.'</td>

<td>'.$bangke2[$key].'</td>

</tr>

}

Thứ Hai, 13 tháng 7, 2026

Slide Full Màn Hình

Download: Tại đây

Code PHP && Ứng Dụng

menu ngang

Thứ Năm, 20 tháng 8, 2026

360° Virtual Tour

Chủ Nhật, 9 tháng 8, 2026

Fancybox - Swiper - Zoomin

- Demo : ketsathalan

Thứ Hai, 3 tháng 8, 2026

Day - Date - Month - Year PHP

Thứ Ba, 28 tháng 7, 2026

Chọn vị trí để IN (print) ra nội dung của div

Thứ Hai, 20 tháng 7, 2026

Nhập số tự chuyển thành "period / dot" và "comma"

Thứ Ba, 14 tháng 7, 2026

explode - implode - uploads Images code php

Thứ Hai, 13 tháng 7, 2026

Slide Full Màn Hình