ইমেজ গ্যালারি




ইমেজ গ্যালারি হচ্ছে ওয়েব পেজে ইমেজ প্রদর্শনের একটা বিশেষ পদ্ধতি।ফ্যাশান ডিজাইন, কমার্শিয়াল ওয়েব সাইট, ইনটেরিয়র, এক্সটরিয়ার ডিজাইন, সেলস সেন্টার, স্কুল-কলেজ, অরগানাইজেশন, ওয়েব ডেভলপমেন্ট এবং ডিজাইন ভিত্তিক ওয়েব সাইট সমূহে তাদের প্রোডাক্ট, প্রজেক্ট, ডিজাইন, বিভিন্ন ইভেন্ট, অনুষ্ঠান এর ছবি ওয়েব গ্যালারির মাধ্যমে প্রদর্শন করে থাকেন।একসাথে অনেকগুলো ছবি প্রদর্শনের মাধ্যম ও বলা যেতে পারে। সাধারণত ওয়েব গ্যালারিতে ছোট ছোট সাইজের অনেকগুরো ছবি প্রদর্শন করা হয়। একজন ব্যবহারকারী যে ছবিটা ভালভাবে দেখতে চায় সেই ছবির উপর মাউস পয়েন্টার নিয়ে গেলে তা বড় আকারে প্রদর্শন করে।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 200px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
    <img src="./images/light.png" alt="Light">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/leaf.png" alt="Leaf">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/tree.png" alt="Tree">
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
    <img src="./images/partu.png" alt="Partu">
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন