当前位置：首页 > jquery

jquery 相册

2026-04-08 04:42:59jquery

jQuery 相册实现方法

jQuery 相册可以通过多种方式实现，包括使用现有的插件或自定义开发。以下是几种常见的方法：

使用现有插件（如 Lightbox2）

Lightbox2 是一个流行的 jQuery 相册插件，支持图片放大、滑动浏览和相册功能。

jquery 相册

<!-- 引入 jQuery 和 Lightbox2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<!-- 相册图片 -->
<a href="image1.jpg" data-lightbox="roadtrip" data-title="Image 1">
  <img src="thumbnail1.jpg" alt="Image 1">
</a>
<a href="image2.jpg" data-lightbox="roadtrip" data-title="Image 2">
  <img src="thumbnail2.jpg" alt="Image 2">
</a>

自定义相册功能

如果需要更灵活的相册功能，可以自定义开发。以下是一个简单的 jQuery 相册实现：

jquery 相册

<div class="gallery">
  <img src="thumbnail1.jpg" data-full="image1.jpg" alt="Image 1">
  <img src="thumbnail2.jpg" data-full="image2.jpg" alt="Image 2">
</div>
<div class="lightbox">
  <span class="close">&times;</span>
  <img class="lightbox-img">
  <div class="caption"></div>
</div>

<style>
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}
.lightbox-img {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}
</style>

<script>
$(document).ready(function() {
  $('.gallery img').click(function() {
    var fullImg = $(this).data('full');
    $('.lightbox-img').attr('src', fullImg);
    $('.lightbox').fadeIn();
  });

  $('.close').click(function() {
    $('.lightbox').fadeOut();
  });
});
</script>

响应式相册布局

对于响应式相册，可以结合 CSS Grid 或 Flexbox：

<div class="responsive-gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>

<style>
.responsive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
}
.gallery-item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.gallery-item img:hover {
  transform: scale(1.05);
}
</style>

高级功能实现

如果需要添加幻灯片功能，可以使用 jQuery 动画：

var currentIndex = 0;
var images = $('.gallery img');
var totalImages = images.length;

function showImage(index) {
  images.hide();
  $(images[index]).show();
}

$('.next').click(function() {
  currentIndex = (currentIndex + 1) % totalImages;
  showImage(currentIndex);
});

$('.prev').click(function() {
  currentIndex = (currentIndex - 1 + totalImages) % totalImages;
  showImage(currentIndex);
});

这些方法提供了从简单到复杂的 jQuery 相册实现方案，可以根据项目需求选择合适的方案。