How to dynamically change an image using javascript/jquery?

I see my original code has made it this far :) Because nobody has gotten accept, I will try my best. I will again give you some pointers on general matter: Your hyperlink tags ( a ) are unclosed. This will surely generate a validation error.

You can train your html skills be validating yourself regularly (sounds dirty right? ) In main-photo img {} the position:relative: is not closed with In your slider-large-image li img {} margin: 10px was not closed! NOTES You could have added this question to your original one.

I would have happily added this feature :) I again corrected your code a little Is there a solid reason for using hyperlinks in your carousel list? I removed the tags, since they made things unnecessarily complicated. You should do the same with the previous and next triggers I'm not going to fix the layouting.

You can figure it yourself out :) Miley rocks! I added default image, so when the page is loaded for the first time -- there wouldn't be a empty container Live demo jsfiddle.net/hobobne/K439d Full version code:! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" rel="nofollow">w3.org/TR/xhtml1/DTD/xhtml1-transitional... How to dynamically change an image using javascript/jquery?

- Kalle H. Väravas ‹›.

I see my original code has made it this far :) Because nobody has gotten accept, I will try my best. I will again give you some pointers on general matter: Your hyperlink tags () are unclosed. This will surely generate a validation error.

You can train your html skills be validating yourself regularly (sounds dirty right? ) In . Main-photo img {} the position:relative: is not closed with ;' In your .

Slider-large-image li img {}, margin: 10px was not closed! NOTES You could have added this question to your original one. I would have happily added this feature :) I again corrected your code a little.Is there a solid reason for using hyperlinks in your carousel list?

I removed the tags, since they made things unnecessarily complicated. You should do the same with the previous and next triggers. I'm not going to fix the layouting.

You can figure it yourself out :) Miley rocks! I added default image, so when the page is loaded for the first time -- there wouldn't be a empty container. Live demo jsfiddle.net/hobobne/K439d/ Full version code: How to dynamically change an image using javascript/jquery?

- Kalle H. Väravas ‹›.

It's really simple to do this using jQuery. When the user clicks on an tag, you'll have access to this inside the callback function. Simply take $(this).

Attr('src') and set the source of $('#main-photo') to it like so: $('img'). Click(function(){ $('#main-photo'). Attr('src', $(this).

Attr('src')); }); - It looks like in your code, you're using . Main-photo img, which should also work. I'm looking at it more now.

- EDIT, after reviewing your code, you seem to have many missing s along with other errors. Here is an updated and working version (minus the CSS and extra javascript): ‹›.

Also consider using "#" inside the href tag on the links and adding return false; inside the callback. – Ryan Sullivan Aug 7 at 16:28.

All you have to do is remove the href attribute from your links. When clicked, this causes the page to reload. However, this attribute is also responsible for the cursor to turn into a pointer, so you'll have to manually assign one in CSS: a { cursor: pointer } Clicking on the img's now would load said image in your main image holder, without the page reloading, which caused your problem.

I would clean up the html if I were you though, cause there are a lot of unclosed tags.

Change this part of your JS code: $(". Slider-large-image li a img"). Click(function() { $(".

Main-photo img"). Attr("src",$(this). Attr('src')); }); to: $(".

Slider-large-image li a"). Click(function() { $(". Main-photo img").

Attr("src",$(this). Find("img"). Attr("src")); return false; }); It should work fine.Eg: http://jsfiddle.net/UjGhE/23.

$("ul. Slider-large-image li a"). Click(function(e){ e.preventDefault(); // prevent changing url $("#mainphoto").

Attr('src',$(this). Children('a'). Attr('src')); //show clicked photo as main }).

Just put a return false; it will stop the postback $(". Slider-large-image li a img"). Click(function() { $(".

Main-photo img"). Attr("src",$(this). Attr('src')); return false; }); check working sample jsfiddle.net/UjGhE/18.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.