<ul class="menu js-thumbs">
</ul>
<div class="gallery">
<div class="gallery__info">
</div>
<div class="gallery__theme js-theme-bg">
<span class="js-theme">
<img>
</span>
</div>
<div class="gallery__large">
<img class="js-image loading" id="main">
<div class="gallery__credit">Photo by <span class="js-credit"></span></div>
</div>
</div>
$layout-menu-x = 150px
$bg = #111
*
box-sizing: border-box
body, html
width: 100%
height: 100%
background: $bg
padding: 0
margin: 0
font-family: 'arial'
.menu
position: absolute
top: 0
left: 0
width: $layout-menu-x
height: 100%
background: $bg
background: #111
overflow: scroll
list-style: none
padding: 20px 0
margin: 0
text-align: center
z-index: 1
li
display: inline-block
margin-bottom: 20px
opacity: 0.3
transition: opacity 400ms
cursor: pointer
&:hover
opacity: 1
transition: opacity 200ms
&:last-child
margin-bottom: 0
&.active
opacity: 1
cursor: default
img
max-width: 80%
max-height: 140px
.gallery
position: absolute
left: $layout-menu-x
right: 0
top: 0
bottom: 0
margin: auto
.gallery__theme
position: absolute
top: 0
right: 0
bottom: 0
left: 0
margin: auto
opacity: 0.5
overflow: hidden
transition: opacity 400ms
&.loading
opacity: 0
span
display: block
position: absolute
top: -20px
right: -20px
bottom: -20px
left: -20px
background-size: cover
opacity: 0.6
&.loading img
opacity: 0.1
img
display: block
top: -10px
right: -10px // Avoid blur underlap.
bottom: -10px
left: -10px
margin: auto
min-width: 110%
background-blend-mode: multiply
min-height: 110%
mix-blend-mode: multiply
filter: blur(5px)
.gallery__credit
position: absolute
right: 0
bottom: 0
padding: 20px 30px
color: #fff
font-size: 12px
opacity: 0.3
transition: opacity 0.6s
a
color: #fff
text-decoration: underline
.gallery__info
position: absolute
right: 30px
top: 30px
color: white
font-size: 13px
.gallery__large
img
position: absolute
display: block
top: 0
right: 0
bottom: 0
left: 0
margin: auto
max-width: 80%
max-height: 80%
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5)
transition: opacity 0.4s
&.loading
opacity: 0
+ .gallery__credit
opacity: 0
View Compiled
URL_DATA = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/unsplash-photos.json'
URL_BASE = 'https://images.unsplash.com/photo-'
URL_EXT_LG = '?w=1000'
URL_EXT_TH = '?w=300'
TRANSITION_DUR = 400
images = null
$thumbs = null
$mainImage = null
$themeImage = null
$themeBg = null
$user = null
renderThumbs = ->
for val in images
url = val.urls.small
$thumbs.append '<li><img src="' + url + '"></li>'
$thumbs.find('img').on('click', ->
if $(this).parent().hasClass 'active' then return
setImage($(this).parent().index())
)
setImage = (i = 0) ->
image = images[i]
loadMainImage image
loadThemeImage image
updateThumbs i
updateCredit image.user
$themeBg.css('background', image.color)
updateThumbs = (i) ->
$thumbs.children().removeClass 'active'
$thumbs.children().eq(i).addClass 'active'
updateCredit = (user) ->
setTimeout ->
$user.html """<a href="#{user.links.html}" target="_blank">#{user.name}</a>"""
, TRANSITION_DUR, user
loadThemeImage = (image) ->
$themeImage.css('backgroundColor', image.color)
$themeImage.addClass 'loading'
setTimeout ->
$themeImage.children('img').attr('src', image.urls.regular)
setTimeout ->
$themeImage.removeClass 'loading'
, TRANSITION_DUR
, TRANSITION_DUR, image
loadMainImage = (image) ->
$mainImage.addClass 'loading'
setTimeout ->
$mainImage.attr 'src', image.urls.regular
$mainImage.on 'load', ->
setTimeout ->
$mainImage.removeClass 'loading'
, TRANSITION_DUR
, TRANSITION_DUR
init = ->
$thumbs = $('.js-thumbs')
$mainImage = $('.js-image')
$themeImage = $('.js-theme')
$themeBg = $('.js-theme-bg')
$user = $('.js-credit')
$.getJSON URL_DATA, (data) ->
images = data
renderThumbs()
setImage()
$(document).ready ->
init()
View Compiled
This Pen doesn't use any external CSS resources.