Photo Gallery

Developer
Alyssa
Size
5,908 Kb
Views
32,384
  1. Photo Gallery Previews
  2. Photo Gallery HTML Codes
  3. Photo Gallery CSS Codes
  4. Photo Gallery JS Codes

How do I make an photo gallery?

Created for Toyota's new microsite: Let's go Places: Brand Guidelines.To do: backbone. What is a photo gallery? How do you make a photo gallery? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Photo Gallery Previews
IQ Test

Photo Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Photo Gallery</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="gallery landscape"> <aside class="main"> <div class="media"> <div class="cover"></div> <div class="wrapper"> <div class="copy"> <p><%= copy %></p> </div> </div> </div> </aside> <main class="aside"> <div class="copy"> <h2 class="headline">The Prisoner <br>of Benda</h2> <p>Then throw her in the laundry room, which will hereafter be referred to as "the brig". What are their names? These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing where they are.</p> </div> </main>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Photo Gallery - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html, body { margin: 0; padding: 0;
}
html, body { height: 100%; overflow: hidden;
}
html { font-size: 62.5%;
}
body { font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-size: 14px; line-height: 1.42857; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased;
}
.wrapper { width: 100%; padding: 20px;
}
.landscape { position: relative; overflow: hidden; height: 100%;
}
.landscape .main, .landscape .aside { height: 100%;
}
.landscape .aside { padding: 20px; position: absolute; right: 0; top: 0; background: #fff;
}
.landscape .aside .headline { color: #d71f27; line-height: 38px;
}
.landscape .copy p { max-width: 250px;
}
.landscape .main { position: relative; width: 66.66667%;
}
.landscape .aside { width: 33.33333%;
}
.landscape .aside .copy { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
@media screen and (max-width: 940px) { .landscape .main { width: 100%; height: 65%; top: 5%; } .landscape .aside { width: 100%; height: 30%; top: 70%; } .landscape .aside .copy { width: 78%; } .landscape .aside .copy p { max-width: none; }
}
.landscape .media { position: absolute; width: 33.33333%; height: 50%; overflow: hidden; cursor: pointer; -webkit-transition: width 1.2s, z-index 1.56s; transition: width 1.2s, z-index 1.56s;
}
.landscape .media .wrapper { z-index: -1; position: absolute; top: 0; height: 100%; background-color: #d50128; opacity: 0; -webkit-transition: opacity 0.6s, left 1.2s, z-index 0s; transition: opacity 0.6s, left 1.2s, z-index 0s;
}
.landscape .media .copy { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-weight: bold; position: relative;
}
.landscape .media .copy:before { content: ""; display: block; position: absolute; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; right: -20px; border-left: 17px solid #d50128; -webkit-transition: right 1.2s; transition: right 1.2s; -webkit-transition-delay: 0.96s; transition-delay: 0.96s;
}
.landscape .media.active { z-index: 10;
}
.landscape .media.active .wrapper { z-index: 1; opacity: 1; -webkit-transition-delay: 0s, 0s, 1.2s; transition-delay: 0s, 0s, 1.2s;
}
.landscape .media.active .copy:before { right: -37px;
}
.landscape .media:nth-child(4), .landscape .media:nth-child(5), .landscape .media:nth-child(6) { top: 50%;
}
.landscape .media:nth-child(3n - 2) { width: 66.66667%;
}
.landscape .media:nth-child(3n - 2) .cover { position: relative;
}
.landscape .media:nth-child(3n - 2).active .wrapper { left: 0 !important;
}
.landscape .media:nth-child(3n - 1) .copy:before { left: -20px; border-left: 0; border-right: 17px solid #d50128; -webkit-transition: left 1.2s; transition: left 1.2s; -webkit-transition-delay: 0.96s; transition-delay: 0.96s;
}
.landscape .media:nth-child(3n - 1) .wrapper { left: 33.33333%;
}
.landscape .media:nth-child(3n - 1).active .wrapper { left: 66.66667%;
}
.landscape .media:nth-child(3n - 1).active .copy:before { left: -37px;
}
.landscape .media:nth-child(3n) { right: 0;
}
.landscape .media:nth-child(3n) .cover { position: absolute; right: 0;
}
.cover { height: 100%; background-repeat: no-repeat; background-size: cover;
}
.landscape .media.active { width: 100%;
}
.landscape .media:nth-child(3n - 2).active { width: 100%;
}
.desaturate { -webkit-filter: grayscale(88%) contrast(78%); filter: grayscale(88%) contrast(78%); opacity: .8;
}

Photo Gallery - Script Codes JS Codes

var content = [ { "position_x": "left", "position_y": "top", "image": "http://lorempixel.com/456/384/sports/3", "copy": "A true inspiration for the children." }, { "position_x": "center", "position_y": "top", "image": "http://lorempixel.com/456/384/sports/1", "copy": "Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars." }, { "position_x": "right", "position_y": "top", "image": "http://lorempixel.com/456/384/sports/5", "copy": "Doomsday Devices are dangerously unstable. I'll rest easier not knowing where they are. Now, now. Perfectly symmetrical violence never solved anything." }, { "position_x": "right", "position_y": "center", "image": "http://lorempixel.com/456/384/sports/6", "copy": "Why, those are the Grunka-Lunkas! They work here in the Slurm factory. With a warning label this big, you know they gotta be fun! We'll go deliver this crate like professionals, and then we'll go home." }, { "position_x": "center", "position_y": "center", "image": "http://lorempixel.com/456/384/sports/9", "copy": "Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man." }, { "position_x": "right", "position_y": "center", "image": "http://lorempixel.com/456/384/sports/7", "copy": "I never loved you. Why yes! Thanks for noticing. And why did 'I' have to take a cab?" }
]
var tmp = content;
// re-organize content for CSS layout purposes
content = _.sortBy(tmp, function(i,n){ return (n%3 === 0) ? n+.5 : n-1;
});
var template = $('.media')[0]
// console.log(template)
// console.log(template[0])
// console.log(typeof template)
// console.log(typeof template[0])
var compiled = _.template('<div class="media"><div class="cover"></div> <div class="wrapper"> <div class="copy"><p><%= copy %></p> </div></div> </div>');
//var compiled = _.template(template);
$('.main').empty();
_.each(content, function(media, index) { //console.log(media) var $el = $(compiled(media)) $el.find('.cover').css({ 'background-image': 'url('+media.image+')', 'background-position-x': media.position_x, 'background-position-y': media.position_y }) //console.log( $el ) $('.main').append( $el ) });
var scaleImage = function() { var getWidth = $('.main').width() * 2/3 $('.media:nth-child(3n-2) .cover').css('left', getWidth/2) $('.media:nth-child(3n-2) .wrapper').css('left', getWidth/3) $('.media .wrapper').css('width', getWidth/2) //landscape only $('.cover').css('width', getWidth)
}
var lazyScale = _.throttle(scaleImage, 300);
$(window).on("resize", lazyScale);
scaleImage();
var galleryClick = function(e) { if( $(e.target).hasClass('media') ) { var $this = $(e.target) } else { var $this = $(e.target).parents('.media') } //console.log( $this ) $this.siblings().removeClass('active').addClass('desaturate') $this.toggleClass('active') if( $this.hasClass('active') ) { $this.removeClass('desaturate') } else { $this.siblings().removeClass('desaturate') }
}
$('.media').click(galleryClick)
Photo Gallery - Script Codes
Photo Gallery - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 5,908 Kb
Views 32,384
Do you need developer help for Photo 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!

Alyssa (alyda) Script Codes
Name
ScrollMagic Reveal
Huddle Subway Map
Wire up a Backend
Evolve Media Gallery
Evolve Patterns
Evolve Navigation
Huddle Grid-Detail View
Evolve Game
Evolve Error Pages
Strava JS API
Create amazing captions 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!