কিভাবে বানাবে ওয়েবসাইট লাইটবক্স?

আসসালামু আলাইকুম,
অনেকদিন পর তোমাদের মাঝে ফিরে এলাম।
স্কুলের এসএসসি প্রি টেস্ট চলার কারনে অনেকদিন ব্লগিং লাইনে ফিরে আসতে পারি নি।
আজ এসেই নিউবাই ডেভেলপারদের একটা ট্রিক শিখিয়ে দিয়ে যাবো। অনেকে হয়তো জানে এটা।



এটাকে টিউটরিয়াল বলা ভালো।
আজকে আমরা নিজেদের কাস্টম লাইটবক্স তৈরি করা শিখবো। এখানে কোনো ফ্যান্সিবক্স ব্যাবহার করা হবে না।

আমরা এখানে এইচটিএমএল ৫, সিএসএস ৩ এবং জাভাস্ক্রিপ্ট ব্যাবহার করব।

প্রথমে আমাদের মেইন যে লাইটবক্স, সেটা তৈরি করতে হবে।

এরজন্য সিএসএস কোড,
.orthi-textlightbox-background{
background-color: rgba(30, 23, 23, 0.82);
font-family: raleway;
position: fixed;
top:0px;
bottom:0px;
right:0px;
width: 100%;
border: none;
margin:0;
padding:0;
overflow: hidden;
z-index:999999;
height: 100%;
}
.orthi-textlightbox-area {
background-color: #fff;
position: absolute;
width: 50%;
max-width: 1200px;
left: 25%;
top: 8%;
bottom: 4%;
padding: 20px 10px;
border-radius: 6px;
box-shadow: 0 0 10px 0 white;
height: 500px;
}
.orthi-textlightbox-area-close{
font-family: webdings;
font-weight: bold;
background-color:black;
color: white;
border-radius: 50%;
padding: 10px;
float: right;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
-webkit-user-select: none;
}


@keyframes fadeIn {
to {
opacity: 3;
}
}


.fade-in {
animation: fadeIn 0.4s ease-in 1 forwards;
opacity: 0;
}
এর জন্য এইচটিএমএল কোড,

<div id="changelogdata" style="display:none;">
<div class="orthi-textlightbox-background fade-in">
<div class="orthi-textlightbox-area fade-in">
<button class="orthi-textlightbox-area-close" onclick="hidechangelog()">X</i></button>
<h2 class="orthi-h2">
Digital Regional Dictionary
</h2>
<div class="appsummary">
<img width="150px" height="auto" src="appdataindex/img/1.png">
</br>
<ul>
<li>Current Verson: 2.4.0 </li>
<li>Platform: Windows/Browser</li>
<li>Developer: Tawsif Torabi & MA Kamol</li>
<li>Release: April, 2015</li>
<li>Downloads: 1224 Times (January, 2016)</li>
<li>Source: Open</li>
</ul>

1st ever the Digital Verson of the Bangladesh Regional Language Dictionary by Dr. Muhammad Shahidullah,
It's Open Source and developed using HTML5 and CSS3.
Can be ran offline mode using any modern browser. The main feature is Voice!
Means it's a talking dictionary. The Word Search feature didn' added yet.
Developers are Tawsif, Kamol and Jim from GR+

</div>
</div>
</div>
</div>
এখানে পুরো কন্টেন্ট হাইড করে রাখা হয়েছে যাতে বাটন ক্লিক করে শো করানো যায়।

এবার জাভাস্ক্রিপ্ট,
//changelog
function changelog(){
var changelog1 = document.getElementById('changelogdata');
var changelog2 = ('display: inline;');
changelog1.style= changelog2;
}
function hidechangelog(){
var changelog1 = document.getElementById('changelogdata');
var changelog2 = ('display: none;');
changelog1.style= changelog2;
}


এবার এই তিনটি কনটেন্ট একত্রে একটা এইচটিএমএল পেইজে বসাও।
অনেকটা এরকম হবে,
Demo

<head>
<title>The Simple Light Box by GR+</title>
<style>
button{
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#333;
background-color:#FA2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
font-family:'Helvetica Neue',Arial,sans-serif;
font-size:16px;
font-weight:700;
height:36px;
padding:4px 16px;
text-shadow:#FE6 0 1px 0;
}
body{
font-family: calibri;
}
.orthi-textlightbox-background{
background-color: rgba(30, 23, 23, 0.82);
font-family: raleway;
position: fixed;
top:0px;
bottom:0px;
right:0px;
width: 100%;
border: none;
margin:0;
padding:0;
overflow: hidden;
z-index:999999;
height: 100%;
}
.orthi-textlightbox-area {
background-color: #fff;
position: absolute;
width: 50%;
max-width: 1200px;
left: 25%;
top: 8%;
bottom: 4%;
padding: 20px 10px;
border-radius: 6px;
box-shadow: 0 0 10px 0 white;
height: 500px;
}
.orthi-textlightbox-area-close{
font-family: calibri;
font-weight: bold;
background-color:black;
color: white;
border-radius: 50%;
padding: 10px;
float: right;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(33, 157, 216, 0.82);
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
-webkit-user-select: none;
}






@keyframes fadeIn {
to {
opacity: 3;
}
}






.fade-in {
animation: fadeIn 0.4s ease-in 1 forwards;
opacity: 0;
}

</style>
</head>



<body>



<center>
<h1>
The Simple Light Box
</h1>
</br>
<button onclick="changelog()">Show Box</button>
</br>
</br>
</br>
<a href="http://blog.grplusbd.net/2016/08/how-to-make-a-light-box.html">Back To Tutorial at Blog</a></br></br>
<a href="http://facebook.com/tawsif.torabi">Who Developed This page?</a></br></br>
</center>









<script>
//changelog
function changelog(){
var changelog1 = document.getElementById('changelogdata');
var changelog2 = ('display: inline;');
changelog1.style= changelog2;
}
function hidechangelog(){
var changelog1 = document.getElementById('changelogdata');
var changelog2 = ('display: none;');
changelog1.style= changelog2;
}
</script>


<div id="changelogdata" style="display:none;">
<div class="orthi-textlightbox-background fade-in">
<div class="orthi-textlightbox-area fade-in">
<button class="orthi-textlightbox-area-close" onclick="hidechangelog()">X</button>
<h2 class="orthi-h2">
Digital Regional Dictionary
</h2>
<div class="appsummary">
</br>
<ul>
<li>Current Verson: 2.4.0 </li>
<li>Platform: Windows/Browser</li>
<li>Developer: Tawsif Torabi & MA Kamol</li>
<li>Release: April, 2015</li>
<li>Downloads: 1224 Times (January, 2016)</li>
<li>Source: Open</li>
</ul>



1st ever the Digital Verson of the Bangladesh Regional Language Dictionary by Dr. Muhammad Shahidullah,

It's Open Source and developed using HTML5 and CSS3.

Can be ran offline mode using any modern browser. The main feature is Voice!

Means it's a talking dictionary. The Word Search feature didn' added yet.

Developers are Tawsif, Kamol and Jim from GR+



</div>
</div>
</div>
</div>


</body>






শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট