获取Fotorama框架缩略图及实现缩略图悬停显示标签

嘿，咱们一步步来搞定你这两个Fotorama的需求，先从你最关心的缩略图悬停显示标签开始：

一、实现缩略图鼠标悬停显示标签 #

首先得给每张图片配上标签信息，建议在Fotorama的图片元素里加个自定义属性，比如data-label，像这样补全你的HTML结构：

<div class="fotorama fotorama1524085616475" data-navposition="top" id="fotorama-images" data-arrows="always" data-auto="false" data-nav="thumbs" data-transition="crossfade" data-allowfullscreen="native" data-fit="cover" data-keyboard="true" data-swipe="true" data-click="true" data-width="100%" data-ratio="2/3">
  <img src="你的图片地址1.jpg" data-label="这是第一张图的标签" />
  <img src="你的图片地址2.jpg" data-label="第二张图的描述" />
  <!-- 更多图片... -->
</div>

接下来给你两种实现方案，按需选择：

方案1：纯CSS+少量JS实现简洁悬停标签 #

Fotorama初始化后会生成.fotorama__nav__frame作为缩略图的容器，我们可以用CSS伪元素来显示标签，但需要先把图片的data-label同步到缩略图容器上：

第一步：添加JavaScript同步标签属性

// 等Fotorama完全初始化后执行
$('#fotorama-images').on('fotorama:ready', function () {
  const fotorama = $(this).data('fotorama');
  // 遍历每个缩略图容器，把对应原图的标签传过去
  fotorama.$nav.find('.fotorama__nav__frame').each((index, frame) => {
    const label = fotorama.$stage.children().eq(index).find('img').data('label');
    $(frame).attr('data-label', label);
  });
});

第二步：添加CSS样式实现悬停显示

/* 给缩略图容器设置相对定位，让标签能正确定位 */
.fotorama__nav__frame {
  position: relative;
}

/* 定义标签的样式，默认隐藏 */
.fotorama__nav__frame::after {
  content: attr(data-label);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 避免标签挡住鼠标交互 */
}

/* 鼠标悬停时显示标签 */
.fotorama__nav__frame:hover::after {
  opacity: 1;
}

方案2：JS动态创建标签（适合复杂样式） #

如果需要多行标签、自定义图标这类复杂样式，用JS动态创建标签元素更灵活：

JavaScript代码

$('#fotorama-images').on('fotorama:ready', function () {
  const fotorama = $(this).data('fotorama');
  fotorama.$nav.find('.fotorama__nav__frame').each((index, frame) => {
    const $frame = $(frame);
    const label = fotorama.$stage.children().eq(index).find('img').data('label');
    
    // 创建标签元素并添加到缩略图容器里
    const $label = $('<div class="thumb-label">' + label + '</div>');
    $frame.append($label);
    
    // 绑定悬停事件控制显示/隐藏
    $frame.hover(
      () => $label.fadeIn(200),
      () => $label.fadeOut(200)
    );
  });
});

对应的CSS样式

.thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 8px;
  font-size: 13px;
  display: none;
}

.fotorama__nav__frame {
  position: relative;
}

二、获取Fotorama的缩略图 #

不管是要获取缩略图的DOM元素还是它们的URL，都要等Fotorama初始化完成后再操作，代码如下：

获取所有缩略图的DOM元素 #

$('#fotorama-images').on('fotorama:ready', function () {
  const fotorama = $(this).data('fotorama');
  // 获取所有缩略图容器
  const $thumbFrames = fotorama.$nav.find('.fotorama__nav__frame');
  // 获取每个缩略图里的img元素
  const $thumbImgs = $thumbFrames.find('.fotorama__img');
  
  // 遍历处理每个缩略图
  $thumbImgs.each((_, img) => {
    console.log('当前缩略图元素:', img);
  });
});

获取所有缩略图的URL列表 #

$('#fotorama-images').on('fotorama:ready', function () {
  const fotorama = $(this).data('fotorama');
  const thumbUrls = fotorama.$nav.find('.fotorama__img').map((_, img) => {
    return $(img).attr('src');
  }).get();
  
  console.log('所有缩略图URL:', thumbUrls);
});

内容的提问来源于stack exchange，提问作者user2397555