圖片疊加中的燈箱+文字

如何在放大時在每張圖片下添加自定義文字？現在它基於alt文本，但我想用圖像等對其進行更多定製。圖片疊加中的燈箱+文字

完美的解決方案是將文本顯示在div中。

這裏是codepen：

// Create a lightbox 
 
(function() { 
 
    var $lightbox = $("<div class='lightbox'></div>"); 
 
    var $img = $("<img>"); 
 
    var $caption = $("<p class='caption'></p>"); 
 

 
    // Add image and caption to lightbox 
 

 
    $lightbox 
 
    .append($img) 
 
    .append($caption); 
 

 
    // Add lighbox to document 
 

 
    $('body').append($lightbox); 
 

 
    $('.lightbox-gallery img').click(function(e) { 
 
    e.preventDefault(); 
 

 
    // Get image link and description 
 
    var src = $(this).attr("src"); 
 
    var cap = $(this).attr("alt"); 
 

 
    // Add data to lighbox 
 

 
    $img.attr('src', src); 
 
    $caption.text(cap); 
 

 
    // Show lightbox 
 

 
    $lightbox.fadeIn('fast'); 
 

 
    $lightbox.click(function() { 
 
     $lightbox.fadeOut('fast'); 
 
    }); 
 
    }); 
 

 
}());

body{ 
 
\t background: linear-gradient(to bottom right, #b81d1d, #5F554C, #E4DFD8); 
 
\t font-family: "Open Sans", sans-serif; 
 
} 
 
.container{ 
 
\t max-width: 800px; 
 
\t margin: 5% auto; 
 
\t padding: 20px; 
 
\t background-color: #fff; 
 
\t overflow: hidden; 
 
\t box-sizing: border-box; 
 
    box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1); 
 
} 
 

 
.text-center{ 
 
\t text-align: center; 
 
\t margin-bottom: 1em; 
 
} 
 

 
.lightbox-gallery { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.lightbox-gallery div > img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 

 
.lightbox-gallery div { 
 
    margin: 10px; 
 
    flex-basis: 180px; 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .lightbox-gallery { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 

 
    .lightbox > div { 
 
    margin-bottom: 10px; 
 
    } 
 
} 
 

 

 
/*Lighbox CSS*/ 
 

 

 
.lightbox{ 
 
\t display: none; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: rgba(0,0,0,.7); 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 20; 
 
\t padding-top: 30px; 
 
\t box-sizing: border-box; 
 
} 
 

 
.lightbox img{ 
 
\t display: block; 
 
    margin: auto; 
 
} 
 

 
.lightbox .caption{ 
 
\t margin: 15px auto; 
 
\t width: 50%; 
 
\t text-align: center; 
 
\t font-size: 1em; 
 
\t line-height: 1.5; 
 
\t font-weight: 700; 
 
\t color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t \t <h2 class="text-center">Lightbox Gallery</h2> 
 
\t \t <div class="lightbox-gallery"> 
 
\t \t \t \t <div><img src="http://placehold.it/300/f1b702/fff&text=image1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, quae, quam. Ut dolorum quia, unde dicta at harum porro officia obcaecati ipsam deserunt fugit dolore delectus quam, maxime nisi quo."></div> 
 
\t \t \t \t <div><img src="http://placehold.it/300/d2f1b2/222&text=image2" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime accusamus officiis dignissimos doloribus consectetur harum eos sapiente optio aut minima."></div> 
 
\t \t \t \t <div><img src="http://placehold.it/300/eee/000&text=image3" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates veritatis similique, amet, maiores soluta recusandae cupiditate, sed perspiciatis fugit minima, sunt dolores cum earum deserunt illo ipsum!"></div> 
 
\t \t \t \t <div><img src="http://placehold.it/300/222/fff&text=image4" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium dignissimos tenetur eos unde quidem repellat officiis nemo laboriosam necessitatibus deleniti commodi quis aliquid est atque tempora aut, nihil!"></div> 
 
\t \t \t \t <div><img src="http://placehold.it/300/b47f99/000&text=image5" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto minus consequatur soluta quaerat itaque, laboriosam quis a facilis, cumque, deleniti quas aperiam voluptate dolore. Enim nostrum sit eaque, porro eligendi illo placeat?"></div> 
 
\t \t \t \t <div><img src="http://placehold.it/300/e1d400/000&text=image6" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi suscipit quam, id aliquam totam aperiam quas rem debitis voluptatem pariatur, illo accusamus facilis eius ipsa! Reprehenderit libero, quas iste repudiandae distinctio, quos dignissimos."></div> 
 
\t \t </div> 
 
\t </div>

Codepen網址：http://codepen.io/lkfmarketing/pen/XMdNEP

來源

2017-04-19 Musa

您可以添加一個隱藏div並抓住與jQuery的文字。

<div class="js-text text">Test</div> 
var txt = $(this).parent().find('.js-text').text()

Forked example

來源

2017-04-19 16:40:53

這是很棒的！當我在

Test

之間添加「img」時，它不會顯示在疊加層中。它應該是一張小檔案圖片，顯示誰拍了照片。有沒有解決方案？ – Musa

我更新了演示。嘗試點擊第一張圖片。 –

太棒了！非常感激。 – Musa

我覺得對於這一點，你可以使用數據屬性：

<div><img id="myImg" src="http://placehold.it/300/f1b702/fff&text=image1" alt="my alt" data-caption="my Caption or whatever you want"></div>

然後你用這個在JS如下

var myCaption = $('#myImg').data('caption'); 
// use this as you please

問候

來源

2017-04-19 16:51:17

圖片疊加中的燈箱+文字

回答

相關問題