Image Gallery without Thumbs

Question

I am trying to create a jQuery image gallery(I rather create one, than use a plugin) I've looked at several different tutorials and selectors, each of which use thumbs. Now my current code is this:

$(document).ready(function(){
  $('img').click(function(){
    $(this).clone().appendTo('#imageViewer').css({"opacity":1,"height":"50%"});
  })
});

The problem, I have it that, I cannot replace the image when another image is clicked. Is there anyway of just making it with the regular images but using CSS to shrink them i.e >height: 20%; opacity:0.2; but when clicked, they show up in a div on the page >height: 50%; opacity: 1;

Answer 1

see the DEMO

HTML

<div id="content">
    <div id="mainImg"><img src="http://youchew.net/wiki/images/9/9c/One.png" /></div>
  <div id="allImg">
    <img src="http://youchew.net/wiki/images/9/9c/One.png" >
    <img src="http://seo-hacker.com/wp-content/uploads/2010/04/22.png" >
    <img src="http://webtrafficnews.com/wp-content/uploads/2012/03/3.png" >

  </div>
  </div>

CSS

#content {width:300px;border:solid 1px #f00;overflow:auto; margin:0 auto;}
#allImg {}
#allImg img{ float:left; width:30%;opacity:.5; cursor:pointer; margin:5px}

jQuery

$(function(){

  $("#allImg").on("click","img",function(){
    $("#mainImg img").prop("src",$(this).prop("src"));

  });

});

EDIT:

Updated slideDemo

CSS

#mainImg {width:300px; height:300px;}

Jquery

$("#allImg").on("click","img",function(){
    newImage = $(this);
    $("#mainImg img").slideUp(500,function()
      {
        $("#mainImg img").prop("src",newImage.prop("src"));

       $("#mainImg img").slideDown(500);
      });

  });