Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Duplicate Image In Gallery

Post a Comment
I have an image gallery that displays all the images inline, and the targeted image displayed bigger elsewhere on the page. The problem I'd like to solve is to make the targeted im

Solution 1:

Here a working example: http://jsfiddle.net/Stijntjhe/xxBEd/

Not much JavaScript at all, put it in your <head>:

function show(img) {
    document.getElementById('big').innerHTML = '<img src="' + img.src + '" />';   
}

And add a simple onclick to your images:

<img id="2" onclick="show(this);" src="http://placehold.it/200" />

Don't forget the extra <div> in your HTML:

<div id="big"></div>

EDIT:

It's even possible without JavaScript, but you would need some extra HTML: http://jsfiddle.net/Stijntjhe/xxBEd/5/


Solution 2:

I just add a basic javascript function into your sample like: 

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}

You can see the full change at this JSFiddle. Please help me add some css to beaufity it, ;)


Post a Comment for "Duplicate Image In Gallery"