Jump to content

Search the Community

Showing results for tags 'javascript gallery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. 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...