title: jquery or javascript image onclick div fadein/ link onlcick div fadeout
body: <p>I'm trying to make an image onclick function with a fadein hidden div the problem is I don't really know jquery or javascript all that well.  I have searched to try to do it in css but i heard it's buggy as hell and I don't understand enough of it js/jq to piece together what code i need and where it should go.</p>
  
  <p>Basically what i want is this:
    you click on an image, the image fades in the hidden div, and preferably darkens the background (kind of like shadowbox would) then on the click of the close link within the hidden div, the div fades out and the background goes back to normal.</p>
  
  <p>Right now I have the normal div with the image to be clicked, the hidden div, and the links set up.</p>
  
  <p>I know it can be done, I'm just having a hell of a time figuring it out.  Please help?</p>
  
  <p>::UPDATED CODE TO REFLECT JS CHANGES::</p>
  
  <p>HTML-</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Title Goes Here&lt;/title&gt;
      &lt;meta name="keywords" content=" Enter Metatags" /&gt;
      &lt;link rel="shortcut icon" href="images/favicon.ico" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="shadowbox.css"&gt;
      &lt;script type="text/javascript" src="shadowbox.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;Shadowbox.init();
      &lt;/script&gt;&lt;/head&gt;
  
      &lt;body bgcolor="#547FA1"&gt;
      &lt;div id="content"&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="holder"&gt;&lt;a href="#"&gt;&lt;img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /&gt;&lt;/a&gt;
        &lt;/img&gt;&lt;/div&gt; 
        &lt;div class="shadowdisc"&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;font size=4 color=#999&gt;&lt;p align=center&gt;Content for Hidden Div.&lt;/p&gt;
       &lt;p align=center&gt;Here is more content&lt;/p&gt;
       &lt;br /&gt;&lt;br /&gt;
       &lt;p align=center&gt;Finishing the content here&lt;/p&gt;
        &lt;p&gt;
        &lt;p&gt;
        &lt;p align=center&gt;&lt;a href="welcome.html"&gt;ENTER&lt;/a&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;a href="http://www.google.com"&gt;EXIT&lt;/a&gt;&lt;/p&gt;
      &lt;p&gt;
     &lt;p&gt;
       &lt;p align=right&gt;&lt;a href="#"&gt;Close&lt;/a&gt;
       &lt;/font&gt;   
        &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/body
      &lt;/html&gt;
  </code></pre>
  
  <p>CSS-
          </p>
  
  <pre><code>      #content{
  width: auto;
  height: auto;
  overflow: hidden;
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed
  color: #5B5B5B;
             }
  
  
  
       #wrapper{
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
  height: 1100px;
             }
  
  
        #holder{
  position: relative;
  width: 1200px;
  top: 150px;
  background-color: #E3E3E3;
  height: 594px;
             }
  
      .shadowdisc{
  width: 900px;
  background-image: url(images/disbg.png);
  position: relative;
  bottom: 400px;
  border: 1px solid #999;
  left: 148px;
  padding: 10px;
  display: none;
             }
  &lt;/style&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>     &lt;link rel="stylesheet" type="text/css" href="shadowbox.css"&gt;
      &lt;script type="text/javascript" src="shadowbox.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      Shadowbox.init();
      &lt;/script&gt;
      &lt;script&gt;
        $(function () { // Onload
  
          $("#showImage").click(function () {
            $("#shadowdisc").fadeIn(1000);
         });
  
          $("#closeLink").click(function () {
            $("#shadowdisc").fadeOut(1000);
          });
  
        });
      &lt;/script&gt;
  </code></pre>