如何在此现有Jquery图像库中的图像上添加标题？

Question

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

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

这是我试图在..中添加列表的代码的一部分，请在代码笔处检查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>