Photo Gallery POC

Developer
Scott Dawson
Size
3,718 Kb
Views
10,120
  1. Photo Gallery POC Previews
  2. Photo Gallery POC HTML Codes
  3. Photo Gallery POC CSS Codes
  4. Photo Gallery POC JS Codes

How do I make an photo gallery poc?

Based on lynda.com iOS 4 Web Applications with HTML5 and CSS3. What is a photo gallery poc? How do you make a photo gallery poc? This script and codes were developed by Scott Dawson on 02 January 2023, Monday.

Photo Gallery POC Previews
IQ Test

Photo Gallery POC - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Photo Gallery POC</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="content" id="lightbox"> <ul class="l-grid"> <li> <img src="http://www.emoticakes.com/images/t135/801.jpg" src_hi="http://www.emoticakes.com/images/w/801.jpg" /> <p class="caption">caption here</p> </li> <li> <img src="http://www.emoticakes.com/images/t135/809.jpg" src_hi="http://www.emoticakes.com/images/w/809.jpg" /> <p class="caption">caption here</p> </li> <li> <img src="http://www.emoticakes.com/images/t135/812.jpg" src_hi="http://www.emoticakes.com/images/w/812.jpg" /> <p class="caption">caption here</p> </li> </ul> <div id="overlay"></div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Photo Gallery POC - Script Codes CSS Codes

body { background-color: #232323;
}
#overlay { background-color: #000; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -webkit-perspective: 250; -moz-perspective: 250; -ms-perspective: 250; perspective: 250;
}
#overlay.fadein { opacity: 1; z-index: 30;
}
#overlay.fadeout { opacity: 0; z-index: 5;
}
#overlay img { -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; -webkit-transform: scale(0) translateZ(-1000px) rotateY(180deg) translateZ(1000px); -moz-transform: scale(0) translateZ(-1000px) rotateY(180deg) translateZ(1000px); -ms-transform: scale(0) translateZ(-1000px) rotateY(180deg) translateZ(1000px); -o-transform: scale(0) translateZ(-1000px) rotateY(180deg) translateZ(1000px); opacity: 0; width: 100%;
}
#overlay img.show_me { -webkit-transform: scale(1) translateZ(0) rotateY(0deg) translateZ(0); -moz-transform: scale(1) translateZ(0) rotateY(0deg) translateZ(0); -ms-transform: scale(1) translateZ(0) rotateY(0deg) translateZ(0); -o-transform: scale(1) translateZ(0) rotateY(0deg) translateZ(0); opacity: 1;
}
#overlay img.hide_me { -webkit-transform-origin: top right center; -moz-transform-origin: top right center; -ms-transform-origin: top right center; -o-transform-origin: top right center; -webkit-transform: scale(0.1) rotateY(-90deg) translateZ(1000px); -moz-transform: scale(0.1) rotateY(-90deg) translateZ(1000px); -ms-transform: scale(0.1) rotateY(-90deg) translateZ(1000px); -o-transform: scale(0.1) rotateY(-90deg) translateZ(1000px); opacity: 0.5;
}
.content { width: 100%; text-align: center;
}
.l-grid { margin: 0; padding: 0; list-style-type: none;
}
.l-grid > li { display: inline-block; margin: 0 0 10px 10px; /* ie7 hack */ *display: inline; *zoom: 1;
}
#lightbox ul { list-style: none; margin: 0; padding: 10px; z-index: 10; position: absolute;
}
#lightbox ul p.caption { margin: 0; font: 1em/1.1em Georgia; color: #fff; text-shadow: 0 1px 0 #000;
}
#lightbox ul img { -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;
}
#lightbox ul li:hover { cursor: pointer;
}

Photo Gallery POC - Script Codes JS Codes

$(function() { $("#lightbox li").click(function() { showImage($("img", this).attr("src_hi")); });
});
function showImage(src_hi) { // get list of all src_hi of the images var src_hi_array = []; $("#lightbox img").each(function(){ src_hi_array.push($(this).attr("src_hi")); }); var listid = 0; var items_in_list = src_hi_array.length; for (i=0; i<items_in_list; i++) { if (src_hi_array[i] == src_hi) { listid = i; break; } } // create image element and add $("#overlay").empty().removeClass(); $('<img />', { 'src': src_hi }).appendTo('#overlay'); // fade it in $("#overlay").addClass("fadein"); // apply the showing tag to show the image (fade in) window.setTimeout(function() { $("#overlay img").addClass("show_me"); }, 200); // now, let's bind the click to cycle through all of the images $("#overlay img").click(function() { $("#overlay img").addClass("hide_me").delay(200).queue(function() { $("#overlay").empty().removeClass().addClass("fadeout"); if (listid < (items_in_list-1)) { showImage(src_hi_array[listid+1]); } else { showImage(src_hi_array[0]); } }); }); // for closing the overlay //$("#overlay").click(function() { // $("#overlay img").addClass("hide_me").delay(200).queue(function() { // $("#overlay").empty().removeClass().addClass("fadeout"); // }); //});
}
Photo Gallery POC - Script Codes
Photo Gallery POC - Script Codes
Home Page Home
Developer Scott Dawson
Username DawsonMediaD
Uploaded January 02, 2023
Rating 3
Size 3,718 Kb
Views 10,120
Do you need developer help for Photo Gallery POC?

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!

Scott Dawson (DawsonMediaD) Script Codes
Name
Beveled corners using CSS border attribute
SCSS is More
Testing Pesky IE8 and Font Awesome
LESS is More
Simple CSS for Disabled Buttons
Rock Paper Scissors
Floating Footer Notification
Fading Message Notification
Problem with Chrome Row Hover
Dot Matrix
Create amazing sales emails 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!