Question

I got an empty Div called Target :

<div id="target"></div>

and a div called list :

<div id="list">
    <ul>
        <li><img id="1" src=".." /></li>
        <li><img id="2" src=".." /></li>
        <li><img id="3" src=".." /></li>
    </ul>
</div>

What I want is, on user click, get the img into div target, and adjust his size to something bigger. I can do this easy.
The troubles come where if the user clicks on another div, or another button (arrow or next button elsewhere) I want the 1st div to get back to its place, and be replaced by the new one (or the following in the list, or the 1st if its the last div who’s on display).
I tried a couple of ways but my jQuery ain’t yet good enough.

( before someone ask, everything is local, no server side if this changes anything )

Answer 1

I’m not certain at all if this is the best way or even an efficient way of doing it but it seems to do what you need.

DEMO: Using cloning

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var hiddenImage = $("ul li img[hidden='hidden']");

    $("#target").html("");
    currentImage.clone().appendTo('#target');

    hiddenImage.removeAttr("hidden");
    currentImage.attr("hidden", "hidden");
});​

As per comments some of the elements could be video files. Instead of using clone() one can move the elements and leave a place-holder behind.

DEMO: Using a place-holder

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var lastImage = $("#target img");
    var placeHolder = $("#last-image-position");

    lastImage.insertBefore("#last-image-position");
    $("#last-image-position").remove();

    $("<div id='last-image-position'><div>").insertBefore(currentImage);

    currentImage.appendTo('#target');
});​

Edit
Updated demos with actual images.