Cách sử dụng liên kết đính kèm làm slide ảnh bài viết

Các theme chủ đề về kiến trúc, nội thất hay đơn giản là blog chia sẻ ảnh đẹp vẫn thường sử dụng slide ảnh trên đầu hay dưới chân của bài viết. Nếu bạn cũng muốn tạo slide ảnh như vậy có thể tham khảo bài viết này của mình.

Trong bài viết này mình đưa ra gợi ý về cách sử dụng các liên kết đính kèm làm slide ảnh bài viết, phần slide ảnh sử dụng plugin slick slider còn hiệu ứng popup khi click vào ảnh sử dụng plugin fancybox. Cách thực hiện như sau:

Bước 1: Thêm code xml vào vị trí muốn hiển thị của bài viết trong template của bạn cụ thể trong widget Blog, tìm thẻ <data:post.body/> thêm code ngay dưới nó

<div class='slideNewsDetails'>

  <div class='slider-post clearfix'>

    <div class='slider-big'>

      <b:loop index='item' values='data:post.enclosures' var='enclosure'>

        <div class='item'>

          <a class='img' data-fancybox='gallery' expr:href='data:enclosure.url' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'>

            <img expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 749, &quot;16:9&quot;)' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'/>

          </a>

        </div>

      </b:loop>

    </div>

    <div class='slider-small'>

      <b:loop index='item' values='data:post.enclosures' var='enclosure'>

        <div class='item'>

          <img expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 142, &quot;16:9&quot;)' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'/>

        </div>

      </b:loop>

    </div>

  </div>

</div>

Trong đó 749 là chiều rộng của các ảnh slide lớn bên trên, bạn có thể thay bằng số khác cho phù hợp với chiều rộng main, tương tự 142 là chiểu rộng của các ảnh nhỏ bên dưới. Mình sử dụng hàm resizeImage để thiết lập tất cả cà các ảnh lơn và nhỏ đều có kích thước tương tự nhau.

Bước 2: Chèn link css trước thẻ đóng </head>

<b:if cond='data:view.isPost'>

<link href='https://vietblogdao.github.io/blog/themify-icons.css' rel='stylesheet'/>

<link href='https://vietblogdao.github.io/css/slick-slider.min.css' rel='stylesheet'/>

<link href='https://vietblogdao.github.io/css/fancybox.min.css' rel='stylesheet'/>

</b:if>

Nếu template của bạn sử dụng biểu tượng Font Awesome, bạn có thể xóa link link themify-icons.css đi và thay lại icon prev và next như sau:

<style>

.slick-next:before, .slick-prev:before {

    font-family: FontAwesome;

    font-size: 24px;

}

.slick-prev:before {

    content: "\f104";

}

.slick-next:before {

    content: "\f105";

}

</style>

Bước 3: Chèn script trước thẻ đóng </body>

<b:if cond='data:view.isPost'>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<script src='https://vietblogdao.github.io/js/fancybox.min.js'></script>

<script src="https://vietblogdao.github.io/js/slick-slider.min.js"></script>

<script>//<![CDATA[

$(document).ready(function() {

  if ($('.slider-post').length > 0) {

    slideNewsDetails();

  }

});



function slideNewsDetails() {

  $('.slideNewsDetails .slider-post .slider-big').slick({

    slidesToShow: 1,

    slidesToScroll: 1,

    arrows: true,

    fade: true,

    asNavFor: '.slideNewsDetails .slider-small',

    autoplay: true,

    autoplaySpeed: 4000

  });

  $('.slideNewsDetails .slider-post .slider-small').slick({

    slidesToShow: 5,

    slidesToScroll: 1,

    asNavFor: '.slideNewsDetails .slider-big',

    dots: false,

    centerMode: false,

    focusOnSelect: true,

    arrows: false,

    autoplay: true,

    autoplaySpeed: 4000,

    responsive: [{

        breakpoint: 1024,

        settings: {

          centerMode: false,

          slidesToShow: 7,

          slidesToScroll: 1,

        }

      },

      {

        breakpoint: 769,

        settings: {

          centerMode: false,

          slidesToShow: 7,

          slidesToScroll: 1

        }

      },

      {

        breakpoint: 575,

        settings: {

          centerMode: false,

          slidesToShow: 4,

          slidesToScroll: 1

        }

      }

    ]

  });

}

//]]></script>

</b:if>

Bước 4: Bật liên kết tiêu đề và liên kết đính kèm

Phần thiết lập trong template đã xong, giờ chuyển sang phần cài đặt kích hoạt liên kết đính kèm và thêm link ảnh. Các bạn truy cập Cài đặt > Khác > Bật liên kết tiêu đề và liên kết đính kèm > chọn Có > chọn Lưu cài đặt

Bước 5: Thêm liên kết đính kèm vào bài viết

Các bạn chọn lấy tối đa 5 ảnh phù hợp up lên sau đó lấy link ảnh chèn vào mục Liên kết cố định > Liên kết đính kèm, chèn lần lượt từng link ảnh một chọn thêm liên kết đính kèm khác để thêm link ảnh tiếp theo

Các bạn Xem demo slide ảnh ngay dưới