Rahul Rahul - 4 months ago 10
CSS Question

How to display multiple images just below the "main image" in same page

I have created one "main image" in Html. Now i wanted to display multiple images just below the "main image" when i click on "main image" on the same page. this is my below code which create one "main image" in Html.

<html>
<body>
<p>The image is a link.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>


How to display multiple images just below the "main image" in same page?

Answer

$(document).ready(function() {
    $('.thumbs').hide();
	$('.main-image').on('click', function(){
		$('.thumbs').show();	
	});
});
.outer {
	width:600px; 
	float:left; 
}
.main-image , 
.main-image img { 
	width:100%; 
	float:left; 
	overflow:hidden; 
}
.thumbs {
	width:100%; 
	float:left; 
	margin-top:15px;
}
.thumbs img {
	 display:inline-block; 
	 width:100px;
	 margin-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">

<div class="main-image">
	<img src="about.jpg" alt="about" />
</div>
<div class="thumbs">
	<img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    <img src="about.jpg" alt="about" />
    
</div>

</div>

this is work for me

Comments