یک گالری تصاویر CSS مجموعه‌ای از تصاویر است که با استفاده از CSS نمایش داده می‌شود. CSS می‌تواند برای کنترل طرح‌بندی تصاویر، اندازه آنها، فضای میانی و سایر ویژگی‌های بصری استفاده شود.
گالری تصاویر CSS به طور معمول بر روی وب‌سایت‌ها برای نمایش محصولات، نمونه‌کارها یا سایر محتواهای بصری به شیوه‌ای جذاب استفاده می‌شود.
برای ایجاد یک گالری تصاویر ساده، می‌توانید این مراحل را دنبال کنید:
-
از یک عنصر ظرف HTML استفاده کنید، مانند
<div>. -
تصاویر را به عنصر ظرف اضافه کنید. می‌توانید از تگ
<img>برای نمایش تصاویر استفاده کنید. -
هر تصویر باید درون یک تگ
<a>قرار گیرد تا قابلیت کلیک شدن را داشته باشند. -
ویژگی
display: flexرا به عنصر ظرف div اضافه کنید. -
ویژگی
flex-flow: row wrapرا برای تنظیم جهت ظرف flex به روی row اضافه کنید.
Simple Image Gallery
این قسمت یک نمونه از طرح یک گالری تصاویر ساده را نشان می‌دهد که به صورت یک ردیف نمایش داده می‌شود.
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery img {
width: 25%;
height: 250px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html>در این کد، ما یک عنصر div با کلاس .image-gallery داریم که حاوی تصاویر است. با استفاده از ویژگی display: flex، این تصاویر در یک ردیف قرار می‌گیرند. ویژگی flex-flow: row wrap تنظیم می‌کند که موارد در یک ردیف نمایش داده شوند و در صورتی که فضا کافی نباشد، به خط بعدی بروند. ویژگی justify-content: space-between فضای خالی بین تصاویر را به صورت یکسان تقسیم می‌کند. و در نهایت، تصاویر با ویژگی‌های width: 25% و height: 250px اندازه داده شده‌اند تا در هر ردیف چهار تصویر قرار بگیرد و ارتفاع آنها ثابت باشد.
Image Gallery With a Hover Effect
در این بخش، یک نمونه از گالری تصاویر با افکت هاور ارائه شده است. وقتی کاربر روی یک تصویر موس کند، آن تصویر بزرگتر می‌شود و یک حاشیه قرمز به آن اضافه می‌شود.
<html>
<head>
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
</style>
</head>
<body>
<h3>Hover over the images to see the effect</h3>
<div class="image-gallery">
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html>در این کد، ما از ویژگی transform: scale(1.1) برای بزرگتر شدن تصاویر و border: 3px solid red برای اضافه کردن حاشیه قرمز در حالت هوور استفاده کرده‌ایم. همچنین، با استفاده از ویژگی transition: transform 0.2s افکت انتقالی برای تغییر اندازه تصاویر اعمال شده است.
Responsive Image Gallery Using Media Query
در این بخش، یک نمونه از گالری تصاویر واکنش‌گرا با استفاده از رزولوشن رسانه CSS برای ایجاد تجربه نمایش بهینه بر روی دستگاه‌ها و اندازه‌های صفحه مختلف ارائه شده است. در صفحات با اندازه کوچکتر، تصاویر بزرگتر و با فاصله بیشتری نمایش داده می‌شوند.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.image-gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.image-gallery .image-item {
width: 30%;
text-align: center;
}
.image-gallery img {
width: 100%;
height: 220px;
transition: transform 0.2s;
}
.image-gallery .image-item:hover {
transform: scale(1.1);
border: 3px solid red;
}
.image-description {
margin-top: 10px;
}
@media only screen and (max-width: 800px) {
.image-gallery .image-item {
width: 40%;
margin: 20px;
}
}
@media only screen and (max-width: 300px) {
.image-gallery .image-item {
width: 100%;
margin: 20px;
}
}
</style>
</head>
<body>
<h3>Resize the browser window to see the effect.</h3>
<div class="image-gallery">
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
<div class="image-item">
<img src="images/red-flower.jpg" alt="Red Flower">
<div class="image-description">Red Flower</div>
</div>
<div class="image-item">
<img src="images/see.jpg" alt="White Flower">
<div class="image-description">See</div>
</div>
<div class="image-item">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<div class="image-description">Orange Flower</div>
</div>
</div>
</body>
</html>در این کد، ما از رزولوشن رسانه CSS برای تغییر اندازه تصاویر و فاصله‌بندی آنها بر اساس عرض صفحه استفاده کرده‌ایم. به طور مشخص، وقتی عرض صفحه بیشتر از 800 پیکسل باشد، عرض تصاویر به 40% تغییر می‌کند و مارجین 20 پیکسلی به آن اضافه می‌شود. همچنین، وقتی عرض صفحه کمتر از 300 پیکسل باشد، عرض تصاویر به 100% تغییر می‌کند.
CSS Image Gallery With Horizontal Scroll
در این بخش، یک نمونه از گالری تصاویر با چیدمان افقی قابل اسکرول با استفاده از ویژگی overflow نشان داده شده است. در این گالری، تصاویر به صورت افقی قابل اسکرول هستند.
<html>
<head>
<style>
.image-gallery {
overflow: auto;
white-space: nowrap;
padding: 5px;
background-color: #78e756;
}
.image-gallery img {
width: 25%;
height: 250px;
margin: 10px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html>در این کد، ما از ویژگی overflow: auto برای فعال کردن اسکرول افقی استفاده کرده‌ایم. همچنین، با استفاده از white-space: nowrap، مطمئن شویم که تصاویر در یک خط قرار گرفته و به خط بعدی نمی‌روند.
CSS Image Gallery With Vertical Scroll
در این بخش، یک نمونه از گالری تصاویر با چیدمان عمودی قابل اسکرول با استفاده از ویژگی overflow نشان داده شده است. در این گالری، تصاویر به صورت عمودی قابل اسکرول هستند.
<html>
<head>
<style>
.image-gallery {
overflow: auto;
padding: 5px;
background-color: #78e756;
}
.image-gallery img {
width: 30%;
height: 250px;
margin: 10px;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
<img src="images/red-flower.jpg" alt="Red Flower">
<img src="images/white-flower.jpg" alt="White Flower">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
</body>
</html>در این کد، ما از ویژگی overflow: auto برای فعال کردن اسکرول عمودی استفاده کرده‌ایم. این ویژگی اجازه می‌دهد تا اگر تعداد تصاویر بیشتر از فضای موجود درون دیو می‌شود، یک نوار اسکرول عمودی نمایش داده شود تا کاربر بتواند به سادگی از تصاویر به طرف بالا یا پایین صفحه حرکت کند.
CSS Grid Image Gallery
این بخش یک نمونه از گالری تصاویر با استفاده از Grid CSS نشان می‌دهد که سه نمای مختلف دارد: سه تصویر، دو تصویر یا عرض کامل.
وقتی روی یکی از دکمه‌ها کلیک می‌کنید، گالری به چیدمان متناظر تغییر می‌کند.
<html>
<head>
<style>
.image-gallery {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.image-container {
width: 30%;
height: 250px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.image-container img {
width: 100%;
height: 100%;
margin: 10px;
}
.two-columns .image-container {
width: 45%;
margin: 10px;
}
.full-width .image-container {
width: 100%;
margin: 20px;
}
.button-container {
text-align: center;
}
.button-container button {
background-color: #7dfa2a;
border: none;
padding: 10px 20px;
margin: 15px;
}
</style>
</head>
<body>
<div class="button-container">
<button onclick="showFourImages()">Three Images</button>
<button onclick="showTwoImages()">Two Images</button>
<button onclick="showFullWidth()">Full Width</button>
</div>
<div class="image-gallery">
<div class="image-container">
<img src="images/red-flower.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="images/white-flower.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
<div class="image-container">
<img src="images/red-flower.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="images/white-flower.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="images/orange-flower.jpg" alt="Orange Flower">
</div>
</div>
<script>
function showFourImages() {
document.querySelector(".image-gallery").className = "image-gallery";
}
function showTwoImages() {
document.querySelector(".image-gallery").className = "image-gallery two-columns";
}
function showFullWidth() {
document.querySelector(".image-gallery").className = "image-gallery full-width";
}
</script>
</body>
</html>در این کد، ما از CSS Grid برای چیدمان گالری استفاده کرده‌ایم. دکمه‌هایی نیز برای تغییر نمایش گالری به تعداد مورد نظر اضافه شده‌اند. هر دکمه باعث اضافه کردن یک کلاس به عنصر گالری می‌شود که موجب تغییر چیدمان آن می‌شود.
CSS Tabbed Image Gallery
در این بخش، یک مثال از گالری تصاویر با زبانه‌های کلیکی CSS نشان داده شده است. وقتی روی یک تصویر کوچک کلیک می‌کنید، یک نسخه بزرگتر از همان تصویر باز می‌شود.
<html>
<head>
<style>
.image-gallery {
display: flex;
justify-content: space-between;
float: center;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
height: 250px;
left: 0;
top: 0;
}
.image-container img {
width: 200px;
height: 150px;
cursor: pointer;
}
.gallery-tab {
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tab-content {
margin: auto;
display: block;
width: 80%;
height: 80%;
}
.tab-content img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-gallery">
<div class="image-container" onclick="opentab('red')">
<img src="images/red-flower.jpg" alt="Red Flower" id="red">
</div>
<div class="image-container" onclick="opentab('white')">
<img src="images/white-flower.jpg" alt="White Flower" id="white">
</div>
<div class="image-container" onclick="opentab('orange')">
<img src="images/orange-flower.jpg" alt="Orange Flower" id="orange">
</div>
</div>
<div id="tab" class="gallery-tab">
<img class="tab-content" id="tabImg">
</div>
<script>
function opentab(imageId) {
var tab = document.getElementById("tab");
var tabImg = document.getElementById("tabImg");
tab.style.display = "block";
tabImg.src = document.getElementById(imageId).src;
}
</script>
</body>
</html>در این کد، هر div با کلاس .image-container یک تصویر را نمایش می‌دهد. وقتی روی هر تصویر کلیک می‌کنید، تابع opentab فراخوانی می‌شود و تصویر مربوطه به زبانه با کلاس .tab-content انتقال داده می‌شود و در نتیجه آن زبانه با کلاس .gallery-tab نمایش داده می‌شود.
CSS slideshow
این کد یک اسلایدشو ساده با تصاویر و دکمه‌های ناوبری و نقطه‌ها برای نمایش اسلاید فعلی را نشان می‌دهد.
slideshow-container: یک کانتینر برای نگهداری اسلایدها است. این کانتینر overflow را مخفی می‌کند تا هر تصویر که خارج از محیط ظاهر نشود.image-gallery: یک فضای نمایش برای تصاویر است که از flexbox برای چینش افقی آنها استفاده می‌کند..image-container: هر تصویر را در یک محیط مشخص می‌کند. این محیط تصویرها را در داخل کانتینر مربوطه قرار می‌دهد..prev-imgو.next-img: دکمه‌های قبلی و بعدی هستند که کاربر را قادر می‌سازند بین تصاویر حرکت کند..dot-container: محلی است که نقطه‌هایی برای هر تصویر در اسلایدشو نشان داده می‌شود..custom-dot: هر نقطه معرفی شده به عنوان یک مؤشر برای یک تصویر خاص است.index: یک متغیر برای نگهداری ایندکس تصویر فعلی است.
سه تابع (slides(), activeSlides(), displaySlides()) برای کنترل و نمایش تصاویر و نقاط اسلایدشو وجود دارد. این توابع با کلیک کردن بر دکمه‌ها و نقاط فعال می‌شوند و تصاویر را به صورت متناسب نمایش می‌دهند.
<html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
overflow: hidden;
}
.image-gallery {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-container {
width: 100%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
}
.prev-img, .next-img {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
}
.next-img {
right: 0;
}
.prev-img:hover, .next-img:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dot-container {
text-align: center;
margin-top: 20px;
}
.custom-dot {
height: 10px;
width: 10px;
margin: 0 5px;
background-color: #e98a8a;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.active-dot {
background-color: #706868;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="image-gallery">
<div class="image-container">
<img src="images/scenery.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="images/scenery3.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="images/scenery4.jpg" alt="Orange Flower">
</div>
</div>
<a class="prev-img" onclick="slides(-1)">❮</a>
<a class="next-img" onclick="slides(1)">❯</a>
</div>
<div class="dot-container">
<span class="custom-dot" onclick="activeSlides(1)"></span>
<span class="custom-dot" onclick="activeSlides(2)"></span>
<span class="custom-dot" onclick="activeSlides(3)"></span>
</div>
<script>
var index = 1;
displaySlides(index);
function slides(n) {
displaySlides(index += n);
}
function activeSlides(n) {
displaySlides(index = n);
}
function displaySlides(n) {
var i;
var allSlides = document.getElementsByClassName("image-container");
var allDots = document.getElementsByClassName("custom-dot");
if (n > allSlides.length) {
index = 1;
}
if (n < 1) {
index = allSlides.length;
}
for (i = 0; i < allSlides.length; i++) {
allSlides[i].style.display = "none";
}
for (i = 0; i < allDots.length; i++) {
allDots[i].className = allDots[i].className.replace(" active-dot", "");
}
allSlides[index - 1].style.display = "block";
allDots[index - 1].className += "active-dot";
}
</script>
</body>
</html>CSS Slideshow Gallery
این کد یک گالری اسلایدشو ساده را نشان می‌دهد. این گالری شامل تعدادی تصویر است و تنها یک تصویر در هر زمان نمایش داده می‌شود.
کاربران می‌توانند بر روی پیکان‌های چپ و راست کلیک کرده و از تصاویر عبور کنند.
در اینجا یک توضیح از بخش‌های مهم این کد آمده است:
slideshow-container: یک کانتینر برای نگهداری اسلایدها است. این کانتینر overflow را مخفی می‌کند تا هر تصویر که خارج از محیط ظاهر نشود.image-gallery: یک فضای نمایش برای تصاویر است که از flexbox برای چینش افقی آنها استفاده می‌کند..image-container: هر تصویر را در یک محیط مشخص می‌کند. این محیط تصویرها را در داخل کانتینر مربوطه قرار می‌دهد..prev-imgو.next-img: دکمه‌های قبلی و بعدی هستند که کاربر را قادر می‌سازند بین تصاویر حرکت کند..bottom-img-container: محلی است که تصاویر کوچکی از تصاویر اصلی نشان داده می‌شود..bottom-img: هر تصویر کوچک معرفی شده به عنوان یک مؤشر برای یک تصویر خاص است.index: یک متغیر برای نگهداری ایندکس تصویر فعلی است.
سه تابع (slides(), activeSlides(), displaySlides()) برای کنترل و نمایش تصاویر و نقاط اسلایدشو وجود دارد. این توابع با کلیک کردن بر دکمه‌ها و تصاویر کوچک، تصاویر را به صورت متناسب نمایش می‌دهند.
<html>
<head>
<style>
.slideshow-container {
position: relative;
width: 100%;
overflow: hidden;
}
.image-gallery {
display: flex;
transition: transform 0.5s ease-in-out;
}
.image-container {
width: 100%;
height: 100%;
}
.image-container img {
width: 100%;
height: 100%;
}
.prev-img, .next-img {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
}
.next-img {
right: 0;
}
.prev-img:hover, .next-img:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.bottom-img-container {
text-align: center;
margin-top: 20px;
}
.bottom-img {
height: 80px;
width: 80px;
margin: 0 10px;
cursor: pointer;
opacity: 0.5;
}
.bottom-img.current-bottom-img {
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="image-gallery">
<div class="image-container">
<img src="images/scenery.jpg" alt="Red Flower">
</div>
<div class="image-container">
<img src="images/scenery3.jpg" alt="White Flower">
</div>
<div class="image-container">
<img src="images/scenery4.jpg" alt="Orange Flower">
</div>
</div>
<a class="prev-img" onclick="slides(-1)">❮</a>
<a class="next-img" onclick="slides(1)">❯</a>
</div>
<div class="bottom-img-container">
<img class="bottom-img current-bottom-img" src="images/scenery.jpg" onclick="activeSlides(1)">
<img class="bottom-img" src="images/scenery3.jpg" onclick="activeSlides(2)">
<img class="bottom-img" src="images/scenery4.jpg" onclick="activeSlides(3)">
</div>
<script>
var index = 1;
displaySlides(index);
function slides(n) {
displaySlides(index += n);
}
function activeSlides(n) {
displaySlides(index = n);
}
function displaySlides(n) {
var i;
var allSlides = document.getElementsByClassName("image-container");
var allThumbnails = document.getElementsByClassName("bottom-img");
if (n > allSlides.length) {
index = 1;
}
if (n < 1) {
index = allSlides.length;
}
for (i = 0; i < allSlides.length; i++) {
allSlides[i].style.display = "none";
}
for (i = 0; i < allThumbnails.length; i++) {
allThumbnails[i].className = allThumbnails[i].className.replace(" current-bottom-img", "");
allThumbnails[i].style.filter = "brightness(50%)";
}
allSlides[index - 1].style.display = "block";
allThumbnails[index - 1].className += " current-bottom-img";
allThumbnails[index - 1].style.filter = "brightness(100%)";
}
</script>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام