A Different Type of Gallery

Developer
Don Page
Size
2,950 Kb
Views
36,432
  1. A Different Type of Gallery Previews
  2. A Different Type of Gallery HTML Codes
  3. A Different Type of Gallery CSS Codes
  4. A Different Type of Gallery JS Codes

How do I make an a different type of gallery?

I wanted to showcase a gallery of images coming from your browser in a different way. . What is a a different type of gallery? How do you make a a different type of gallery? This script and codes were developed by Don Page on 18 July 2022, Monday.

A Different Type of Gallery Previews
IQ Test

A Different Type of Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Different Type of Gallery</title> <head lang="en"> <meta charset="utf-8"/> <title>New Gallery</title> <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
</head> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <header id="top"> <h1>A <b>Different</b> Type of Gallery</h1><span>all images from <a href="http://www.reddit.com/r/Cinemagraphs/top/">/r/Cinemagraphs</a></span>
</header>
<div class="gallery-wrapper"> <article class="box"> <h2>Storm</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/XN99SD9.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>Rat</h2> <div class="img-content"> <div class="inner"> <img src="http://d2tq98mqfjyz2l.cloudfront.net/image_cache/1388610298653302_animate.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>Agatha</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/KsuRErV.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>A rather lovely thing</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/Ylu5niB.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>Relaxing</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/A8l9lDc.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>He loves me not...</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/dSpzF.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article> <article class="box"> <h2>Come git some</h2> <div class="img-content"> <div class="inner"> <img src="http://i.imgur.com/gOZSs.gif" alt="image title"> </div> <div class="shadow"></div> </div> </article>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Different Type of Gallery - Script Codes CSS Codes

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'EB Garamond', helveticaneue, "Helvetica Neue", helvetica, sans-serif; background: #fafafa; font-size: 14px; line-height: 1.5em; width: 100%; height: auto; overflow-x: hidden; overflow-y: scroll;
}
header{ font-size: 15px; width: 100%; text-align: center; position: fixed; z-index: 1;
}
span, a{ font-size: 20px; color: gray;
}
b{ font-weight: bold;
}
a{ text-decoration: none; border-bottom: 1px gray solid;
}
.gallery-wrapper{ text-align: center; margin: 7em 0 8em 0;
}
.gallery-wrapper:before, .gallery-wrapper:after{ content: ""; display: table;
}
article{ width: auto; opacity: 1; transition: all 300ms ease-out 900ms; -webkit-transition: all 300ms ease-out 900ms;
}
article h2{ position: relative; z-index: 25; text-shadow: 4px 4px 7px rgba(150, 150, 150, 1);
}
.box{ margin: 2%; padding: 0; position: relative; text-align: left; display: inline-block; vertical-align: middle;
}
.inner{ position: relative; z-index: 1200; overflow:hidden;
}
img{ border: 0; vertical-align: middle; width: auto; height: auto; max-width: 610px; max-height: 100%;
}
.shadow{ overflow: hidden; margin-top: 2%; margin-left: 5%; border: 0; background: url(http://i.imgur.com/HXIIYF8.png) repeat; background-size: 100% 100%; width: 110%; height: 115%; position: absolute; z-index: 10; top: -1px; left: -10px;
}
.shadow:before{ position: absolute; z-index: 20; top:0; left:0; width: 100%; height: 100%; content:' '; background: url(http://i.imgur.com/rJjQiAm.png) repeat; display: block;
}

A Different Type of Gallery - Script Codes JS Codes

(function () { $(window).bind('scroll', function(e){ scrolling(); })
})();
function scrolling(){ var windowHeight = $(window).height(); var topPage = $(window).scrollTop(); var botPage = $(document).height(); var adding = (topPage + windowHeight); if ( adding >= botPage){ $('#top').animate({top: '80%'}); // $('#top').css('top',85+'%'); } else { $('#top').css('top',(topPage *.2)+'px'); // $('#top').animate({ top: ((topPage *.65))+'px' }, 100); }
}
A Different Type of Gallery - Script Codes
A Different Type of Gallery - Script Codes
Home Page Home
Developer Don Page
Username DonPage
Uploaded July 18, 2022
Rating 3
Size 2,950 Kb
Views 36,432
Do you need developer help for A Different Type of 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!

Don Page (DonPage) Script Codes
Name
FadeIn
Ember Basics
WordBreaks
Typescript Variables
A Pen by Don Page
HTML5 SVG Animations
Social Media Elements
Uncheck box with angular
Angular image test
Angular Pen Embed
Create amazing SEO 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!