CODEWITHSUNDEEP
jqueryimagesrc
Liz
Liz

Reputation: 1437

Getting One Image Src to Change with JQuery when Another Image is Clicked

I'm creating a product view with one big image above a row of smaller images. The big image should change when one of the little images is clicked (to have the src of whichever small image was clicked).

My HTML is:

<img id="MainProductImage" src="Images/Product Images/AB04_GRAY_22A6_W_WEB.jpg">

<img id="sm001" src="Images/Product Images/AB04_G.jpg">
<img id="sm001" src="Images/Product Images/AB04.jpg">
<img id="sm002" src="Images/dB 002.jpeg">
<img id="sm003" src="Images/dB 003.jpeg">
<img id="sm004" src="Images/dB 004.jpeg">

My jquery is:

$(document).ready(function() {
	$('img.sm001').click(function() {
		$('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg')
	});
	
	$('img.sm002').click(function() {
		$('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg')
	});
	
	$('img.sm003').click(function() {
		$('#MainProductImage').attr('src', 'Images/dB 002.jpeg')
	});
	
	$('img.sm004').click(function() {
		$('#MainProductImage').attr('src', 'Images/dB 003.jpeg')
	});
	
	$('img.sm005').click(function() {
		$('#MainProductImage').attr('src', 'Images/dB 004.jpeg')
	});
});

How can I get this to work as intended?

Upvotes: 0

Views: 2131

Answers (3)

Ragini Gurram
Ragini Gurram

Reputation: 51

please find the code with few changes that is working 

   $(document).ready(function() {
	$('#sm001').click(function() {
		$('#MainProductImage').attr('src', 'grapes.jpeg')
        alert($('#MainProductImage').attr('src'));
	});
	
	$('#sm002').click(function() {
		$('#MainProductImage').attr('src', 'apple.jpeg')
         alert($('#MainProductImage').attr('src'));
	});
	
	$('#sm003').click(function() {
		$('#MainProductImage').attr('src', 'banana.jpeg')
         alert($('#MainProductImage').attr('src'));
	});
	
	$('#sm004').click(function() {
		$('#MainProductImage').attr('src', 'mango.jpeg')
         alert($('#MainProductImage').attr('src'));
	});
	
	$('#sm005').click(function() {
		$('#MainProductImage').attr('src', 'strawberry.jpeg')
         alert($('#MainProductImage').attr('src'));
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <img id="MainProductImage" src="fruits.jpeg">

<img id="sm001" src="grapes.jpeg">
<img id="sm002" src="apple.jpeg">
<img id="sm003" src="banana.jpeg">
<img id="sm004" src="mango.jpeg">
<img id="sm005" src="strawberry.jpeg">

I hope it helps .please read the following JQuery selectors that helped a lot for me in understanding the selections.

Upvotes: 0

user2575725
user2575725

Reputation:

You are targeting wrong element using class img.sm001, try id instead #sm001 and so on for the rest:

$('img#sm001')

try this code:

$(function(){

    var main = $('#MainProductImage');//get the object once

    //target is imag tag, where id starts with `sm00`
    $('img[id^=sm00]').on('click', function(){
        main.prop('src', this.src);
    });
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You have incorrect selector. You need to use id # selector instead of class selector . as elements have ids like sm001,sm002....sm005:

$('#sm001').click(function() {
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg')
});
$('#sm002').click(function() {
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg')
});

$('#sm003').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 002.jpeg')
});

$('#sm004').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 003.jpeg')
});

$('#sm005').click(function() {
    $('#MainProductImage').attr('src', 'Images/dB 004.jpeg')
});

Also you can narrow down the whole click events code to single event.

$('img[id^=sm00]').click(function() {
    $('#MainProductImage').attr('src', $(this).attr('src'));
});

Upvotes: 1

Related Questions