Class(2017-1)練習1

五、【學習相簿】區塊

BS:【元件Components】>【縮圖Thumbnails】>【預設範例Default example】

確認項目:

1.改變圖片外框:透過【CSS】>【圖片Images】

2.應用<div class=”row”>結構分區塊

3.【lightbox】 外掛應用

連結

4-1 學習相簿 加入結構

 

<!--  學習相簿 ===================================================================== -->

<!-- 標題 --=============================>
<h2 class="text-center">學習相簿<span> -圖片源自:www.freepik.com</span></h2>


<!-- 圖片 --=============================>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album01.jpg" alt="相簿01">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album02.jpg" alt="相簿02">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album03.jpg" alt="相簿03">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album04.jpg" alt="相簿04">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album05.jpg" alt="相簿05">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album06.jpg" alt="相簿06">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album07.jpg" alt="相簿07">
    </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="images/Album08.jpg" alt="相簿08">
    </a>
</div>

4-2 ligthbox 加入

<!-- lightbox css -->
<link rel="stylesheet" href="js/lightbox2-master/dist/css/lightbox.css">

<!-- lightbox js -->
<script src="js/lightbox2-master/dist/js/lightbox.js"></script>

lightbox 說明圖片擷取,利用JQ寫入

加入 id=”thumbnail”

<div class=”row” id=”thumbnail”>

//學習相簿 lightbox
$('#thumbnail').find('.thumbnail').each(function(i) {
    var $thumbnailSrc = $(this).find('img').attr('src');
    var $thumbnailAlt = $(this).find('img').attr('alt');
    //  console.log($thumbnail);
    //  alert($thumbnail);
    i++;
    $(this).attr('data-lightbox', 'image-' + i).attr('data-title', $thumbnailAlt).attr('href', $thumbnailSrc);
    // <a href="images/Album01.jpg" class="thumbnail" data-lightbox="image-1" data-title="相簿01">
    console.log($(this).html());
});