change images with jquery/javascript

**jazzo** · Jul 13, 2012 16:04

Hi there I am working on a small test, trying to change images with jquery. I have tried different combination but no joy.
SO, here's the code:
html:

Code:

<html>
	<head>
		<title>test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<p>This paragraph is the default</p>
			<p class="hide_paragraph">This paragraph comes in with image 1</p>
			<p class="hide_paragraph">This paragraph comes in with image 2</p>
			<p class="hide_paragraph">This paragraph comes in with image 3</p>
		</div>
		<div class = "big_image" id="big_image">
			<img src="placeholder.jpg" alt="" id="placeholder_image" >
			<img src="test1.jpg" class="hide_image">
			<img src="test2.jpg" class="hide_image">
			<img src="test3.jpg" class="hide_image">
		</div>
		<div class="thumb_box">
			<ul class="thumb_images">
				<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
				<li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
				<li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb3</a></li>
			</ul>
		</div>
	</body>
</html>

CSS (probably with a few unnecessary rules)

Code:

.big_image{
	border:1px solid red;
	width:700px;
	height:525px;
	margin:0 auto;
}

.thumb_images{
	list-style:none;	
}

.thumb_images li{
	float:left;
	padding:15px;
}

.thumb_images li img{
	display:block;
}


body{
	background-color:pink;
}

.thumb_images li a img{
	border-style:none;
}

.thumb_images li a{
	text-decoration:none;
}

.thumb_images li a:hover{
	color:red;
	text-decoration:underline;
}

.hide_image{
	display:none;
}

.show_image{
	display:block;
}

.hide_paragraph{
	display:none;
}

.show_paragraph{
	display:block;S
}

script:

Code:

function changeImage(image){
	
	$("big_image img").attr("src",image).removeClass("hide_image").addClass("show_image");
	
	

}

Now, what was I trying to achieve? Well I would like to be able to click on a thimbnail and change the big image accordingly together with the paragraph related to it. YOu can see the site in here: http://antobbo.webspace.virginmedia..../test/test.htm
Needless to say it doesn't work now. What I have attempted to do in my script was to pass the image as a parameter to the functin and then the jquery is supposed to change the src of the image with the new image path, remove the hidden class and add a show_image class.
Any suggestion is very welcome of course thanks

**markbrown4** · Jul 13, 2012 23:36

Hi jazzo, welcome to Sitepoint

Your changeImage function get's all of the big images, changes their src attributes then toggles the classes.
This is probably an easier way to achieve what you're wanting.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
body{
  background-color: pink;
}
#image {
  border: 1px solid red;
  width: 700px;
  height: 525px;
  margin: 0 auto;
}
#thumbs {
  list-style: none;
}
#thumbs li {
  float: left;
  padding: 15px;
}
#thumbs img {
  display: block;
  border-style:none;
}
#thumbs a {
  text-decoration:none;
}
#thumbs a:hover {
  color: red;
  text-decoration: underline;
}
</style>
</head>
<body>
<p id="caption">This paragraph is the default</p>
<img id="image" src="placeholder.jpg" alt="">
<ul id="thumbs">
  <li><a href="test1.jpg" data-caption="This paragraph comes in with image 1"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
  <li><a href="test2.jpg" data-caption="This paragraph comes in with image 2"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
  <li><a href="test3.jpg" data-caption="This paragraph comes in with image 4"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('#thumbs').on('click', 'a', function(event) {
  $('#image').attr('src', this.href);
  $('#caption').html($(this).data('caption'));

  return false;
})
</script>
</body>
</html>

This makes the content more accessible too as the links will load the big images if there's a problem with the script or without javascript, you were also using an old version of jQuery.

**jazzo** · Jul 14, 2012 04:24

Originally Posted by markbrown4

Hi jazzo, welcome to Sitepoint

Your changeImage function get's all of the big images, changes their src attributes then toggles the classes.
This is probably an easier way to achieve what you're wanting.

Hi thank you : - )

Thanks for posting your code, but I am still at the beginning of my jquery career, so I might need a little explanation if you don't mind, and also I have attempted another way, which I am not sure whether it is correct or not. ANyway, one thing at a time, let's start by looking at your code.

