A Different Type of Gallery
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 - 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); }
}
Developer | Don Page |
Username | DonPage |
Uploaded | July 18, 2022 |
Rating | 3 |
Size | 2,950 Kb |
Views | 36,432 |
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 |
FadeIn | 1,640 Kb |
Ember Repeat | 1,554 Kb |
HTML5 SVG Animations | 1,795 Kb |
Off Canvas Nav | 3,187 Kb |
Uncheck box with angular | 1,540 Kb |
Edit Profile with Angular | 5,497 Kb |
A Pen by Don Page | 1,420 Kb |
Social Media Elements | 2,745 Kb |
Input Form Visual Validation | 2,070 Kb |
WordBreaks | 1,975 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 Linear Regression with Editable Table | Melatonind | 3,264 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
AngularJS Skills | Supro | 3,312 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 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!