CSS/HTML Gallery

Question

Currently I've got a purely HTML/CSS image gallery, however due to the fact it uses <a> tags to change out the images, it also bumps the page down to the image. I've got a fixed navigation bar in place, and needless to say, it simply covers the images when the page is bumped down.

The lovely CSS I'm currently using for the gallery

#images {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 200px;
    position:absolute;
    opacity: 0;
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    opacity: 1;
}

#slider a {
    text-decoration: none;
    margin-top:5px;
    border: 1px solid #4D3132;
    padding: 0px 6px;
    color: #FFF;
}
#slider a:hover {
    background: #282F40;
    color: #FFF;
}

And the HTML (not the entire page of course, just the element.)

<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>  
<div class="center">
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>

</div></div>

So, Is it possible to create a HTML/CSS gallery that doesn't bump the page around, or dosnt use <a> tags...?

I should also point out, I'm not looking to make a "slideshow" the images don't have to automatically change out.

Edit:

The Images themselves aren't moving, It's being bumped up because of the use of <a> tags.

Answer 1

If you do not want to use JavaScript you could load your images in an iframe by setting a target attribute for your links.

<div id="slider">
    <a target="pictureFrame" href="http://i.imgur.com/dL3io.jpg">1</a>
    <a target="pictureFrame" href="http://i.imgur.com/qASVX.jpg">2</a>
    <a target="pictureFrame" href="http://i.imgur.com/fLuHO.jpg">3</a>
    <a target="pictureFrame" href="http://i.imgur.com/5Sd3Q.jpg">4</a>
</div>
<iframe id="images" src="http://i.imgur.com/dL3io.jpg" name="pictureFrame">
</iframe>

Fiddle here: http://jsfiddle.net/Nillervision/rvtrq/

Answer 2

What you need is a little bit of javascript magic. You can do this with both vanilla js and jQuery. I'm going to demonstrate an easy jQuery solution to your problem.

Since you use anchors for targeting the images, browser will automaticly scroll to the image that you selected. If the browser window is small and the image is displaced, there will be an ugly jumping effect.

Jquery code:

$('#slider a').click(function(event){

    // prevent default behavior of anchors
    event.preventDefault();

    // get the id of selected image
    var $id = $(this).attr('href');

    // hide previous image (if there is one)
    $('#images .target').removeClass('target');

    // show the selected image
    $('#images ' + $id).addClass('target');
});

CSS changes:

#images img:target

becomes

#images img.target

I hope this helps, and don't forget to include the jQuery library into your code.

Good luck!