Jump to content

rannatr

Members
  • Posts

    8
  • Joined

  • Last visited

rannatr's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. You can see My final result for postage stamps gallery here: http://www.ragner.ee/en Kindest regards, Thank You very much Sir, R.
  2. You can see My final result for postage stamps gallery here: http://www.ragner.ee/en Kindest regards,
  3. i fixed this issue via jsquery + modal javas. post: http://w3schools.invisionzone.com/index.php?showtopic=55668 regards
  4. Thanks alot! Everything sorted out, kindest regards
  5. Thanks, I got the general idea but I feel I'm too novice to implement it into my own code. Atleast didnt't work out quite well. Can you give me some example how I can implement this particularly in my case? kindest regards, Ragner
  6. Hello! I'm pretty new into coding and I have following problem: I have modal gallery which has Close X button on topright and also I have script for browsing back and forward with arrow keys. Also ESC button works for closing my modal window+clicking outside modal. It looks like this: <div id="myModal" class="modal"> <span class="close">×</span> <script> // Get the modal var modal = document.getElementById('myModal'); // 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"; } However now I want to add Prev and Next buttons with span and I want to onclick = clickHandler; So if i click on my prev or next span It will go to handler (just as it works for browsing with keyboard arrow keys) So I made CSS and put back and forward spans in place: <div id="myModal" class="modal"> <span class="close">×</span> <span class="next">❱</span> <span class="prev">❰</span> <img class="modal-content" id="img01"> <div id="caption"></div></div><script>// Get the modalvar modal = document.getElementById('myModal');// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";} How I can make clicking on prev or next spans work for browsing my slides (as it works with arrow keys on keyboard). Currenlty only my close button works. Thanks,
  7. And also is there in my code any simple way to implement close function to modal popups ESC button: Regards, UPDATE i solved this with following lines after // Get the modal (so it will close my modal either i click outside modal or press ESC) window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } window.onkeyup = function (event) { if (event.keyCode == 27) { modal.style.display = "none"; } }
  8. Hello dear friends and nice to meet you all! Im new to web design and Im planning to start solid .EE domain website soon about classic and modern stamps. Im aiming to be very minimalistic and first I'll start off with galleries and examples. Who knows maybe in future I'll add some history and webstore aswell. Basic prototype is posted on Estonian Telia (biggest internet provider in region) free service hot.ee: If somone happens to be stamp collector, this might be quite interestign insight into estonian examples: http://hot.ee/f/filately/indexEN.html Here are my concerns and questions: hot.ee wont provide any php so all whats there is HTML + javascript + CSS I use following modal solution for showing single pictures with description: before <BODY>: <style> .inactiveLink { pointer-events: none; cursor: default; } a:link, a:visited { background-color: #333333; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: #666666; } /* The Image Box */ div.img { border: 1px solid #ccc; } div.img:hover { border: 1px solid #777; } /* The Image */ div.img img { width: 100%; height: auto; cursor: pointer; } /* Description of Image */ div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } /* Add Responsiveness */ .responsive { padding: 0 6px; float: left; width: 24.99999%; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 100%; max-width: 1024px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 100%; max-width: 1024px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } @keyframes zoom { from {transform:scale(0.1)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* Responsive Columns */ @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } .modal-content { width: 100%; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } /* Clear Floats */ .clearfix:after { content: ""; display: table; clear: both; } </style> And now in <DIV> i just bring "responsive: <div class="responsive"> <div class="img"> <img src="margid/Pilt9.jpg" alt="Leht 2" width="300" height="200"> <div class="desc">Ilus Pätsi täisseeria. +1991 tempelmargid</div> </div> and then modal part and close button X: <div class="clearfix"></div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // 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"; } // Get all images and insert the clicked image inside the modal // Get the content of the image description and insert it inside the modal image caption var images = document.getElementsByTagName('img'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); var i; for (i = 0; i < images.length; i++) { images.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; modalImg.alt = this.alt; captionText.innerHTML = this.nextElementSibling.innerHTML; } } </script> So this is lovely to click single picture and then manually close em. However I also want to add navigation buttons back < and forward > So i can browse through my pictures+descriptions. similar here: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self So I want to navigate through my pictures, with < and > buttons. Is there and good solution for doing that with my modal? Basically make slider in my modal popup Another question I have about single gallery: http://hot.ee/f/filately/gallery.html which uses this system: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2 for my pics I set: <div class="w3-content w3-display-container" style="width:100%"> However pictures are clearly not 100%, little foggy and out of res. Original res should look like this: http://hot.ee/f/filately/margid/Pilt1.jpg Thank you very mych for any help Kindest regards, R.
×
×
  • Create New...