Change images with jquery/javascript

jazzo · July 13, 2012, 11:04pm

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:

<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)

.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:

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.com/various_tests/worktest/change_images/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 · July 14, 2012, 6:36am

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.


<!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 · July 14, 2012, 11:24am

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

 $('#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.

$('#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.)

$('#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()”:

<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

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 · July 14, 2012, 12:14pm

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:

<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

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

}

and CSS

.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.com/various_tests/worktest/change_images/working/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 · July 14, 2012, 1:08pm

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.


// 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.


<!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 · July 14, 2012, 7:44pm

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 · July 14, 2012, 8:50pm

Here’s the data-caption attribute.

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

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

jazzo · July 17, 2012, 8:31pm

thanks