Jump to content

CSS gallery slideshow My Stamp Gallery

rannatr

By rannatr
in HTML/XHTML

 Share

Recommended Posts

rannatr Newbie

rannatr

Posted
Posted (edited)

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.

Edited by rannatr
Link to comment
Share on other sites
rannatr Newbie

rannatr

Posted
  • Author
Posted (edited)

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";
}
}

Edited by rannatr
Link to comment
Share on other sites
  • 4 weeks later...
  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...