jquery oder javascript image onclick div fadein/ link onlcick div fadeout

Ich versuche ein Bild zu machen onclick-Funktion mit einem fadein versteckten div-das problem ist, ich weiß wirklich nicht, jquery oder javascript ganz so gut. Ich habe gesucht, um zu versuchen, um es in der css aber ich habe gehört, es ist buggy wie die Hölle und ich verstehe nicht genug davon, js/jq, um Stück zusammen, was code, den ich brauche und wo sollte es gehen.

Im Grunde, was ich will, ist dieses:
klicken Sie auf ein Bild, das Bild verblasst in der hidden-div, und vorzugsweise dunkler hintergrund (wie eine Art shadowbox würde), dann auf den Klick auf das schließen-link in den versteckten div, div ausgeblendet und der hintergrund geht zurück zu normal.

Momentan habe ich die normalen div mit dem Bild angeklickt werden, das versteckte div, und die links eingerichtet.

Ich weiß, es kann getan werden, ich bin nur eine Hölle von einer Zeit, es herauszufinden. Bitte helfen?

::AKTUALISIERTE CODE ZU REFLEKTIEREN, JS-ÄNDERUNGEN::

HTML-

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title Goes Here</title>
    <meta name="keywords" content=" Enter Metatags" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">Shadowbox.init();
    </script></head>

    <body bgcolor="#547FA1">
    <div id="content">
<div id="wrapper">
    <div id="holder"><a href="#"><img src="images/openimage2.jpg" alt="open" width="1200" height="645" border="0" usemap="#Map" /></a>
      </img></div> 
      <div class="shadowdisc">
        <p>&nbsp;</p>
        <font size=4 color=#999><p align=center>Content for Hidden Div.</p>
     <p align=center>Here is more content</p>
     <br /><br />
     <p align=center>Finishing the content here</p>
      <p>
      <p>
      <p align=center><a href="welcome.html">ENTER</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com">EXIT</a></p>
    <p>
   <p>
     <p align=right><a href="#">Close</a>
     </font>   
      </div>
       </div>
      </div>
     </div>
    </body
    </html>

CSS-

      #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;
           }
</style>

Javascript

     <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>
    <script>
      $(function () { //Onload

        $("#showImage").click(function () {
          $("#shadowdisc").fadeIn(1000);
       });

        $("#closeLink").click(function () {
          $("#shadowdisc").fadeOut(1000);
        });

      });
    </script>
  • Poste, was du bisher getan habe
  • Statt das Rad neu erfinden, warum nicht Sie verwenden eine vorhandene jQuery-plugin, wie colorbox?
  • Tut colorbox tun, versteckte divs? Mein Verständnis war, dass die meisten/alle /box-plugins hast, die Bilder/Medien nur.
  • Die jQuery-Dokumentation über Beispiele können Sie fast direkt kopieren und einfügen, was Sie tun möchten: api.jquery.com/fadeIn Blättern Sie nach unten und schauen Sie bei den demos.
  • Adrien - ich habe gesehen, unzählige Beispiele, und ich verstehe immer noch nicht, wie Sie auf meine situation. Ich bin offensichtlich völlig ahnungslos sind, wenn es um die Funktionen und wie Sie funktionieren. Es ist wie...ich weiß welche ich nutzen soll, aber ich weiß nicht, wohin Sie gehen,/ was um/ oder in Bezug auf meine Website.
InformationsquelleAutor Chickpea | 2013-01-28
Schreibe einen Kommentar