Gallery with list style
How do I make an gallery with list style?
Responsive gallery width lightbox. Photos unsplash. What is a gallery with list style? How do you make a gallery with list style? This script and codes were developed by Moncho Varela on 08 October 2022, Saturday.
Gallery with list style - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gallery with list style</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- google fonts-->
<link href='https://fonts.googleapis.com/css?family=Leckerli+One|Metrophobic' rel='stylesheet' type='text/css'>
<a href="#" class="icon_list" data-js="list"> <span>• -</span> <span>• -</span> <span>• -</span>
</a>
<div class="wrapper"> <div class="wrapper_inner"> <!-- Gallery --> <section class="gallery"> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="1"> <img src="https://25.media.tumblr.com/1adc4029ef3a31124f222add70fa3553/tumblr_n2k1499dIp1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="1" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/1adc4029ef3a31124f222add70fa3553/tumblr_n2k1499dIp1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="2"> <img src="https://25.media.tumblr.com/b8fd8b5382cce0e5be44bd1245ea2cf4/tumblr_n2k138YEtG1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple Video</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="2" class="gallery_item_full"> <div class="box"> <div class="video"> <iframe src="https://www.youtube.com/embed/gLg6qxkQ94A"></iframe> </div> <h3>Example Youtube video</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="3"> <img src="https://24.media.tumblr.com/5c73892a883adf41e9b8b7fe807e19b8/tumblr_n2k10foRBd1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple Video 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="3" class="gallery_item_full"> <div class="box"> <div class="video"> <iframe src="//player.vimeo.com/video/89918113"></iframe> </div> <h3>Example Vimeo video</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="4"> <img src="https://25.media.tumblr.com/72ff371588fd911cf7725394740c62a0/tumblr_n2k15mq4xy1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="4" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/72ff371588fd911cf7725394740c62a0/tumblr_n2k15mq4xy1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="5"> <img src="https://25.media.tumblr.com/e615708905cc9df81f901c06ae4afe1e/tumblr_n21ltnVLtz1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="5" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/e615708905cc9df81f901c06ae4afe1e/tumblr_n21ltnVLtz1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="6"> <img src="https://25.media.tumblr.com/6c0e95d27b8509096274f244ff5aeea9/tumblr_n21lusI21V1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="6" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/6c0e95d27b8509096274f244ff5aeea9/tumblr_n21lusI21V1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="7"> <img src="https://24.media.tumblr.com/bb592565a7d8c4f004973fe3045cac6f/tumblr_n21lvqbJ2m1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="7" class="gallery_item_full"> <div class="box"> <img src="https://24.media.tumblr.com/bb592565a7d8c4f004973fe3045cac6f/tumblr_n21lvqbJ2m1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="8"> <img src="https://25.media.tumblr.com/0a4075c0b36aa37ddbd85d4e75afbeca/tumblr_n21lwpVo3F1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="8" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/0a4075c0b36aa37ddbd85d4e75afbeca/tumblr_n21lwpVo3F1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="9"> <img src="https://24.media.tumblr.com/40b727a4d9ea5164103d81590bde4ef6/tumblr_n2k0y8bxXE1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="9" class="gallery_item_full"> <div class="box"> <img src="https://24.media.tumblr.com/40b727a4d9ea5164103d81590bde4ef6/tumblr_n2k0y8bxXE1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="10"> <img src="https://25.media.tumblr.com/b8fd8b5382cce0e5be44bd1245ea2cf4/tumblr_n2k138YEtG1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="10" class="gallery_item_full"> <div class="box"> <img src="https://25.media.tumblr.com/b8fd8b5382cce0e5be44bd1245ea2cf4/tumblr_n2k138YEtG1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="11"> <img src="https://24.media.tumblr.com/f74ff1d9acdf8c43cd1897e01bc669e6/tumblr_n2k114hDQX1st5lhmo1_1280.jpg" alt="" /><span> <h3>Exmaple photo</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </span></a> </span> <!-- Gallery item full --> <div data-lk="11" class="gallery_item_full"> <div class="box"> <img src="https://24.media.tumblr.com/f74ff1d9acdf8c43cd1897e01bc669e6/tumblr_n2k114hDQX1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> <!-- Gallery item --> <div class="gallery_item"> <!-- Gallery item preview --> <span class="gallery_item_preview"> <a href="#" data-js="12"> <img src="https://24.media.tumblr.com/57a652bfb91e06d3d1f596c0aa5f7871/tumblr_n2k120WsWM1st5lhmo1_1280.jpg" alt="" /> <span> <h3>Exmaple photo</h3> </span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </a> </span> <!-- Gallery item full --> <div data-lk="12" class="gallery_item_full"> <div class="box"> <img src="https://24.media.tumblr.com/57a652bfb91e06d3d1f596c0aa5f7871/tumblr_n2k120WsWM1st5lhmo1_1280.jpg" alt="" /> <h3>Example image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore rem minima saepe itaque animi fuga consequuntur. Praesentium dolorum neque autem nihil nobis quam animi ullam eos tempora quia eius aliquid?</p> </div> </div> </div> </section> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Gallery with list style - Script Codes CSS Codes
/* = @media queries info
===========================*/
body:before{margin:1em;}
@media (min-width: 980px){ body:before{ content:"info: Large desktop"; color:black;}}
@media (min-width: 768px) and (max-width: 979px) { body:before{ content:"info: Portrait tablet to landscape desktop"; color:black;}}
@media (max-width: 767px) { body:before{ content:"info: Landscape phone to portrait tablet "; color:black;}}
@media (max-width: 480px) { body:before{ content:"info: Landscape phones and down"; color:black;}}
/* Basic
================*/
html,body{ margin:0; padding:0; position:relative; height:100%;
}
*,*:after,*:before{ box-sizing:border-box;
}
/* PLACEHOLDER
----------------------*/
::-webkit-input-placeholder {color: #FFF;}
:-moz-placeholder {color: #FFF;}
::-moz-placeholder {color: #FFF;}
:-ms-input-placeholder {color: #FFF;}
/* SCROLLBAR
-------------------*/
::-webkit-scrollbar{ width:0.2em; background:#e74c3c;
}
::-webkit-scrollbar-track{}
::-webkit-scrollbar-thumb{ background:#fff;
}
::-webkit-scrollbar-thumb:window-inactive{ background:#fff;
}
/* SELECTION
-------------------*/
::-moz-selection{ background:#999; color:#fff;
}
::selection{ background:#999; color:#fff;
}
::-moz-selection{ background:#999; color:#fff;
}
/* === Links Styles === */
a{ text-decoration:underline; -webkit-transition:0.25s; transition:0.25s; -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
a:hover{ text-decoration:none;
}
a:focus{ outline:0; outline:0 auto -webkit-focus-ring-color; outline-offset:0;
}
/* Layout
=======================*/
body{ background:#ECECEC; overflow-X:hidden; font-size:13px; font-family: 'Metrophobic', sans-serif; font-weight:400;
}
.wrapper { margin: 5% auto; display: block; width: 96%; height: 100%; padding: 0;
}
.wrapper_inner{ padding:0.2em; margin:0;
}
.gallery{}
.gallery_item { float: left; width: 24.59%; display: inline-block; margin: 0 auto; margin-right: 0.2em; margin-bottom:0.2em; padding: 0;
}
.gallery_item_preview { -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_item_preview a { position:relative; display: inline-block; padding: 0.2em; background:#ECECEC; color: #333; text-decoration: none; overflow: hidden; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_item_preview a:hover { color: #777; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_item_preview a:before { content:"Click to view"; position:absolute; top:0.5em; left:-30em; background-color:#fff; background-color:rgba(255,255,255,0.3); color:#000; padding:0.5em 1em; border-radius: 5px 0 0 0; -webkit-transition:all 1s ease; transition:all 1s ease;
}
.gallery_item_preview a:hover:before { left:0.5em; -webkit-transition:all 1s ease; transition:all 1s ease;
}
.gallery_item_preview a h3{ font-family: 'Leckerli One', cursive;
}
.gallery_item_preview a img{ display:block; width:100%; height:150px; border-radius:5px; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_item_full{ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-color:#fff; background-color:rgba(255,255,255,0.8); z-index: 100; overflow:hidden;
}
.gallery_item_full img { display: block; width: 100%;
}
.box{ margin:auto; background:#ecf0f1; padding: 2em; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:auto; width:50%; text-align:left;
}
.box h3{ font-family: 'Leckerli One', cursive; color:#F88484;
}
.cl { position: absolute; top: 0.5em; right: 0.5em; color: #777; text-decoration: none; display: inline-block; font-size: 2em;
}
.cl:hover{ color:#F88484;
}
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;
}
.video iframe,
.video object,
.video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* list style
=============================*/
.icon_list { width: 30px; height: 30px; display: block; padding: 0.5em; text-decoration: none; line-height: 0.4em; background: #FFF; color: #838383; border: 1px solid #C2C2C2; box-shadow: 0 1px 1px #4B4B4B; border-radius: 4px; position: absolute; right: 0.3em; top: 0.3em; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.icon_list:hover { background: #4E4E4E; color: #FFF; border-color: #000; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_item_list { float: none !important; display: block !important; width: 50% !important; margin: auto; background: #ECECEC; margin-top: 0.5em; box-shadow: 0 1px 4px #838383; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
.gallery_line { width: 130px !important; height: 100px !important; display: inline-block !important; float: left !important; margin-right: 1em !important; -webkit-transition:all 0.5s ease; transition: all 0.5s ease;
}
/* Simple animation
=======================*/
.efIn{-webkit-animation:fx_in 0.65s 1 ease-in-out;animation:fx_in 0.65s 1 ease-in-out;}
.efOut{-webkit-animation:fx_out 0.7s 1 ease-in-out;animation:fx_out 0.7s 1 ease-in-out;}
/* Keyframes
==============*/
@-webkit-keyframes fx_in{ from{width:0;height:0;border-radius:100%;opacity:0;} 50%{box-shadow:inset 0 0 0 0 #fff;} to{width:100%;height:100%;border-radius:0;opacity:1;}
}
@keyframes fx_in{ from{width:0;height:0;border-radius:100%;opacity:0;} 50%{box-shadow:inset 0 0 0 0 #fff;} to{width:100%;height:100%;border-radius:0;opacity:1;}
}
@-webkit-keyframes fx_out{ from{width:100%;height:100%;border-radius:0; box-shadow:inset 0 0 0 0 #fff;opacity:1;} 50%{box-shadow:inset 0 0 0 80em #fff;} to{width:0;height:0;border-radius:100%;opacity:0;}
}
@keyframes fx_out{ from{width:100%;height:100%;border-radius:0; box-shadow:inset 0 0 0 0 #fff;opacity:1;} 50%{box-shadow:inset 0 0 0 80em #fff;} to{width:0;height:0;border-radius:100%;opacity:0;}
}
/* Large desktop */
@media (min-width: 980px){ .gallery_item {width: 24.45%;} .gallery_item_preview a img{height:180px;} .box{width:60%;}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { .gallery_item {width: 32.83%;} .gallery_item_preview a img{height:180px;} .box{width:70%;}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { .gallery_item {width: 49.45%;} .gallery_item_preview a img{height:180px;} .box{margin: auto;background: #F8F8F8;padding: 4em 1em 1em 1em;width:80%;} .cl{top: 0;right: 0.5em;}
}
/* Landscape phones and down */
@media (max-width: 480px) { .gallery_item {width: 100%;} .gallery_item_preview a img{height:200px;} .box{background: #F8F8F8;padding: 4em 1em 1em 1em;width:100%;} .cl{top: 0;right: 0.5em;} .gallery_item_list{width:100% !important;}
}
Gallery with list style - Script Codes JS Codes
var gallery = (function(){ 'use strict'; return { // this.js(obj) js: function(e){return $("[data-js="+e+"]");}, // this.lk(obj) lk: function(e){return $("[data-lk="+e+"]");}, // Ready functions ready_: function(){this.events();}, // functions events:function(){ var self = this; var close = $('.gallery_item_full'); close.append('<a href="#" data-js="cl" class="cl">X</a>'); // Get all data js and add clickOn function var k = $('a[data-js]'); k.each(function(i, v){ i = i+1; self.clickOn(i); }); // close on click self.js('cl').on("click",function(){ self.fx_out($('.gallery_item_full')); self.fx_out($('.box')); }); // list self.js('list').on("click",function(){ $('.gallery_item').toggleClass('gallery_item_list'); $('.gallery_item_preview a img').toggleClass('gallery_line'); }); }, // Show on click clickOn: function(i){ var self = this; this.js(i).on('click',function(){ self.fx_in(self.lk(i)); self.fx_in($('.box')); }); }, // out function fx_out: function(el){ el.addClass('efOut') .delay(500) .fadeOut('fast') .removeClass('efIn'); $('body').css({overflow:'auto'}); return false; }, // in function fx_in: function(el){ el.removeClass('efOut') .show() .addClass('efIn'); $('body').css({overflow:'hidden'}); return false; } };
})();
// ready function of gallery
gallery.ready_();
Developer | Moncho Varela |
Username | nakome |
Uploaded | October 08, 2022 |
Rating | 4 |
Size | 5,160 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Gallery with list style | 5,160 Kb |
Neo minimal theme | 8,124 Kb |
Captcha Colors experiment | 4,057 Kb |
How to make spanish tortilla | 3,133 Kb |
Responsive table with json data. | 4,802 Kb |
Youtube videos | 3,592 Kb |
Very simple svg animation | 5,632 Kb |
Get color on click | 29,575 Kb |
Background video | 3,286 Kb |
Html demos with data uri | 4,086 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Simple CSS loader. | Cabrera | 2,574 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Transition | Shayhowe | 1,632 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!