ইমেজ গ্যালারী লাইটবক্স কিভাবে করবেন?
লাইটবক্স সাধারণত ছোট ছবিকে বড় করে দেখার জন্য তৈরী করা হয়। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সমন্নয়ে লাইটবক্স তৈরী করা হয়। আমি এখানে জাভাস্ক্রিপ্ট এর ফ্রেরওয়ার্ক জেকিউরী ব্যবহার করেছি। এটাকে অনুস্বরণ করে আপনি আপনার মনের মত করে যেমন ইচ্ছে ডিজাইন করতে পারেন। বিস্তারিত ভিডিও টিউটোরিয়াল'টি দেখুন। ওখানে একটি একটি করে সব ক্লিয়ার ভাবে বুঝানো হয়েছে।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lightbox.css">
</head>
<body>
<h2 style="text-align:center">Lightbox Example</h2>
<div class="top-gallary">
<div class="gallary-image">
<img src="images/bandarban.jpg" onclick="openLightbox();currentSlide(1)">
</div>
<div class="gallary-image">
<img src="images/sundarban.jpg" onclick="openLightbox();currentSlide(2)">
</div>
<div class="gallary-image">
<img src="images/chittagong.jpg" onclick="openLightbox();currentSlide(3)">
</div>
<div class="gallary-image">
<img src="images/cox-bazar.jpg" onclick="openLightbox();currentSlide(4)">
</div>
<div class="gallary-image">
<img src="images/botanical-garden.jpg" onclick="openLightbox();currentSlide(5)">
</div>
</div>
<div class="lightbox" id="my-lightbox">
<span class="close" onclick="closeLightbox()">✕</span>
<div class="slider-container">
<div class="slider">
<div class="place-name">নীলাচল - বান্দরবন</div>
<img src="images/bandarban.jpg">
</div>
<div class="slider">
<div class="place-name">সুন্দরবন - খুলনা </div>
<img src="images/sundarban.jpg">
</div>
<div class="slider">
<div class="place-name">ফয়েজ লেক - চট্টগ্রাম</div>
<img src="images/chittagong.jpg">
</div>
<div class="slider">
<div class="place-name">সি বিচ - কক্সবাজার</div>
<img src="images/cox-bazar.jpg">
</div>
<div class="slider">
<div class="place-name">বুটানিকাল গার্ডেন - ঢাকা</div>
<img src="images/botanical-garden.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">«</a>
<a class="next" onclick="plusSlides(1)">»</a>
<div class="bottom-gallary">
<div class="gallary-image">
<img class="current" src="images/bandarban.jpg" onclick="currentSlide(1)">
</div>
<div class="gallary-image">
<img class="current" src="images/sundarban.jpg" onclick="currentSlide(2)">
</div>
<div class="gallary-image">
<img class="current" src="images/chittagong.jpg" onclick="currentSlide(3)">
</div>
<div class="gallary-image">
<img class="current" src="images/cox-bazar.jpg" onclick="currentSlide(4)">
</div>
<div class="gallary-image">
<img class="current" src="images/botanical-garden.jpg" onclick="currentSlide(5)">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="lightbox.js"></script>
</body>
</html>
ভিডিও দেখুন নিজে করুন
ডেমুতে ব্যবহ্নত সিএসএস ফাইল
* {
margin: 0;
padding: 0;
}
.slider-container {
height: auto;
width: 90%;
margin: auto;
position: relative;
}
.slider {
position: relative;
padding: 0px;
margin: 0px;
border: 3px double #ccc;
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.7);
}
.img {
position: relative;
width: 100%;
}
.slider img {
width: 100%;
height: 100%;
position: relative;
}
#prev {
position: absolute;
color: white;
font-size: 22px;
top: 43%;
left: 0px;
z-index: 99;
background: green;
padding: 2px 5px;
cursor: pointer;
border: 1px solid #fff;
border-left: none;
}
#next {
position: absolute;
color: white;
font-size: 22px;
top: 43%;
right: 0px;
z-index: 99;
background: green;
padding: 2px 5px;
cursor: pointer;
border: 1px solid #fff;
border-right: none;
}
#next:hover,
#prev:hover {
color: red;
}
.place-name {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 22px;
padding: 7px 0;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
z-index: 999;
display: block;
}
ডেমুতে ব্যবহ্নত জাভাস্ক্রিপ্ট ফাইল
function openLightbox() {
document.getElementById("my-lightbox").style.display = "block";
}
function closeLightbox() {
document.getElementById("my-lightbox").style.display = "none";
}
var slideImage = 1;
showSlides(slideImage);
function plusSlides(x) {
showSlides(slideImage += x);
}
function currentSlide(x) {
showSlides(slideImage = x);
}
function showSlides(x) {
var i;
var slider = document.getElementsByClassName("slider");
var currentSlides = document.getElementsByClassName("current");
if (x > slider.length) {
slideImage = 1
}
if (x < 1) {
slideImage = slider.length
}
for (i = 0; i < slider.length; i++) {
slider[i].style.display = "none";
}
for (i = 0; i < currentSlides.length; i++) {
currentSlides[i].className = currentSlides[i].className.replace(" active", "");
}
slider[slideImage - 1].style.display = "block";
currentSlides[slideImage - 1].className += " active";
}
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি

এইচটিএমএল আইকন

ওয়েবের যত ফন্টস

সিএসএস এনিমেশন

হরেক রকম মেনু

রকমারি বাটন
