Mobile Listing JS Template

index.html

<script id="template-listing" type="text/template"><div class="pro"><a class="property-link" href="{{ permalink }}"><div class="thumbnails owl-carousel owl-theme"><div class="item"><img src="{{ thumb1 }}"></div><div class="item"><img src="{{ thumb2 }}"></div><div class="item"><img src="{{ thumb3 }}"></div></div><span class="heading-frame"><h3 class="property-title">{{ StreetNumber }} {{ StreetName }}, {{ City }}, {{ State }} {{ PostalCode }}</h3><span class="price overlay br">{{ ListPrice }}</span><span class="city overlay bl hide-medium">{{ City }}, {{ State }}</span></span>{{ DaysSinceListed }}<span class="prop-content details">{{ Bed }} Bed <span class="separator">~</span> {{ Bath }} Bath <span class="separator">~</span> {{ Acres }} acres<br>{{ PropertyType }} <span class="separator">~</span> {{ County }} County</span><div class="prop-content"><div class="desc collapse">{{ Description }}</div></a><button type="button" class="btn btn-default btn-danger btn-bg read-more hide-medium" data-target=".desc" data-toggle="collapse">Expand</button><div class="action-items">{{ VideoButton }}<a href="#frminquiry" class="contact btn btn-default btn-danger btn-bg">Contact Agent</a><a href="#print-flyer" class="print-flyer btn btn-default btn-danger btn-bg btn-half-sm">Print Flyer</a><a href="#share" class="share btn btn-default btn-danger btn-bg btn-half-sm">Share</a></div></div></div>
</script>
<script>
var listing = [];
listing['permalink'] = '#listing';
listing['thumb1']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-1.jpg';
listing['thumb2']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-2.jpg';
listing['thumb3']='https://homeandranchrealestate.com/wp-content/uploads/mls_photos/image-large-7634005-3.jpg';
listing['StreetNumber']='5721';
listing['StreetName']='CR 378';
listing['City']='Caldwell';
listing['State']='TX';
listing['PostalCode']='77836';
listing['ListPrice']='$645,000';
listing['DaysSinceListed']='<span class="list-date overlay tr">Listed 3 days ago</span>';
listing['Bed']='3';
listing['Bath']='2';
listing['Acres']='3.248';
listing['PropertyType']='Residential';
listing['County']='Burleson';
listing['Description']='Introducing PIN OAK ESTATES! One of Burleson County\'s newest HOME SITE subdivisions just 8 miles north of Caldwell, water lines in place, boundary lines open, electric to each site, towering trees, small open areas, paved frontage, light rural restrictions, and a beautiful setting awaits your dream home! Multiple home sites available ranging from 2 acres to 16 acres.';
listing['VideoButton']='<a href="#video" class="video btn btn-default btn-danger btn-bg">Video</a>';
</script>
<div class="content"></div>

mobile-listing-js-template.markdown

Mobile Listing JS Template

A Pen by Zach Watkins on CodePen.

License.

script.js

// Process template content.
var template_string = document.querySelector('#template-listing').innerHTML;
var listing_html = template_string.replace('{{ permalink }}', listing['permalink']).replace('{{ thumb1 }}', listing['thumb1']).replace('{{ thumb2 }}', listing['thumb2']).replace('{{ thumb3 }}', listing['thumb3']).replace('{{ StreetNumber }}', listing['StreetNumber']).replace('{{ StreetName }}', listing['StreetName']).replace(/{{ City }}/g, listing['City']).replace(/{{ State }}/g, listing['State']).replace(/{{ PostalCode }}/g, listing['PostalCode']).replace('{{ ListPrice }}', listing['ListPrice']).replace('{{ DaysSinceListed }}', listing['DaysSinceListed']).replace('{{ Bed }}', listing['Bed']).replace('{{ Bath }}', listing['Bath']).replace('{{ Acres }}', listing['Acres']).replace('{{ PropertyType }}', listing['PropertyType']).replace('{{ County }}', listing['County']).replace('{{ Description }}', listing['Description']).replace('{{ VideoButton }}', listing['VideoButton']);
document.querySelector('.content').innerHTML = listing_html;
// Attach event handlers.
document.querySelector('.read-more').addEventListener('click', function(e){
	var selector = this.getAttribute('data-target');
	var cname = this.getAttribute('data-toggle');
	jQuery(selector).toggleClass(cname);
});

jQuery('.thumbnails').owlCarousel({
	items: 1,
	loop: true,
	dots: false,
	nav: true,
	navContainer: '.thumbnails'
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

style.scss

a {
	text-decoration: none;
	color: #000;
	
	&:hover,
	&:active {
		text-decoration: underline;
	}
}

.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.btn-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}
.btn-bg {
	background: #5f2a2a;
	border-color: #5f2a2a;
}

body {
	background: #000;
	padding: 0;
	margin: 0;
	font-size: 16pt;
}

.content {
	background: #e4ded2;
	margin: 0 auto;
	padding: 1rem;
	box-sizing: border-box;
}

.pro {
	background: #fff;
	border: 2px solid #000;
	font-size: 4vw;
	position: relative;
	
	button.btn {
		font: inherit;
		width: 100%;
		line-height: 1.5;
	}
	
	.btn {
		display: block;
		text-align: center;
		font-size: 1em;
		line-height: 1.5;
		padding: .4rem;
		cursor: pointer;
		text-transform: uppercase;
	}
	
	.action-items,
	.btn + .btn {
		margin-top: .5rem;
	}

	.content {
		max-width: 768px;
		margin: 0 auto;
		padding: 1rem;
		box-sizing: border-box;
	}

	.property-link {
		text-decoration: none;
	}

	.heading-frame {
		position: relative;
		display: block;
		
	}

	.heading-frame h3 {
		line-height: 1;
		padding: 0.75rem;
		text-align: center;
		font-size: 1.25em;
		margin: 0;
		color: #FFF;
		border-bottom: 2px solid #000;
		background-color: #a7c1cd;
		text-shadow: 0 1px 3px #000,0 1px 1px #000,0 1px 1px #000, 0 0 1px #000;
		/* 	text-shadow: 0 0 1px #333,0 0 1px #333,0 0 1px #333,0 0 1px #333,0 0 2px #333,0 0 2px #333,0 0 2px #333; */
	}
	
	.thumbnails {
	position:relative;
		.owl-prev,
		.owl-next {position:absolute;top:50%;font-size:40px;transform:translateY(-50%);color:white;background-color:rgba(0,0,0,0.5);display:none;z-index:2;
		}
.owl-prev{left:0;}
		.owl-next {right:1rem;}
	}

	img {
		width: 100%;
		margin: 0;
		display: block;
	}

	.separator {
		font-weight: bold;
		display: inline-block;
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	.property-link {
		position: relative;
		display: block;
	}

	.prop-content {
		padding: 1rem;
		display: block;
		
		&.details {
			text-align: center;
			font-weight: bold;
		}
	}
	
	a + .prop-content {
		padding-top: 0;
	}

	.text-center {
		text-align: center;
	}

	.desc {
		position: relative;
		padding-bottom: 1rem;
	}
	
	@media screen and (min-width: 560px) {
		$xy-padding: 4%;
		
		font-size: 23px;
		
		.heading-frame h3 {
			padding: $xy-padding / 1.5 $xy-padding;
		}
		
		.property-link .overlay:not(.tr) {
			padding: {
				left: $xy-padding;
				right: $xy-padding;
			}
		}
		
		.prop-content {
			padding: $xy-padding;
		}
	}
	@media screen and (max-width: 767px) {
		
		.btn-half-sm {
			display: inline-block;
			width: calc(50% - 1.173rem);
			margin-right: .25rem;
			
			+ .btn-half-sm {
				margin-left: .25rem;
				margin-right: 0;
			}
		}
		.desc {
			overflow: hidden;

			&.collapse {
				height: 4em;
				
				&::after {
					content: "";
					background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}
		}

		.property-link .overlay {
			color: #fff;
			background-color: rgba(0, 0, 0, 0.8);
			padding: 0.75rem;
			font-size: 1.125em;
			line-height: 1;
			position: absolute;
			z-index: 2;
			text-decoration: none;
			text-shadow: 2px 2px 1px #000, 2px 0 1px #000, 2px -2px 1px #000,
				0 -2px 1px #000, -2px -2px 1px #000, -2px 0 1px #000, -2px 2px 1px #000,
				0 2px 1px #000;
		}

		.property-link .bl {
			bottom: 100%;
			left: 0;
			right: 0;
		}

		.property-link .br {
			bottom: 100%;
			right: 0;
			z-index: 3;
			background: transparent;
		}

		.property-link .tr {
			top: 0;
			right: 0;
			text-align: right;
			font-size: 0.875em;
			padding: .5rem;
		}
	}
	@media screen and (min-width:768px) {
		$xy-padding: 1rem;
		font-size: 21px;
		padding-top: 50px;
		clear: both;
		
		&::after {
			content: "";
			display: block;
			clear: both;
		}
		
		.hide-medium {
			display: none;
		}
		
		.heading-frame {
			position: static;
			
			h3 {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				box-sizing: border-box;
				padding: 0 $xy-padding;
				margin-bottom: $xy-padding;
				height: 50px;
				line-height: 50px;
			}
		}
		
		.property-link {
			position: static;
			
			.overlay.br,
			.overlay.tr,
			.prop-content {
				box-sizing: border-box;
				display: inline-block;
				width: 67%;
				padding: 0 $xy-padding 0 0;
			}
			
			.overlay.tr {
				font-style: italic;
			}
		
			.prop-content {
				text-align: left;
			}
		}
		
		.prop-content {
			padding: $xy-padding;
		}
		
		.thumbnails,
		.heading-frame {
			float: left;
		}
		
		.thumbnails {
			display: inline-block;
			width: 33%;
			position: relative;
			padding: 0 $xy-padding $xy-padding 0;
			box-sizing: border-box;
			
			.owl-stage-outer {
				border: 2px solid black;
				border-width: 0 2px 2px 0;
				// height:140px;
			}
			
			.owl-prev,
			.owl-next {
				display: block;
			}
			
			img {
				width: 100%;
				box-sizing: border-box;
			}
		}
		
		.heading-frame {
			width: 67%;
		}
		
		.price {
			font-size: 1.5em;
			font-weight: bold;
			margin-top: 1rem;
		}
		
		.action-items {
			text-align: right;
			
			a.btn {
				display: inline-block;
				&:not(.contact) {
					padding: .5rem .7rem;
					line-height: 1;
				}
			
				~ a.btn {
					margin: 0 0 0 .5rem;
				}
			}
		}

		.contact.btn {
			position: absolute;
			right: 16px;
			top: 66px;
			margin: 0;
		}
	}
}

styles

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />