I have a page containing a series of thumbnails representing 'personal images' a user would likely select during registration or login (two-factor authentication). This is mostly a proof of concept just yet.

When a user clicks one of the thumbnails, i'd like that thumbnail to display in a seperate location on the page. When/if they click another, the newly clicked thumbnail replaces it.

I'm having trouble with the syntax of the Jquery. Any assistance would be great

THE HEAD

<script>
$(document).ready(function(){
    $('#imgpool > img').click(function(){
            $('#imgholder').html('<img src="'+$('#image').val()+'"/>');
    });
});
</script>

THE BODY

<div class="wrap_main">        

        <h3>Select Your Personal Image</h3>
        <div class="yourimg">
            <p id="imgholder"></p>
            <p>Select your Personal Image from the group below. To change your Personal Image, simply choose an alternate image.</p>
        </div>

        <div class="wrap_imgpool">
        <ul id="imgpool">
            <li><a href="#"><img src="image52_ThumbsUp.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image47_SoccerBall.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image45_Ship.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image28_House.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image26_Guitar.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image18_DollarSign.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image15_Comb.gif" height="48" width="48" title="" /></a></li>
            <li><a href="#"><img src="image09_BrickWall.gif" height="48" width="48" title="" /></a></li>
        </ul>
        </div>

</div>

$('#image').val()

would be looking for the 'value' attribute of an image, which won't exist. You're looking for the 'src' attribute, which can be found like this:

$('#image').attr('src');

thanks for the response. i updated the code as you suggested, but no joy:

$('#imgpool > img').click(function(){
$('#imgholder').html('<img src="'+$('#image').attr('src')+'"/>');
});

i'm thinking the issue is with the $('#image') part, as there are no ID of "image" in my code. not sure how to build the filename of the image.

Here is a test page i'm working within:
http://bit.ly/bKsA2l

'build the filename?' not sure what you mean by that.
and no, it won't work if there's no ID of 'image' present in the DOM

horrible terminology choice, there. sorry. what i mean is that i must somehow instruct which img filename to display in #imgholder. the #image is a stray from one of the half-dozen or so attempts i've been trying, only to make muddier.

whichever lower thumbnail is clicked, i'd like a copy of that thumbnail to display within #imgholder.

is there some more efficient way to achieve this than the direction i'm slogging thru?

Now that I'm thinking about it, I've built a plugin that accomplishes this already, though it's normally used to display larger versions of the image: Simplethumbs. It might be useful if you want to do fading between the images, or have the option of having it auto cycle between them, though it's probably a bit heavy for your purposes.

You could always accomplish it something like this:

<img src="image/blank.gif" id="image-to-switch">
<div id="thumbnails">
     <a href="#"><img src="image/image1.gif"></a>
     <a href="#"><img src="image/image2.gif"></a>
     <a href="#"><img src="image/image3.gif"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
     $('#thumbnails a').click(function() {
        var img = $(this).find('img');
        $('#image-to-switch').attr('src', img.attr('src'));
        return false;
     });
});
</script>

Doing this same thing without jQuery is barely a challenge, so if you don't need it for anything else on your site, why load the whole library?

<img src="image/blank.gif" id="image-to-switch">
<div id="thumbnails">
     <a href="#"><img src="image/image1.gif"></a>
     <a href="#"><img src="image/image2.gif"></a>
     <a href="#"><img src="image/image3.gif"></a>
</div>
<script type="text/javascript">
<!--
var a = document.getElementById('thumbnails').getElementsByTagName('a');
for(var i = 0; i < a.length; i++) {
    a.onclick = function() {
        document.getElementById('image-to-switch').src = this.getElementsByTagName('img')[0].src;
        return false;
    }
}
//-->
</script>

A bit more long winded, but avoiding thousands of previous lines of code loaded from jQuery.

@wayfarer07: you rock. it worked. nice & clean. if i knew your poison i'd buy you a drink.

regarding the jquery though, this a proof of concept for a page on which there'll be other functions needing the libs. but thanks for your suggestions to keep it lean.

Don't get me wrong, I love jQuery, and use it in 80% of my projects. Most of my projects require a rich user experience. If I have something that needs interaction but doesn't need fancy effects like fading, animating, etc., I'll just code it myself. I've hand-coded fades and animations before, but why bother when there's jQuery?

Hi wayfarer07 and others (my first contribution),
Can I step in this thread? I have a question under the same title.
I am a graphic designer, experienced user on xhtml and css, a novice with scripting with jQuery. A Mac user. A dutchman.
I use your simplethumbs jQuery plugin (all latest versions): http://www.nabor.nl/test
Quite neat, no? All goes well on non ie-browsers. IE (all versions) changes the image in de imageview div, stretching the width to fill the div!
Please have a look. As you see I have portrait and landscape format photo's to display.
What causes this and how can I solve this? Another or better css for #imageview? Or a little adaption in de .js?
Your help will be very much appriciated!!
Jos

I solved this "problem" for now by preparing my foto's in a square format. So the imageview-div stays in the same proportion: look here > portfolio.
I am still interested for a solution for this changing format puzzle though!
regards, jos