Imgbrowser.vue

<template lang="jade">
	#image-browser
		h1 image search
		input(v-model="searchInput" @keyup.enter="fetchImages")
		#gallery
			img(
				v-for='image in images'
				:src='image.thumb'
				@click='openModal(image.photo)'
			)

		#current-image
			img(
				v-if='theaterMode'
				:src='currentPhoto'
				transition='switch'
				transition-mode="out-in"
			)

</template>

<script>
import qs from 'qs'
export default {
	data: () => ({
		searchInput: '',
		images: [],
		theaterMode: false,
		currentPhoto: ''
	}),
	methods: {
		fetchImages() {
			this.images = [];
			var params = {
				consumer_key: '7wnz6CPPXTMwpCdJcSk5cD3DP9qqaTAOkJ2CRp5f',
				term: this.searchInput,
				image_size: '2,4'
			}
			var url = `https://api.500px.com/v1/photos/search?${qs.stringify(params)}`;

			this.$http.get(url, function(res){
				this.images = res.photos.map((photo, id) =>({
					thumb: photo.images[0].https_url,
					photo: photo.images[1].https_url,
					id: id
				}));
			});
		},
		openModal(url) {
			this.theaterMode = true;
			this.currentPhoto = url;
		}
	}
}
</script>

<style lang="stylus">
#image-browser
	text-align: center
	margin: 10% 0 0

	#gallery
		margin: 3% 0 3%

	h1
		margin: 0
		color: #E8DEE3
		font-size: 4em

	input
		margin-top: 2%
		border: 1px solid #C9C9C9
		height: 30px
		transition: width 1s ease
		width: 200px
		border-radius: 15px
		height: 30px
		font-size: 1.5em
		padding: 10px
		box-shadow: 0px 18px 52px -16px rgba(0,0,0,0.19)

		&:focus
			outline: none
			width: 300px

.switch-transition
	transition: all .3s ease

.switch-enter
	transform: translateX(50%)
	opacity: 0

.switch-leave
	transform: translateX(-50%)
	opacity: 0
</style>