Difference between revisions of "Team:DTU-Denmark/background"
| Line 132: | Line 132: | ||
<div><a class="anchor" id="section-1"></a> | <div><a class="anchor" id="section-1"></a> | ||
<h2 class="h2">Section 1</h2> | <h2 class="h2">Section 1</h2> | ||
| − | <img id=" | + | <img id="dog" class="enlarge" src="https://static.pexels.com/photos/47444/pexels-photo-47444-medium.jpeg" alt="Dog" width="300" height="200"> |
<!-- The Modal --> | <!-- The Modal --> | ||
| − | <div id=" | + | <div id="dogModal" class="modal"> |
<span class="close">×</span> | <span class="close">×</span> | ||
| − | <img class="modal-content" id=" | + | <img class="modal-content" id="dogImg"> |
<div id="caption">dog</div> | <div id="caption">dog</div> | ||
</div> | </div> | ||
<script> | <script> | ||
| − | |||
| − | |||
| − | + | $("img.enlarge").click( function() { | |
| − | + | console.log(this.id) | |
| − | + | // Get the modal | |
| − | + | var modal = this.id + "Modal"; | |
| − | + | console.log(modal) | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | // Get the image and insert it inside the modal - use its "alt" text as a caption | |
| − | + | var img = document.getElementById('myImg'); | |
| + | var modalImg = document.getElementById("img01"); | ||
| + | var captionText = document.getElementById("caption"); | ||
| + | img.onclick = function(){ | ||
| + | modal.style.display = "block"; | ||
| + | modalImg.src = this.src; | ||
| + | captionText.innerHTML = this.alt; | ||
| + | } | ||
| − | + | // Get the <span> element that closes the modal | |
| − | + | var span = document.getElementsByClassName("close")[0]; | |
| − | + | ||
| − | + | ||
| − | + | // When the user clicks on <span> (x), close the modal | |
| − | + | span.onclick = function() { | |
| + | modal.style.display = "none"; | ||
| + | } | ||
}) | }) | ||
Revision as of 14:06, 16 October 2016
Title
leader under the title, short introduction. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his.
Section 1
Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 2
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 2.1
Paragraph
Paragraph
Section 2.2
Paragraph
Paragraph
Section 2.3
Paragraph
Paragraph
Section 3
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 4
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Section 5
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
