Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #headerLogo{
- background: url(https://images2.alphacoders.com/698/698137.jpg);
- background-size: cover;
- height: 250px;
- display: block;
- margin-top: 50px;
- }
- #text{
- color: white;
- position: absolute;
- text-align:center;
- font-size: 36px;
- width: 100%;
- padding: 0;
- margin: 0;
- line-height: 250px;
- }
- .navbar{
- margin-bottom: 0px;
- }
- .fa{
- font-size:22px;
- color: #0077cd;
- }
- .fa:hover{
- color: #0890f2;
- }
- .footer{
- text-align: center;
- color: #c6c6c6;
- }
- #indexImage{
- width:100%;
- height: auto;
- }
- #myImg {
- border-radius: 5px;
- cursor: pointer;
- transition: 0.3s;
- }
- #myImg:hover {opacity: 0.7;}
- /* The Modal (background) */
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- padding-top: 100px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- .modal-content {
- margin: auto;
- display: block;
- width: 80%;
- max-width: 700px;
- }
- /* Caption of Modal Image (Image Text) - Same Width as the Image */
- #caption {
- margin: auto;
- display: block;
- width: 80%;
- max-width: 700px;
- text-align: center;
- color: #000000;
- padding: 10px 0;
- height: 150px;
- }
- /* Add Animation - Zoom in the Modal */
- .modal-content, #caption {
- -webkit-animation-name: zoom;
- -webkit-animation-duration: 0.6s;
- animation-name: zoom;
- animation-duration: 0.6s;
- }
- @-webkit-keyframes zoom {
- from {-webkit-transform:scale(0)}
- to {-webkit-transform:scale(1)}
- }
- @keyframes zoom {
- from {transform:scale(0)}
- to {transform:scale(1)}
- }
- /* The Close Button */
- .close {
- top: 15px;
- right: 35px;
- color: #ffffff;
- font-size: 60px;
- font-weight: bold;
- transition: 0.3s;
- }
- .close:hover,
- .close:focus {
- color: #bbb;
- text-decoration: none;
- cursor: pointer;
- }
- /* 100% Image Width on Smaller Screens */
- @media only screen and (max-width: 700px){
- .modal-content {
- width: 100%;
- }
- }
- // Get the modal
- var modal = document.getElementById('myModal');
- var images = document.getElementsByClassName("imageClass");
- for(var i = 0; i < images.length; i++){
- var img = images[i];
- var modalImg = document.getElementById("img01");
- var captionText = document.getElementById("caption");
- img.onclick = function(){
- modal.style.display = "block";
- modalImg.src = this.src;
- modalImg.alt = this.alt;
- captionText.innerHTML = this.alt;
- }
- }
- var span = document.getElementsByClassName("close")[0];
- // When the user clicks on <span> (x), close the modal
- $('#closeImage').onclick = function() {
- modal.style.display = "none";
- }
- {% extends 'layout.html' %}
- {% block title %}{{ title }}{% endblock %}
- {% block header %}{% include 'header.html' %}{% endblock %}
- {% block headerLogo %}{% include 'headerLogo.html' %}{% endblock %}
- {% block styles %}{% include 'styles.html' %}{% endblock %}
- {% block content %}
- <div>
- {% for key, val in projectImages %}
- {% if val.type == "image" %}
- <img id="myImg" class="imageClass" src="{{val.src}}" alt="{{val.title}}" width="300" height="200">
- {% elseif val.type == "video" %}
- <img id="myImg" class="videoClass" src="http://img.youtube.com/vi/{{val.src}}/0.jpg" alt="{{val.title}}" width="300" height="200">
- {% endif %}
- {% endfor %}
- <div id="myModal" class="modal">
- <span id="closeImage" class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
- <img class="modal-content" id="img01">
- <div id="caption"></div>
- </div>
- </div>
- <script src="../js/fotoInModal.js"></script>
- {% endblock %}
- {
- "title": "Argochamber",
- "indexContent":"Was created in 2012, by Pablo Blanco Celdrán and Eric Dacal Sanchez, in order to create fun games and for the whole world.",
- "navButtons" : [{"name": "Projects", "src": "./projects.html"}, {"name": "Contacts", "src": "./contacts.html"},{"name": "Teams", "src":"./teams.html"}],
- "imageUrl" : "https://avatars0.githubusercontent.com/u/17063359?v=4&s=200",
- "imageHeaderLogo" : "https://images2.alphacoders.com/698/698137.jpg",
- "headerNavBar": "navbar-light bg-primary",
- "fontawesome": [{"icon": "fa fa-facebook-official", "src": "https://www.facebook.com/argochamber/?ref=br_rs"},
- {"icon": "fa fa-twitter-square", "src": "https://twitter.com/argochamber"}],
- "projectImages":[{"title": "Spiderman in New York", "src": "../image/spidey.jpg", "type": "image"},
- {"title": "Sculpting link", "src":"ALbt17LLH54", "type": "video"}],
- "css": {
- "headerTextColor": "white",
- "headerFontSize": "36px"
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement