Image Thumb Preview

Posted on : 26th April 2022 | Author : @ByDev24


						<div class="gallery-container">
	<table width="90%" align="center" cellpadding="5">
		<tbody><tr>
			<td>
				<a href="/uploads/code-snippts/thumb1.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb1.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb2.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb2.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb3.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb3.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb4.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb4.jpg" alt="thumb">
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="/uploads/code-snippts/thumb5.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb5.jpg" alt="thumb">
				</a>
			</td>
			<td rowspan="2" colspan="2">
				<img src="/uploads/code-snippts/thumb1.jpg" alt="thumb" id="image-preview">
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb6.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb6.jpg" alt="thumb">
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="/uploads/code-snippts/thumb7.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb7.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb8.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb8.jpg" alt="thumb">
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="/uploads/code-snippts/thumb9.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb9.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb10.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb10.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb11.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb11.jpg" alt="thumb">
				</a>
			</td>
			<td>
				<a href="/uploads/code-snippts/thumb12.jpg" onclick="OpenImage(event)">
					<img src="/uploads/code-snippts/thumb12.jpg" alt="thumb">
				</a>
			</td>
		</tr>
	</tbody></table>
</div>


						  .gallery-container {width: 400px;margin: 0 auto;box-shadow: 0px 0px 10px #00000026;border-radius: 10px;padding: 10px 0;}	
.gallery-container img {width: 100%;cursor: pointer;transition-duration:0.5s;pointer-events: none;}
.gallery-container a {display: flex;overflow: hidden;border-radius: 5px;}

.gallery-container a:hover img {transform: scale(1.1);}


						//Open Image
const OpenImage = (event) => {
	event.preventDefault();
	var imagePath = event.target.getAttribute("href")
	document.querySelector("#image-preview").setAttribute("src", imagePath)
	return false
}