Question

在我的叠加层中单击时，我需要帮助为每个图像显示不同的段落？单击图像时，我希望在叠加层出现描述该图像时插入不同的段落。我在考虑为每个图像添加一个不同的html文件。除非有更简单的方法这样做

<!DOCTYPE html>
        <html>
        <head>
            <title>Health Flow</title>
            <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
        </head>
        <body>
            <header id="top" class="main-header">
                <span class="title">Health for Hummanity</span>
                <h1>Health Gallery</h1>
            </header>
            <div class="main-content t-border">
                    <p>
                     "It is health that is real wealth and not pieces of gold and silver"
                            -Ghandi
                    </p>
            </div>
            <ul id= "healthGallery">
                <li><a href="img/yoga.jpg"><img src="img/yoga.jpg" width="100" alt="Yoga"></a></li>
                <li><a href="img/diet.jpg"><img src="img/diet.jpg" width="100" alt="Diet Plan"></a></li>
                <li><a href="img/excercise.png"><img src="img/excercise.png" width="100" alt="Excercise Routine"></a></li>
                <li><a href="img/vegtables.jpg"><img src="img/vegtables.jpg" width="100" alt="Benefits of Vegatables"></a></li>
                <li><a href="img/sleep.jpg"><img src="img/sleep.jpg" width="100" alt="Sleep Information"></a></li>
                <li><a href="img/jogging.jpg"><img src="img/jogging.jpg" width="100" alt="Positive affects of Jogging"></a></li>
                <li><a href="img/natural.jpg"><img src="img/natural.jpg" width="100" alt="Natural Remedies for Sickness"></a></li>
                <li><a href="img/stretch.jpg"><img src="img/stretch.jpg" width="100" alt="Daily Stretching"></a></li>
            </ul>
            <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
            <script src="js/health.js" type="text/javascript" charset="utf-8"></script>
        </body>
        </html>





   Here is some jquery code that I would like to have a paragrapg appear when an image is clicked?

    var $overlay = $('<div id="overlay"></div>');
    var $image = $("<img>");
    var $caption = $("<p></p>");

    //An image to overlay
    $overlay.append($image);

    //A caption to overlay
    $overlay.append($caption);

    //Add overlay
    $("body").append($overlay);

    //Capture the click event on a link to an image
    $("#healthGallery a").click(function(event){
      event.preventDefault();
      var imageLocation = $(this).attr("href");
      //Update overlay with the image linked in the link
      $image.attr("src", imageLocation);
      //Show the overlay.
      $overlay.show();
      //Get child's alt attribute and set caption
      var captionText = $(this).children("img").attr("alt");
      $caption.text(captionText);
    });
    //When overlay is clicked
    $overlay.click(function(){
      //Hide the overlay
      $overlay.hide();
    });

Answer 1

here is the css file as well

body {
    background-color: forestgreen;
    font:1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.title {
    color: white;
    font-size: 1.625rem;
    letter-spacing: .075em;
    font-weight: 200;
    border-bottom: 3px solid;
    padding-bottom: 10px;
}

h1 {
    font-size: 5.625rem;
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.3;
    text-shadow: 0 0 1px 1px rgba(0,0,0,8)
    margin: 12px 0 0;
}

.main-header {
    height: 750px;
    background:linear-gradient(forestgreen,transparent 90%),
                linear-gradient(0deg, #000 ,transparent),
    forestgreen url('http://images4.fanpop.com/image/photos/16400000/Our-Planet-planet-earth-16444697-2560-1677.jpg') no-repeat center;
         background-size: cover;
         min-width: 100%;
         min-height: 100%;
         margin-top: -10px;
         margin-left: -10px;
         margin-right: -8px;

        }

.main-content {
    padding-bottom: 40px;
    padding-top: 40px;
    padding: 50px 25px 0;
    margin-right: -10px;
    margin-left: -10px;
    max-width: 100%;
    border-top: none;
}
.main-content p {
    color: white;
    font-family: italic;
    font-size: 40px;
    padding-bottom: 10px;
    position: center;

}

.main-header {
        max-height: 380px;
        text-align: center;
    }

ul {
    list-style:none;
    margin: 0 auto;
    padding: 0;
    display: block;
    max-width: 780px;
    text-align: center;
}

ul li {
    display: inline-block;
    background: white;
    margin:10px;
    padding: 20px;
    padding: 20px;
    border-radius: 10px;
    border-top: 10px solid #000;
}

div {

    background-color: #000;
    background-position: center;

    }

ul li img {
    display: block;
}
a {
    text-decoration: none;
}

#overlay {
  background:rgba(0,0,0,.9);
  width:110%;
  height:160%;
  top:0;
  left:0;
  display:none;
  text-align:center;
  position: absolute;
}

/*#overlay img {
 margin-top: 10%; 
 position: center;
 margin-left: -15px;
}
*/
#overlay p {
 color:white; 
 font-size: 25px;
}

单击图像jquery时如何显示段落的叠加

1 个答案: