Flex Box Image Gallery

flex-box-image-gallery.markdown

Flex Box Image Gallery

A Pen by Karl on CodePen.

License.

index.pug

div.controls
	span.wide.info Source URL
	span.mini
		button X
	span.mini
		button Y
	span.mini.sort-switch
		button Sort Reverse
div.flex
	div.left
		button.left-inside.arrow-left ⇜
		img.left-inside.main-img(src="http://via.placeholder.com/150x150/405798/fff?text=?")
		button.left-inside.arrow-right ⇝
	div.right
		img.right-inside(src="http://via.placeholder.com/50x50/405798/fff?text=1")
		img.right-inside(src="http://via.placeholder.com/50x50/405798/fff?text=2")
		img.right-inside(src="http://via.placeholder.com/50x50/405798/fff?text=3")
		img.right-inside(src="http://via.placeholder.com/50x50/405798/fff?text=4")

script.js

var isRev = 0;
var direction;

/** triggers **/
/* sort direction button clicked */
$(".sort-switch").click(function() {
	$(".flex").toggleClass("reverse-order");
	isRev = !isRev;
});

/* arrow button clicked */
$(".left button").click(function() {
	var arrowButton = $(this);
	checkDirection(arrowButton);
	if (direction === "prev") {
		if (isRev) {
			nextImg();
		} else {
			prevImg();
		}
	} else if (direction === "next") {
		if (isRev) {
			prevImg();
		} else {
			nextImg();
		}
	}
});

/* thumbnail clicked */
$(".right-inside").click(function() {
	$(".highlight").removeClass("highlight");
	$(this).addClass("highlight");
	updateMainImg();
});

/** functions **/
function checkDirection(btn) {
	switch (btn.hasClass("arrow-left")) {
		case true:
			direction = "prev";
			break;
		case false:
			direction = "next";
			goLeft = 0;
	}
}

function prevImg() {
	//a thumbnail is highlighted
	if ($(".highlight").length >= 1) {
		//first child highlighted
		if ($(".highlight").is(":first-child")) {
			$(".highlight").removeClass("highlight");
			$(".right-inside:last-child").addClass("highlight");
			console.log("Wrap to last.");
			updateMainImg();
		} else {
			//first child not highlighted
			$(".highlight")
				.removeClass("highlight")
				.prev()
				.addClass("highlight");
			console.log("<< Prev");
			updateMainImg();
		}
		//no thumbnail is highlighted
	} else {
		$(".right-inside:last-child").addClass("highlight");
		console.log("Start at bottom.");
		updateMainImg();
	}
}

function nextImg() {
	if ($(".highlight").length >= 1) {
		//a thumbnail is highlighted
		if ($(".highlight").is(":last-child")) {
			//last child highlighted
			$(".highlight").removeClass("highlight");
			$(".right-inside:first-child").addClass("highlight");
			console.log("Wrap to first.");
			updateMainImg();
		} else {
			//first child not highlighted
			$(".highlight")
				.removeClass("highlight")
				.next()
				.addClass("highlight");
			console.log("Next >>");
			updateMainImg();
		}
	} else {
		//no thumbnail is highlighted
		$(".right-inside:first-child").addClass("highlight");
		console.log("Start at top.");
		updateMainImg();
	}
}

function updateMainImg() {
	var activeThumbnail = $(".highlight");
	var activeSrc = activeThumbnail.attr("src");
	var mainImg = $(".main-img");
	//simulate switching out for a new image
	mainImg.attr("src", activeSrc.replace("50x50", "150x150"));
	var imgData = {
		src: activeSrc,
		width: mainImg.width(),
		height: mainImg.height(),
		index: $("img.right-inside").index(activeThumbnail) + 1
	};
	updateInfo(imgData);
}

function updateInfo(data) {
	var infoText = "";
	$.each(data, function(name, value) {
		infoText += name + ": " + value + "<br />";
	});
	$(".info").html(infoText.split("<")[0]);
}

// TO DO LIST
//   non looping mode, disable button when end is reached
//   better thumbnail change animation
//   updated main image size change animation
// ☑ reverse sort order button
//   fit width/height options
//   stretch to fit option
//   no thumbnails option
// ☑ show image index
// ☑ show image filename

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

body {
	background: #121214;
	color: white;
	font-family:monospace;
}
.flex {
	height: calc(100vh - 2em);
	width: 100vw;
	display: flex;
}
.controls {
	width:calc(100% - 150px);
	height:2em;
	display:flex;
	line-height:2em;
	justify-content:flex-end;
}
.controls span {
	background:#343436;
	text-align:center;
}
.controls .mini {
	margin-left:1vw;
	flex: 0 0 auto;
	min-width:2em;
}

.controls span:first-child {
	flex:1 1 auto;
}
.left, .right {
	display:flex;
	justify-content: center;
	align-items: center;
}
.left {
	flex: 1 1 auto;
	justify-content:space-between;
}
.right {
	flex: 0 0 150px;
	flex-direction: column;
}
.highlight {
	transform: scale(1.2);
}
.right-inside {
	transition: all 200ms ease;
}
.arrow-left, .arrow-right {
	font-size:2em;
	border:none;
	line-height:1;
	background:none;
	padding:.5em;
	color:white;
}
button:active, button:focus {
	color:#ccc;
	outline:none;
}

.red {
	box-shadow:0 0 0 1px red;
}
.left {
	border-right:1px solid #343436;
	border-top:1px solid #343436;
}
.reverse-order .right {
	flex-direction:column-reverse;
}
.info {
	white-space:pre;
}