Here

Code:

 $('#thumbs').on('click', 'a', function(event)

you select the thumbs div and the On method attaches a click event to thumbs a (which is the thumbnail image) and run a function.

Code:

$('#image').attr('src', this.href);

here we grab the default image and we change the src property ('this' refers to #thumbs here and then we attach .href therefore 'this.href' refers to #thumbs with an attribute of href, which is the big image.)

Code:

$('#caption').html($(this).data('caption'));

here we grab the caption id and I am not sure what happens there...sorry

The return false is to stop the link from being followed by the browser

Just after I posted this last night, I have attempted a different solution. I think the idea is good, but unfortunately it doesn't work...
the html is similar although I am calling the function from within the html in onclick="changeImage()":

Code:

<div>
			<p>This paragraph is the default</p>
			<p class="hide_paragraph">This paragraph comes in with image 1</p>
			<p class="hide_paragraph">This paragraph comes in with image 2</p>
			<p class="hide_paragraph">This paragraph comes in with image 3</p>
		</div>
		<div class = "big_image" id="big_image">
			<img src="placeholder.jpg" alt="" id="placeholder_image" >
		</div>
		<div class="thumb_box">
			<ul class="thumb_images">
				<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage()">Thumb1</a></li>
				<li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage()">Thumb2</a></li>
				<li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage()">Thumb3</a></li>
			</ul>
		</div>

JAVASCRIPT

Code:

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var pic3 = new Image();
pic3.src = "test3.jpg";

function changeImage(){
	
	var theImage = document.getElementById("placeholder_image");
	theImage.src = pic1.src;	
	

}

while I was coding this last night, I found it somewhat easier than coding it in javascript, although the code is longer. I basically preloaded the images and then the function gets the default image and change its src. Thing is with the code above I can only change the default image, nothing else. If I want to change the other images then I can't, and I am not sure how to ptimize the code to achieve that. I think knowing both ways (jquery and javascript) will help me to understand a bit more the technicalities, that's why I posted also the javascript code, I can do it in another post if you think it is better

**jazzo** · Jul 14, 2012 05:14

ah, sorry, please ignore my javascript code above, I cracked it (only images though). Apologies for posting so many times, but I am eager to get it right: - )
HTML:

Code:

<div>
			<p>This paragraph is the default</p>
			<p class="hide_paragraph">This paragraph comes in with image 1</p>
			<p class="hide_paragraph">This paragraph comes in with image 2</p>
			<p class="hide_paragraph">This paragraph comes in with image 3</p>
		</div>
		<div class = "big_image" id="big_image">
			<img src="placeholder.jpg" alt="" id="placeholder_image">
			<img src="test1.jpg" alt="" class="hide_image">
			<img src="test2.jpg" alt="" class="hide_image">
			<img src="test3.jpg" alt="" class="hide_image">
		</div>
		<div class="thumb_box">
			<ul class="thumb_images">
				<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
				<li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
				<li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test3.jpg')">Thumb3</a></li>
			</ul>
		</div>

JAVASCRIPT

Code:

function changeImage(image){
	
	var theImage = document.getElementById("placeholder_image");
	theImage.src = image;	

}

and CSS

Code:

.big_image{
	border:1px solid red;
	width:700px;
	height:525px;
	margin:0 auto;
}

.thumb_images{
	list-style:none;	
}

.thumb_images li{
	float:left;
	padding:15px;
}

.thumb_images li img{
	display:block;
}


body{
	background-color:pink;
}

.thumb_images li a img{
	border-style:none;
}

.thumb_images li a{
	text-decoration:none;
}

.thumb_images li a:hover{
	color:red;
	text-decoration:underline;
}

.hide_image{
	display:none;
}

.show_image{
	display:block;
}

.hide_paragraph{
	display:none;
}

.show_paragraph{
	display:block;S
}

here's the link http://antobbo.webspace.virginmedia....rking/test.htm

One thing I couldn't do it is to change the paragraphs though. I was wondering if with the function I can pass other than the image also the corresponding paragraph, so something like this
onclick="changeImage('test1.jpg',p:first)"
thanks for your help

**markbrown4** · Jul 14, 2012 06:08

No problemo. Did you try my code out to see if it works?

I've commented and made it easier to understand below. The main difference between our code is that using event listeners means that your HTML doesn't have any Javascript in it. This is recommended and makes maintenance easier.

Code javascript:

// add and event listener to #thumbs that will catch all click events on child elements that match the selector 'a'
// This is called event delegation, rather than attaching 4 click events to the links, we attach one event listener to #thumbs element.
$('#thumbs').on('click', 'a', function(event) {
  // inside a jQuery event handler 'this' points to the target element of the event, in this case the a tags.
  link = $(this)
 
  // Set the #image src attribute to be what's in the href attribute of the link.
  $('#image').attr('src', link.attr('href'));
 
  // Set the HTML inside the #caption element to be what's in the data-caption attribute of the link.
  $('#caption').html(link.data('caption'));
 
  // prevent default action
  return false;
})

Nice work getting it to work without jQuery though, a lot of people wouldn't have tried to make it work like that.
You could just pass a caption through as the second parameter in your last example.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<p id="caption">This paragraph is the default</p>
<img id="image" src="placeholder.jpg" alt="">
<ul id="thumbs">
  <li><a href="test1.jpg" onclick="changeImage('test1.jpg', 'This paragraph comes in with image 1'); return false;"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
  <li><a href="test2.jpg" onclick="changeImage('test2.jpg', 'This paragraph comes in with image 2'); return false;"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
  <li><a href="test3.jpg" onclick="changeImage('test3.jpg', 'This paragraph comes in with image 3'); return false;"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
</ul>
<script>
function changeImage(src, caption) {
  document.getElementById('image').src = src;
  document.getElementById('caption').innerHTML = caption;
}
</script>
</body>
</html>

You should always aim to keep your Javascript code out of your HTML, so learning about event listeners like in my example is a better way to go than to use event handlers in the HTML like onclick=""

Hope it helps

**jazzo** · Jul 14, 2012 12:44

Originally Posted by markbrown4

No problemo. Did you try my code out to see if it works?

I've commented and made it easier to understand below. The main difference between our code is that using event listeners means that your HTML doesn't have any Javascript in it. This is recommended and makes maintenance easier.

thanks markbrown4, really kind of you to explain your code. I tried it yes and it works perfectly. It is much clearer with your explanation. Only one thing I still don't get, sorry. The last line $('#caption').html(link.data('caption'));. I understand the element selected and roughly what it does but it's the data() method that I don't understand how it works. I mean it's like magic really! I have checked the API http://api.jquery.com/data/ but really it doesn't really clarify things that much to be honest with you. So you said it

// Set the HTML inside the #caption element to be what's in the data-caption attribute of the link.

but what's the data caption attribute?

ABout my javascript code, thanks for amending it, it works. The thing with that is that in some respects I am more comfortable with javascript than jquery, in that if the jquery code, I mean I only know the basic, although I would be really happy to learn more.
thanks

**markbrown4** · Jul 14, 2012 13:50

Originally Posted by jazzo

thanks markbrown4, really kind of you to explain your code. I tried it yes and it works perfectly. It is much clearer with your explanation. Only one thing I still don't get, sorry. The last line $('#caption').html(link.data('caption'));. I understand the element selected and roughly what it does but it's the data() method that I don't understand how it works. I mean it's like magic really! I have checked the API http://api.jquery.com/data/ but really it doesn't really clarify things that much to be honest with you. So you said it but what's the data caption attribute?

Here's the data-caption attribute.

Code:

<a href="test1.jpg" data-caption="This paragraph comes in with image 1"><img src="test1_thumb.jpg" alt="">Thumb1</a>

http://api.jquery.com/data/#data-html5

**jazzo** · Jul 17, 2012 13:31

thanks

User Tag List

Thread: change images with jquery/javascript

Thread Tools

Display

change images with jquery/javascript

Bookmarks

Bookmarks

Posting Permissions