ওয়েব উন্নয়ন ❁ তথ্য প্রযুক্তি ❁ প্রশিক্ষণ

ইমেজ গ্যালারী লাইটবক্স কিভাবে করবেন?

লাইটবক্স সাধারণত ছোট ছবিকে বড় করে দেখার জন্য তৈরী করা হয়। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর সমন্নয়ে লাইটবক্স তৈরী করা হয়। আমি এখানে জাভাস্ক্রিপ্ট এর ফ্রেরওয়ার্ক জেকিউরী ব্যবহার করেছি। এটাকে অনুস্বরণ করে আপনি আপনার মনের মত করে যেমন ইচ্ছে ডিজাইন করতে পারেন। বিস্তারিত ভিডিও টিউটোরিয়াল'টি দেখুন। ওখানে একটি একটি করে সব ক্লিয়ার ভাবে বুঝানো হয়েছে।

বিস্তারিত ভিডিও সহ দেখুন

কোড উদাহরণ


<!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...

ঐতিহাসিক কালার থিওরি

Historical Color Theory বিস্তারিত দেখুন

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

html-icons বিস্তারিত দেখুন

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

web-fonts বিস্তারিত দেখুন

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

css-animation বিস্তারিত দেখুন

হরেক রকম মেনু

menu বিস্তারিত দেখুন

রকমারি বাটন

CSS Buttons বিস্তারিত দেখুন
নীড় পাতা