jquery 相册

jQuery 相册实现方法

使用 jQuery 创建相册可以通过多种方式实现，以下是几种常见的方法：

基础相册实现

创建一个简单的相册，点击缩略图显示大图：

<div class="gallery">
  <img src="thumb1.jpg" data-large="large1.jpg" class="thumbnail">
  <img src="thumb2.jpg" data-large="large2.jpg" class="thumbnail">
  <img src="thumb3.jpg" data-large="large3.jpg" class="thumbnail">
</div>
<div class="preview">
  <img id="largeImage" src="">
</div>

<script>
$(document).ready(function(){
  $('.thumbnail').click(function(){
    var largeSrc = $(this).attr('data-large');
    $('#largeImage').attr('src', largeSrc);
  });
});
</script>

滑动相册实现

使用 jQuery 和 CSS 创建滑动效果的相册：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

<script>
$(document).ready(function(){
  var currentIndex = 0;
  var slides = $('.slider img');

  $('.next').click(function(){
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlider();
  });

  $('.prev').click(function(){
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    updateSlider();
  });

  function updateSlider(){
    slides.removeClass('active');
    slides.eq(currentIndex).addClass('active');
  }
});
</script>

使用 jQuery 插件

对于更高级的功能，可以考虑使用现有的 jQuery 插件：

• Lightbox：简单的图片弹出查看器
• Fancybox：功能丰富的媒体查看器
• Slick：响应式轮播插件

安装和使用 Fancybox 示例：

<!-- 引入必要的文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<!-- HTML 结构 -->
<a data-fancybox="gallery" href="large1.jpg">
  <img src="thumb1.jpg">
</a>
<a data-fancybox="gallery" href="large2.jpg">
  <img src="thumb2.jpg">
</a>

<!-- 初始化 -->
<script>
$(document).ready(function(){
  $('[data-fancybox]').fancybox();
});
</script>

响应式相册设计

创建适应不同屏幕尺寸的相册：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

相册图片懒加载

实现图片懒加载以提升性能：

<img class="lazy" data-src="image1.jpg" src="placeholder.jpg">
<img class="lazy" data-src="image2.jpg" src="placeholder.jpg">

<script>
$(document).ready(function(){
  $('.lazy').lazy();
});
</script>

相册过滤功能

添加分类过滤功能：

<div class="filter-buttons">
  <button data-filter="all">All</button>
  <button data-filter="nature">Nature</button>
  <button data-filter="city">City</button>
</div>

<div class="gallery">
  <div class="item nature">
    <img src="nature1.jpg">
  </div>
  <div class="item city">
    <img src="city1.jpg">
  </div>
</div>

<script>
$(document).ready(function(){
  $('.filter-buttons button').click(function(){
    var filter = $(this).attr('data-filter');
    if(filter == 'all'){
      $('.item').show();
    } else {
      $('.item').hide();
      $('.'+filter).show();
    }
  });
});
</script>

以上方法可以根据具体需求进行组合和调整，创建适合项目的 jQuery 相册解决方案。