Gallery with list style

Developer
Moncho Varela
Size
5,160 Kb
Views
42,504
  1. Gallery with list style Previews
  2. Gallery with list style HTML Codes
  3. Gallery with list style CSS Codes
  4. Gallery with list style JS Codes

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 Previews
IQ Test

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_();
Gallery with list style - Script Codes
Gallery with list style - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded October 08, 2022
Rating 4
Size 5,160 Kb
Views 42,504
Do you need developer help for Gallery with list style?

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!

Moncho Varela (nakome) Script Codes
Name
Youtube videos
Neo minimal theme
Welcome
Get json with data attributes
Another webSQL
Css3 slide
Simple lightbox
Get color on click
Another intro
Another Gallery
Create amazing marketing copy with AI!

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!