Làm việc với hình ảnh , nhất là các web có show Hình , việc tạo hiệu ứng rất quan trọng nó làm cho viẹc lướt web xem hình không nhàm chán , mình sẽ giới thiệu một số hiệu ứng hình cho các bạn ứng dụng trong wordpres hiệu quả hơn
bài 1 Hiệu ứng tab hình – Tab Gallery trong wordpres – dừng hình làm tab rất đẹp bên dưới
Hiệu ứng tab hình – Tab Gallery trong wordpres
Thống kê bài viết
như tab bên dưới
Tabbed Image Gallery
Click on the images below:
×
![]()
sau đây là các bước làm tab Hình đẹp nhé !
Bước 1) thêm code HTML – Hiệu ứng tab hình :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!-- The grid: four columns --> <div class="row"> <div class="column"> <img src="img_nature.jpg" alt="Nature" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_snow.jpg" alt="Snow" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_mountains.jpg" alt="Mountains" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_lights.jpg" alt="Lights" onclick="myFunction(this);"> </div> </div> <!-- The expanding image container --> <div class="container"> <!-- Close the image --> <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> <!-- Expanded image --> <img id="expandedImg" style="width:100%"> <!-- Image text --> <div id="imgtext"></div> </div> |
Bước 2) thêm CSS – Hiệu ứng tab hình :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/* The grid: Four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; } /* Style the images inside the grid */ .column img { opacity: 0.8; cursor: pointer; } .column img:hover { opacity: 1; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* The expanding image container (positioning is needed to position the close button and the text) */ .container { position: relative; display: none; } /* Expanding image text */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* Closable button inside the image */ .closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; } |
Bước 3) Thêm code JavaScript – Hiệu ứng tab hình :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function myFunction(imgs) { // Get the expanded image var expandImg = document.getElementById("expandedImg"); // Get the image text var imgText = document.getElementById("imgtext"); // Use the same src in the expanded image as the image being clicked on from the grid expandImg.src = imgs.src; // Use the value of the alt attribute of the clickable image as text inside the expanded image imgText.innerHTML = imgs.alt; // Show the container element (hidden with CSS) expandImg.parentElement.style.display = "block"; } </script> |
Chúc các bạn thành công
Pingback: Hiện thị mô tả acf cho danh mục categories blog - FLATSOME - FREE EVERY THING