Я пытаюсь создать функцию onclick для изображения с скрытым тегом div, проблема в том, что я не очень хорошо знаю jquery или javascript. Я искал, чтобы попытаться сделать это в css, но я слышал, что он глючит до чертиков, и я не достаточно разбираюсь в этом js / jq, чтобы собрать воедино какой код мне нужен и куда он должен идти.

По сути, я хочу вот что: вы нажимаете на изображение, изображение исчезает в скрытом элементе div и предпочтительно затемняет фон (как в случае с shadowbox), а затем при щелчке по закрытой ссылке внутри скрытого элемента div элемент исчезает и фон возвращается к нормальному.

Прямо сейчас у меня есть обычный div с изображением, которое нужно щелкнуть, скрытый div и настроенные ссылки.

Я знаю, что это может быть сделано, у меня просто адское время, чтобы понять это. Пожалуйста помоги?

:: Обновленный код для отражения изменений JS ::

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>
1
Chickpea 29 Янв 2013 в 01:27

2 ответа

Лучший ответ

Вот пример, как это сделать с помощью JQuery и немного CSS.

< Сильный > HTML

<button id="showButton">Show Panel</button>
<div id="hiddenPanel" class="hidden">
  <p>I'm a hidden div</p>
  <button id="closeButton">close me</button>
</div>

< Сильный > CSS

.hidden {
    display: none;
    opactiy: 0;
}

< Сильный > JavaScript

<script>
  $(function () { // Onload

    $("#showButton").click(function () {
      $("#hiddenPanel").fadeIn(1000);
    });

    $("#closeButton").click(function () {
       $("#hiddenPanel").fadeOut(1000);
    });

  });
</script>
2
Split Your Infinity 28 Янв 2013 в 23:12

демонстрационная версия jsBin

<div id="lightbox"></div>
<img class="thumb" src="img1.jpg" alt="" />   
<img class="thumb" src="img2.jpg" alt="" /> 

Css:

*{margin:0;padding:0;}
h2, p{padding:30px;}

#lightbox{
  position:fixed;
  top:0px;
  left;0px;
  background:rgba(0,0,0,0.6);
  width:100%;
  height:100%;
  text-align:center;
  cursor:pointer;
  display:none;
}
#lightbox > img{
  position:relative;
  height:400px;  
  top:50%;
  margin:-200px auto;
  display:inline;
  box-shadow:0 3px 25px #000, 0 0 0 5px rgba(255,255,255,0.4);
  width:auto;
}


.thumb{
  float:left;
  padding:10px;
  width:180px;
  cursor:pointer;
} 

JQ :

$('.thumb').click(function(){
  var src = $(this).attr('src');
  $('#lightbox').append( '<img src="'+src+'"/>' ).fadeTo(800,1);

});

$('#lightbox').click(function(){
  $(this).fadeTo(800,0, function(){
    $(this).empty().hide();
  });
});
0
Roko C. Buljan 28 Янв 2013 в 23:29