CODEWITHSUNDEEP
javascripthtmlcss
Rahul
Rahul

Reputation: 47

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?

Upvotes: 0

Views: 3778

Answers (3)

Alex Ljamin
Alex Ljamin

Reputation: 767

You can achieve your goal with a following code:

img {
  width:42px;
  height:42px;
  border:0;
}
a {
  text-decoration:none;
}
<p>The image is a link.</p>
<a href="/">
  <img src="http://placehold.it/42x42" alt="HTML">
</a>
<div>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
  <a href="/">
    <img src="http://placehold.it/42x42" alt="HTML">
  </a>
</div>

Upvotes: 0

Fahmi B.
Fahmi B.

Reputation: 798

this is what you want ? https://jsfiddle.net/bfahmi/2m16vjj1/3/

$(document).ready(function() {
  $('.featured-image').on('click', '#btn-display', function() {
    if ($('.gallery').is(':visible')) $('.gallery').hide();
    else $('.gallery').show();
  });
});
.images {
  width: 50%;
  padding: 0 auto;
}
.featured-image,
.gallery {
  width: 100%;
  text-align: center;
}
.gallery {
  display: none;
  margin: 10px 0;
}
.featured-image img {
  width: 100%;
  max-width: 300px;
}
.gallery img {
  width: 20%;
  max-width: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="images">
  <div class="featured-image">
    <a id="btn-display" href="#">
      <img src="https://placehold.it/300x300/?text=featured-image">
    </a>
  </div>
  <div class="gallery">
    <img src="https://placehold.it/300x300/?text=image-1">
    <img src="https://placehold.it/300x300/?text=image-2">
    <img src="https://placehold.it/300x300/?text=image-3">
    <img src="https://placehold.it/300x300/?text=image-4">
  </div>
</div>

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

$(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

Upvotes: 1

Related Questions