修改Owl Carousel代码：替换Flickr公园照片为自定义图片集

我上传到mappingforyou.eu/fusion/的页面中，Owl Carousel原本会根据cached变量内的国家公园列表调用Flickr获取照片，照片标题为对应公园名称。现在我想彻底移除所有与这些公园相关的引用，改用自定义的photos2数组（每个元素包含photo字段的jpg图片地址和caption字段的标题）填充轮播组件。

当前轮播的构建逻辑在buildHtml函数中，但该函数原本依赖公园名称值，我需要改成支持多个自定义条目，尝试修改多次都未成功，也难以理解部分代码逻辑。

1. 移除Flickr相关冗余代码 #

直接删除callFlickr函数，以及所有和cached、current_gallery、queue_length、current_req_length相关的逻辑——我们不再需要从Flickr拉取公园照片。

2. 重构buildHtml函数适配自定义数组 #

修改buildHtml，让它直接遍历photos2生成轮播项，剥离所有公园相关依赖：

• 替换原有的current_gallery遍历逻辑为photos2遍历
• 移除鼠标悬停/移出时的公园高亮事件（不需要可直接删除）
• 将标题、图片地址替换为photos2中的caption和photo字段
• 移除公园列表（#parkslist）相关代码（不需要可直接删除）

3. 修改后的完整代码 #

// 自定义photos2数组，替换为你的实际内容
const photos2 = [
  { photo: "https://example.com/photo1.jpg", caption: "自定义标题1" },
  { photo: "https://example.com/photo2.jpg", caption: "自定义标题2" },
  // 可添加更多自定义条目
];

// 构建轮播HTML
function buildHtml() {
  const gallery_container = $("<div />", {
    id: 'owl-slider',
    class: 'owl-carousel' // 修复原代码拼写错误：own-carousel → owl-carousel
  });

  // 遍历自定义数组生成轮播项
  $.each(photos2, function (idx, item) {
    const div = $("<div />", {
      class: 'thumbnail'
    });

    // 若不需要公园高亮，直接删除以下两段事件代码
    // div.on('mouseover', function (e) {
    //   highlightPark(park);
    // });
    // div.on('mouseout', function (e) {
    //   $.each(np_geo.getLayers(), function (i, l) {
    //     l.setStyle(style());
    //   });
    // });

    const title = $("<span />", {
      html: `<h2><span class='glyphicon glyphicon-globe inverse'></span>  ${item.caption}</h2>`,
      class: 'parkname-title'
    });

    // 自定义大图预览地址，可根据需求修改（比如替换图片后缀）
    const fullPhoto = item.photo;

    const link = $("<a />", {
      "data-lightbox": `image-${idx}`,
      "data-title": `${item.caption}`,
      href: fullPhoto
    });

    const img = $("<img />", {
      src: item.photo
    });

    link.append(img);
    div.append(link);
    div.append(title);
    gallery_container.append(div);
  });

  // 若不需要公园列表，直接删除以下代码块
  // const list = [];
  // list = list.join(' | ');
  // $("#parkslist").html(list);
  // $("#parkslist").on('click', '.park-item', function (e) {
  //   e.preventDefault();
  //   highlightPark(e.target.text);
  // });

  $("#slider").empty();
  $("#slider").append(gallery_container);
  $("#owl-slider").owlCarousel({
    margin: 10,
    autoWidth: true,
    stagePadding: 50
  });
}

// 确保DOM加载完成后初始化轮播
$(document).ready(function() {
  buildHtml();
});

关键修改说明 #

• 剥离Flickr依赖：彻底删除所有从Flickr拉取数据的逻辑
• 适配自定义内容：直接使用photos2数组的字段生成轮播项
• 清理冗余逻辑：移除公园高亮、公园列表等原功能相关代码（可按需恢复）
• 修复拼写错误：将原代码中错误的own-carousel类名修正为Owl Carousel要求的owl-carousel
• 添加初始化触发：确保在DOM加载完成后调用buildHtml启动轮播

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