Gallery merupakan salah satu komponen pada web atau blog yang dibutuhkan bahkan memiliki salah satu unsur yang penting, karena berguna untuk menampilkan atau menyampaikan sebuah informasi berupa gambar ataupun video.
Informasi yang sampaikan memiliki ragam dan tujuan berbeda-beda. Dapat merupakan sebuah informasi suatu acara atau peristiwa, dapat pula merupakan sebuah informasi yang merupakan pembuktian tentang suatu kejadian tertentu, dan lain sebagainya.
Koding gallery sederhana..!
- Open xampp
- Open sublime text
- kemudian buat folder image
Buat sebuah folder new kemudian masukan script di bawah ini:
lalu save dengan nama index.php
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
- <link rel="stylesheet" href="style.css">
- <link rel="shortcut icon" type="image/png" href="img/favicon.png">
- <title>Gallery</title>
- </head>
- <body>
- <div class="header">
- <div class="container">
- <div class="gallery">
- <figure class="gallery__item gallery__item--1">
- <div class="zoom-effect">
- <img src="gambar/1.jpg" alt="Gallery image 1" class="gallery__img">
- </div>
- </figure>
- <figure class="gallery__item gallery__item--2">
- <div class="zoom-effect">
- <img src="gambar/2.jpg" alt="Gallery image 2" class="gallery__img">
- </div>
- </figure>
- <figure class="gallery__item gallery__item--3">
- <div class="zoom-effect">
- <img src="gambar/3.jpg" alt="Gallery image 3" class="gallery__img">
- </div>
- </figure>
- <figure class="gallery__item gallery__item--4">
- <div class="zoom-effect">
- <img src="gambar/4.jpg" alt="Gallery image 4" class="gallery__img">
- </div>
- </figure>
- <figure class="gallery__item gallery__item--5">
- <div class="zoom-effect">
- <img src="gambar/5.jpg" alt="Gallery image 5" class="gallery__img">
- </div>
- </figure>
- <figure class="gallery__item gallery__item--6">
- <div class="zoom-effect">
- <img src="gambar/6.jpg" alt="Gallery image 6" class="gallery__img">
- </div>
- </figure>
- </div>
- </div>
- </div>
- </body>
- <script src="bootstrap/js/bootstrap.min.js"></script>
- </html>
kemudian buat sebuah file css yang sudah di konfigurasikan bosstrap,
save dengan nama style.css
- *,
- *::after,
- *::before {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
- }
- html {
- box-sizing: border-box;
- font-size: 62.5%;
- }
- body {
- font-family: "Nunito", sans-serif;
- color: #333;
- font-weight: 300;
- line-height: 1.6;
- }
- /* Style the header */
- .header {
- background-color: #666;
- padding: 125px;
- text-align: center;
- font-size: 35px;
- color: white;
- }
- .container {
- grid-template-columns: 100px 50px 100px;
- grid-template-rows: 80px auto 80px;
- column-gap: 10px;
- row-gap: 15px;
- }
- .gallery {
- display: grid;
- grid-template-columns: repeat(8, 1fr);
- grid-template-rows: repeat(8, 5vw);
- grid-gap: 1.5rem;
- }
- .gallery__img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- display: block;
- /** Alternative Syntax effect zoom **/
- -webkit-transition: 0.4s ease;
- transition: 0.4s ease;
- /** Alternative Syntax effect zoom **/
- }
- .gallery__item--1 {
- grid-column-start: 1;
- grid-column-end: 3;
- grid-row-start: 1;
- grid-row-end: 3;
- /** Alternative Syntax **/
- /* grid-column: 1 / span 2; */
- /* grid-row: 1 / span 2; */
- }
- .gallery__item--2 {
- grid-column-start: 3;
- grid-column-end: 5;
- grid-row-start: 1;
- grid-row-end: 3;
- /** Alternative Syntax **/
- /* grid-column: 3 / span 2; */
- /* grid-row: 1 / span 2; */
- }
- .gallery__item--3 {
- grid-column-start: 5;
- grid-column-end: 9;
- grid-row-start: 1;
- grid-row-end: 6;
- /** Alternative Syntax **/
- /* grid-column: 5 / span 4;
- grid-row: 1 / span 5; */
- }
- .gallery__item--4 {
- grid-column-start: 1;
- grid-column-end: 5;
- grid-row-start: 3;
- grid-row-end: 6;
- /** Alternative Syntax **/
- /* grid-column: 1 / span 4; */
- /* grid-row: 3 / span 3; */
- }
- .gallery__item--5 {
- grid-column-start: 1;
- grid-column-end: 5;
- grid-row-start: 6;
- grid-row-end: 9;
- /** Alternative Syntax **/
- /* grid-column: 1 / span 4; */
- /* grid-row: 6 / span 3; */
- }
- .gallery__item--6 {
- grid-column-start: 5;
- grid-column-end: 9;
- grid-row-start: 6;
- grid-row-end: 9;
- /** Alternative Syntax **/
- /* grid-column: 5 / span 4; */
- /* grid-row: 6 / span 3; */
- }
- /** Alternative Syntax effect zoom **/
- .zoom-effect:hover .gallery__img {
- -webkit-transform: scale(1.08);
- transform: scale(1.08);
- }
- /** Alternative Syntax effect zoom **/
Pada umumnya gambar sering di tampilkan pada web bagian header atau khususnya gallery.
