Jquery - simple gallery with addClass and removeClass

Question

I have a simple jquery gallery that I am trying to create.

I have it working except, when you click on the thumbs - it does this:

1. replaces the space of an existing thumb with the first image
2. throws off the float with the thumbs going above the main image
   • click on the last thumb to see what I mean

Does anyone know how I can fix this with CSS or Jquery?

I am try to make this super simple.

Thanks

here is the jsfiddle: http://jsfiddle.net/webdott/zZNBQ/1/

    <div>
    <img src="image1.jpg" class="first"/>
    <img src="image2.jpg" />
    </div>

    <style>
    img {float:right;width:10%;margin:1%;}
    .fullview{width:60%;margin:0 4% 0 0;float:left;}
    .first{width:60%;margin:0 4% 0 0;float:left}
    </style>

    <script>
    $('img').click(function() {
    $(this).addClass('fullview').siblings().removeClass('fullview first');
    });
    </script>

Answer 1

I think the problem is that the images before and after the one which is selected are affecting how the larger one displays and is floated. How about floating a large image as a single element, then changing the source of that element to match the clicked element? Like this example.

$('.thumbnail').click(function() {
   var src = $(this).attr('src');
   $('#fullview').attr('src',src);
});

and

#fullview {
float:left;
max-width:75%;
}

ul {
float:right;
}

li {
    display: inline;
}
li img {
    width:50px;
    cursor: pointer;
}

or you could do something similar but with the gallery on the side like this example.

Answer 2

Another option would be to use a container div and position absolute;

<div style="width:40%;float:right;">

See this JSFiddle.