Question

我想添加一个图像标题列表（文本），根据图库前面的图像显示和消失。来自此代码笔code pen

我试图创建一个包含标题的字符串列表，但结果是标题一次显示。

这是我尝试添加列表的代码的一部分..请检查代码笔中的wholle代码

    card.addClass("photo").css({
            "top": i * -6 + "px",
            "left": (i * 4.5) + "px",
            "width": 100-i*5 + "%",
            "background": bgColor
        }).appendTo(gallery);

        var imgContainer = $("<div>").addClass("imgContainer").appendTo(card);
        var img = $("<img>").attr("src", photos[i]).appendTo(imgContainer);
        var membre = $("<div>").addClass("membre").appendTo(card);
        var nom = $("<div>").addClass("nom").appendTo(membre);
        var statut = $("<div>").addClass("statut").appendTo(membre);
    }

    $(".photo").on("click", function() {
        var i=0;
        if ($(this).index() == $(".photo").length - 1 && animation == false)
            $(".nom").text(names[i]);
            i++;
            swipePhoto(this);
    });

Answer 1

更改photos array以同时保留image url和caption text。然后创建另一个div以保留caption并将其附加到与image相同的卡片上。

见下面的工作示例。

// Images from http://megatruh.deviantart.com/

$(document).ready(function() {
  var photos = [{
      image: "http://pre04.deviantart.net/ef3d/th/pre/f/2014/046/3/e/quiet_calamity_by_megatruh-d76k76f.jpg",
      caption: "Image one caption"
    },
    {
      image: "http://pre07.deviantart.net/6c73/th/pre/f/2014/119/7/7/island___by_megatruh-d7ginlh.jpg",
      caption: "Image two caption"
    },
    {
      image: "http://pre05.deviantart.net/dce1/th/pre/f/2013/361/7/d/somnium_by_megatruh-d6zloar.jpg",
      caption: "Image three caption"
    },
    {
      image: "http://pre03.deviantart.net/7139/th/pre/f/2013/067/d/8/the_world_is_ahead___by_megatruh-d5xchxw.jpg",
      caption: "Image four caption"
    },
    {
      image: "http://pre02.deviantart.net/265c/th/pre/f/2012/326/4/0/a_worthy_brother___by_megatruh-d5luhah.jpg",
      caption: "Image five caption"
    },
    {
      image: "http://pre12.deviantart.net/d18b/th/pre/f/2012/272/d/e/in_asgard___by_megatruh-d5g8nah.jpg",
      caption: "Image six caption"
    }
  ];

  var direction = 1,
    animation = false,
    nbPhotos = photos.length,
    gallery = $("#gallery");

  function init() {
    for (var i = nbPhotos - 1; i >= 0; i--) {
      var color = 255 - i * 10,
        bgColor = "rgba(" + color + ", " + color + ", " + color + ", 1)",
        card = $("<div>");

      card
        .addClass("photo")
        .css({
          top: i * -6 + "px",
          left: i * 4.5 + "px",
          width: 100 - i * 5 + "%",
          background: bgColor
        })
        .appendTo(gallery);

      //Append caption container to the card
      ///////////////////////////////////////

      var captionContainer = $("<div>")
        .addClass("captionContainer")
        .html(photos[i].caption)
        .appendTo(card);

      //////////////////////////////////////

      var imgContainer = $("<div>")
        .addClass("imgContainer")
        .appendTo(card);
      var img = $("<img>")
        .attr("src", photos[i].image)
        .appendTo(imgContainer);
    }

    $(".photo").on("click", function() {
      if ($(this).index() == $(".photo").length - 1 && animation == false)
        swipePhoto(this);
    });
  }

  function swipePhoto(elem) {
    animation = true;
    var photo = $(elem);

    var animationsDone = 0;

    function animationDone() {
      animationsDone++;
      if (animationsDone >= nbPhotos) {
        $(".photo").attr("animating", false);
        animation = false;
      }
    }

    // Animation: photo swipe
    photo.attr("animating", true);
    photo.animate({
        top: "+=" + 30,
        left: direction + "=" + 250
      },
      500,
      "easeInQuart",
      function() {
        // Photo goes behind all photos (DOM)
        photo.detach();
        photo.prependTo(gallery);

        var color = 255 - 4 * 10;
        var bgColor = "rgba(" + color + "," + color + "," + color + ", 1)";

        // Animation of the photo going behind
        photo
          .animate({
              top: (nbPhotos - 1) * -6 + "px",
              left: (nbPhotos - 1) * 4.5 + "px",
              width: 100 - (nbPhotos - 1) * 5 + "%"
            },
            900,
            "easeOutQuart",
            animationDone
          )
          .css("background", bgColor);
      }
    );

    // Update animation direction
    if (direction == "+") direction = "-";
    else direction = "+";

    // Animation : each photo move to his correct position
    var j = 0;
    for (var i = nbPhotos - 1; i >= 0; i--) {
      var color = 225 + i * 12;
      var bgColor = "rgba(" + color + "," + color + "," + color + ", 1)";
      if ($(".photo:eq(" + i + ")").attr("animating") !== "true") {
        $(".photo:eq(" + i + ")")
          .delay((nbPhotos - i + 1) * 150)
          .animate({
              top: j * -6 + "px",
              left: j * 4.5 + "px",
              width: 100 - j * 5 + "%"
            },
            500,
            "easeOutBack",
            animationDone
          )
          .css("background", bgColor);
        j++;
      }
    }
  }

  init();
});

@import url("https://fonts.googleapis.com/css?family=Karla");
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: #F0E5ED;
  font-family: 'Karla', sans-serif;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  background: #9cafbc;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.heading,
#gallery {
  justify-content: center;
  align-content: center;
  width: 200px;
}

.heading {
  margin-bottom: 30px;
}

.heading h1 {
  margin: 0 auto 5px;
  letter-spacing: -2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.heading span {
  font-size: .65em;
  font-weight: 900;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#gallery {
  position: relative;
  display: inline-block;
  margin: 30px 20px 0 0;
  height: 200px;
}

#gallery .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  padding: 10px;
  background: linear-gradient(to bottom, #FFFFFF, #CFCFCF, #FFFFFF);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

#gallery .photo:last-child {
  cursor: pointer;
}

#gallery .photo .captionContainer {
  position: absolute;
  margin: 0 auto;
  padding: 4px;
  bottom: 9px;
  text-align: center;
  background: black;
  opacity: 0.5;
  display: block;
}

#gallery .photo .imgContainer {
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#gallery .photo .imgContainer img {
  max-width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>

<div class="container">
  <div class="heading">
    <h1>Gallery concept</h1>
    <span>Click on the first image</span>
  </div>
  <div id="gallery"></div>
</div>

如何在现有Jquery图库中为图像添加标题？

1 个答案: