JavaScript

【.attr()】Switch Main Image with Clicked Thumbnail

 

In this article, we’ll explain how to use the jQuery .attr() method to switch the main image with a clicked thumbnail. This technique is valuable for engineers and can be utilized in various contexts, such as product catalog sites or galleries. Specifically, we’ll demonstrate how to use jQuery’s .attr() to change the src attribute of an img tag.

Contents
  1. CSS Styling for Thumbnail and Main Image
  2. HTML Markup for Thumbnail and Main Image Areas
  3. JavaScript Using jQuery’s .attr() to Switch Main Image with Clicked Thumbnail
  4. Demo Page to Switch Main Image with Clicked Thumbnail
  5. Conclusion

CSS Styling for Thumbnail and Main Image

First, we’ll define the CSS styles for the thumbnail image area (.boxwrap .simg) and the main image area (.boxwrap .bimg). Use the following code as a base, and adjust the CSS as needed.

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
    -webkit-backface-visibility: hidden;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.boxwrap{
  overflow: hidden;
  width: 920px;
  margin: 0 auto;
}
.boxwrap .bimg{
  width: 800px;
  height: auto;
  overflow: hidden;
  float: left;
}
.boxwrap .simg{
  float: left;
  margin-left: 20px;
  width: 100px;
}
.boxwrap .simg ul{
  width: 100%;
}
.boxwrap ul li{
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
}
.boxwrap ul li:hover{
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}
</style>

In the above style, we use the .boxwrap class to arrange the overall layout, containing both the main image area (.bimg) and the thumbnail image area (.simg). The thumbnail image area uses ul tags to display each thumbnail image as a list item.

HTML Markup for Thumbnail and Main Image Areas

Next, we’ll add the HTML code for the thumbnail and main image areas. Assign class=”simg” to the thumbnail area and place the thumbnail images inside li tags. For the main image area, use class=”bimg” and set a default display image.

<h1>Click the thumbnail on the right to switch the main image on the left</h1>

  <div class="boxwrap">
    <div class="bimg"><img src="i1.jpg" alt="" width="100%"></div>
    <div class="simg">
      <ul>
        <li><img src="i1.jpg" alt="" width="100%"></li>
        <li><img src="i2.jpg" alt="" width="100%"></li>
        <li><img src="i3.jpg" alt="" width="100%"></li>
      </ul>
    </div>
  </div>

In this HTML, three jpg images (i1.jpg, i2.jpg, i3.jpg) are prepared as thumbnails. When a thumbnail is clicked, the image in the main image area will switch according to the clicked thumbnail.

JavaScript Using jQuery’s .attr() to Switch Main Image with Clicked Thumbnail

Now, we’ll add a JavaScript (jQuery) function to change the main image based on the click event. Be sure to load the jQuery library (jquery.min.js) in advance.

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$(".simg ul li").click(function(){
		$(".bimg").children('img').attr("src",$(this).children("img").attr('src'));
	});
});
</script>

This script sets up a click event for the thumbnail area (.simg ul li). When a click event occurs, the src attribute of the clicked thumbnail image is retrieved and applied to the src attribute of the image in the main image area (.bimg). This allows the main image to switch based on the clicked thumbnail.

Demo Page to Switch Main Image with Clicked Thumbnail

A demo page has been created where you can experience this mechanism. Access the demo page from the link below, and when you click a thumbnail, the main image switches accordingly.

Demo to Switch Main Image with Clicked Thumbnail

Conclusion

In this article, we covered how to use the jQuery .attr() method to switch the main image with a clicked thumbnail. This technique is incredibly useful for engineers, especially on product showcase sites or photo galleries.

By combining CSS for layout, HTML, and jQuery, you can quickly create an interactive image gallery. The code is also easy to customize, allowing you to adjust it flexibly to suit your needs. Try it out in your projects!

We hope this explanation proves helpful to both engineers and viewers. We’ll continue to provide practical scripts like this to support your web development efforts.

※Please use this code at your own discretion. Do not use the Google Analytics tag from the demo page’s head tag if you reuse it.

attr
RELATED POST