Gallery

Developer
Moreno Di Domenico
Size
4,360 Kb
Views
24,288
  1. Gallery Previews
  2. Gallery HTML Codes
  3. Gallery CSS Codes
  4. Gallery JS Codes

How do I make an gallery?

What is a gallery? How do you make a gallery? This script and codes were developed by Moreno Di Domenico on 22 September 2022, Thursday.

Gallery Previews
IQ Test

Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gallery-lookbook"> <a href="#" class="gallery-close">X</a> <div class="image"> <div class="mask"> <div class="scale"> <div class="subscale"> <img src="http://www.unsplash.it/1200/2000" alt="" /> </div> </div> </div> </div> <div class="content"> <div class="gallery-nav"> <a href="#" class="prev">prev</a> <a href="#" class="next">next</a> </div> </div>
</div>
<button>reset</button>
<div class="lookbook"> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div> <div class="item"> <a href="http://www.placehold.it/1200x2000"><img src="http://www.placehold.it/600x1000" alt="" /></a> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Gallery - Script Codes CSS Codes

body { background: #000;
}
.lookbook { margin: 0 10%; display: block; float: left;
}
.lookbook .item { width: 25%; padding: 0 15px; float: left; margin-bottom: 30px;
}
.lookbook .item img { width: 100%;
}
/**** FROM HERE ****/
.lookbook .item { position: relative;
}
.lookbook .item .loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; pointer-events: none; transition: all .2s;
}
.lookbook .item .loading.in { opacity: 1; visibility: visible; pointer-events: auto;
}
.lookbook .item .loading span { width: 32px; height: 32px; position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: #fff; animation: loadingSpin 1s infinite linear;
}
@-webkit-keyframes loadingSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
@-moz-keyframes loadingSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
@-o-keyframes loadingSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
@keyframes loadingSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); }
}
#gallery-lookbook { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; opacity: 0; visibility: hidden; pointer-events: none;
}
#gallery-lookbook.in { opacity: 1; visibility: visible; pointer-events: auto;
}
#gallery-lookbook.in .image,
#gallery-lookbook.in .content { height: 100%;
}
#gallery-lookbook .gallery-close { color: #000; top: 30px; right: 30px; position: absolute; z-index: 1;
}
#gallery-lookbook .image,
#gallery-lookbook .content { position: absolute; height: 0; width: 50%; overflow: hidden; transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: .1s;
}
#gallery-lookbook .image.income { transform: translateY(-100%);
}
#gallery-lookbook .image.removed .subscale { transform: scale(1);
}
#gallery-lookbook .image.refresh { transform: translate3d(-100%, 0, 0);
}
#gallery-lookbook .image.refresh .mask { transform: translate3d(100%, 0, 0);
}
#gallery-lookbook .image.refresh .subscale { transform: scale(1.2);
}
#gallery-lookbook .image .mask { display: block; width: 100%; height: 100%; transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}
#gallery-lookbook .image .scale { overflow: hidden; width: 100%; transform: scale(1); transform-origin: 100% 0; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
#gallery-lookbook .image .subscale { height: 100%; transform: scale(1.1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
#gallery-lookbook .image img { width: 100%;
}
#gallery-lookbook .content { bottom: 0; right: 0; background: #fff;
}

Gallery - Script Codes JS Codes

(function($) { var $mdv = { progressiveLoading: { setup: function() { function _loadImage($item, $src) { var $image = new Image(); $image.src = $src; $image.onload = function() { $item.data('loaded', true); } } $('.lookbook .item a').each(function() { var $item = $(this).parent('.item'); var $src = $(this).attr('href'); _loadImage($item, $src); }); } }, sections: { lookbook: function() { var $lookbook = $('.lookbook'); var $gallery = $('#gallery-lookbook'); var $totItems = $('.lookbook .item a').length; var $current = 0; var $next = 0; function _loadImage($eq, $openGallery) { var $item = $lookbook.find('.item').eq($eq); var $image = new Image(); $image.src = $item.find('img').attr('src'); $image.onload = function() { $item.data('loaded', true); $item.addClass('loaded'); if ($openGallery) { $item.append('<div class="loading"><span></span></div>'); setTimeout(function() { $item.find('.loading').addClass('in'); }, 100); setTimeout(function() { _openGallery($eq); }, 1000); setTimeout(function(){ $item.find('.loading').removeClass('in'); }, 2000); } }; } function _predictActions($eq) { var $prev = $eq - 1; var $next = $eq + 1; if ($prev < 0) { $prev = $totItems - 1; } if ($next >= $totItems) { $next = 0; } _loadImage($prev); _loadImage($next); } function _openGallery($eq) { $current = $eq; _predictActions($eq); $gallery.addClass('in'); } function _galleryNav($dir){ var $src = 'http://www.unsplash.it/1200/2000'; $('.image').addClass('removed'); setTimeout(function(){ $('.image.removed').remove(); }, 1010); $gallery.append('<div class="image refresh"><div class="mask"><div class="scale"><div class="subscale"><img src="'+$img+'" /></div></div></div></div>'); setTimeout(function(){ $('.image').removeClass('refresh'); }, 10); } $lookbook.find('.item a').on('click', function() { var $item = $(this).parent('.item'); var $eq = $lookbook.find('.item').index($item); if ($item.data('loaded')) { _openGallery($eq); } else { _loadImage($eq, true); } return false; }); $gallery.find('.gallery-close').on('click', function() { $gallery.removeClass('in'); return false; }); $gallery.find('.gallery-nav a').on('click', function() { var $dir = $(this).attr('class'); _galleryNav($dir); return false; }); } } }; $mdv.sections.lookbook(); //$mdv.progressiveLoading.setup(); $('button').on('click', function() { $('.item').data('loaded', false); }); $('.item').eq(0).find('a').trigger('click');
})(jQuery);
Gallery - Script Codes
Gallery - Script Codes
Home Page Home
Developer Moreno Di Domenico
Username MorenoDiDomenico
Uploaded September 22, 2022
Rating 3
Size 4,360 Kb
Views 24,288
Do you need developer help for Gallery?

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!

Moreno Di Domenico (MorenoDiDomenico) Script Codes
Name
Animations
Orientation example
CSS3 Explode Menu
OwlCarousel
Canvas Wall
Wheel of Fortune
JQuery Hmbrgr Plugin
Bootstrap Clean Buttons
ScrollInView
A Pen by Moreno Di Domenico
Create amazing web content 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!