Unsplash.it image viewer

Developer
Xavier Porter
Size
2,500 Kb
Views
36,432
  1. Unsplash.it image viewer Previews
  2. Unsplash.it image viewer HTML Codes
  3. Unsplash.it image viewer CSS Codes
  4. Unsplash.it image viewer JS Codes

How do I make an unsplash.it image viewer?

Forked from Mathieu Delestre's Pen unsplash.it image viewer.. What is a unsplash.it image viewer? How do you make a unsplash.it image viewer? This script and codes were developed by Xavier Porter on 27 October 2022, Thursday.

Unsplash.it image viewer Previews
IQ Test

Unsplash.it image viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>unsplash.it image viewer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title"><a href="https://Unsplash.it">Unsplash.it</a> image viewer</h1>
<p><a href="https://Unsplash.it">Unsplash.it</a> is a handy placeholder website using <a href="https://unsplash.com/">Unsplash</a> photos collections</p>
<p>Your can choose a specific image by using numeric id <i>https://unsplash.it/200/300?image=x</i></p>
<p>Edit : Unsplash.it provide a similar pages <a href="https://unsplash.it/images">https://unsplash.it/images</a></p>
<div class="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Unsplash.it image viewer - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body { text-align:center; padding:5px 0; margin:0;background: #333; font-family: 'Open Sans'; color:#999; }
.title { color: #999; font-weight: normal; font-size: 24px;}
.title a { color: #fff; text-decoration:none; font-size: 36px;}
a { color: #00cfff; }
.container { font-size: 0; }
.img { position:relative; display:inline-block;font-size: 0; margin: 5px; box-shadow: 0 0 2px 0 #000;}
.img>span { position:absolute; top:0; left:0; background: rgba(0,0,0,0.5); color:#fff; font-size: 20px; padding: 10px;}

Unsplash.it image viewer - Script Codes JS Codes

$.getJSON('https://unsplash.it/list',function(data){ for(var i=data.length-1; i>=0; i--) $('.container').append('<span class="img"><span>'+i+'</span><img width="160" height="120" data-lazy-src="https://unsplash.it/160/120?image='+i+'" src="http://placehold.it/300&text=loading..."/></span>'); lazyload();
});
var lazyloadTimeout = null;
$(window).on('scroll.lazyload',function(){ clearTimeout(lazyloadTimeout); lazyloadTimeout = setTimeout(lazyload,500);
}).trigger('scroll.lazyload');
function lazyload(){ $('img[data-lazy-src]:visible').each(function(){ var t = $(this);	if(	t.offset().top < $(window).scrollTop()+$(window).height()	&&	t.offset().top + t.height() > $(window).scrollTop()	){	t.attr('src',t.data('lazy-src')).removeData('lazy-src'); } });
};
Unsplash.it image viewer - Script Codes
Unsplash.it image viewer - Script Codes
Home Page Home
Developer Xavier Porter
Username xporter
Uploaded October 27, 2022
Rating 3
Size 2,500 Kb
Views 36,432
Do you need developer help for Unsplash.it image viewer?

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!

Xavier Porter (xporter) Script Codes
Name
Style tiles with SCSS
Spotlight Solution 1
Transforms examples
Foundation 5 Menu - Accessibility
A Pen by Xavier Porter
Quote Styling
Restarting Counter-Reset
Create amazing love letters 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!