Skip to main content

Smart Photo Gallery

By
Smart Photo Gallery

Source Code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

 * {
  box-sizing: border-box;
}

 .row > .column {
  padding: 0 8px;
}

 .row:after {
  content: "";
  display: table;
  clear: both;
}

 .column {
  float: left;
  width: 25%;
}

 /* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

 /* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

 /* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

 .close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

 .mySlides {
  display: none;
}

 .cursor {
  cursor: pointer
}

 /* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

 /* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

 /* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

 /* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

 img {
  margin-bottom: -4px;
}

 .caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

 .demo {
  opacity: 0.6;
}

 .active,
.demo:hover {
  opacity: 1;
}

 img.hover-shadow {
  transition: 0.3s
}

 .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
</style>
<body>

 <h2 style="text-align:center">Lightbox</h2>

 <div class="row">
  <div class="column">
    <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

 <div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

     <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="img_nature_wide.jpg" style="width:100%">
    </div>

     <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="img_fjords_wide.jpg" style="width:100%">
    </div>

     <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
    </div>
 
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img_lights_wide.jpg" style="width:100%">
    </div>
 
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

     <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

 <script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

 function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

 var slideIndex = 1;
showSlides(slideIndex);

 function plusSlides(n) {
  showSlides(slideIndex += n);
}

 function currentSlide(n) {
  showSlides(slideIndex = n);
}

 function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
 
</body>
</html>

Thanks and Regards,
Tech bird
Labels:

Comments

Post a Comment

Popular posts from this blog

BIG DATA ANALYTICS

By
BIG DATA ANALYTICS Have you ever hit upon how Amazon and Flip kart could possible verdict what we want; how the Google auto completes our search; how the YouTube looks into videos we want to watch? When we open YouTube, we will be at sixes and sevens, when we find ads related to what we have searched earlier in the past days. This is where we find ourselves in the era of big data analytics. More than 3 trillion bytes of information are being generated everyday through our smart phones, tablets, GPS devices, etc.  Have we thought about what can be done with all these information? This is where the data analytics comes into play. Big data analytics is just the study of future build up to store data in order to extract the behaviour patterns. The entire social networking website gathers our data which are related to our interest which is usually done by using our past search or any other social information. Data analytics will lead to a walkover in near future....
342 comments
Read more

Managing IT Infrastructure in Company - Cloud Computing

By
Managing IT Infra in Company Imagine you start a company, and you have a website for that company. The website is hosted on a server which you bought for your small company. Your company is growing and growing. People are visiting your site. Soon you start encountering issues with your website since the traffic on your website is very high and the people are visiting at the same time. When many people are using the same website at the same time, the server slows down.   On the other hand, people using your website will become very less in number if the server slows down. As a result the traffic increases which ultimately increases the power. How to solve this issue? You get more servers in order to resolve this problem which is quite expensive. You have to pay for installation, maintenance and service.  Instead put your website on the server which is online which will be always available and there is no need for any physical equipment. You only have to pay...
10 comments
Read more

Amazon Elastic Compute Cloud (Amazon EC2)

By
Amazon Elastic Compute Cloud (Amazon EC2) What is AWS EC2 ? Amazon Elastic Compute Cloud, EC2 is a web service from Amazon that provides resizable compute services in the cloud. What do you mean by resizable in AWS EC2 ? You can quickly scale up or scale down the number of server instance you are using based upon on your traffic.  What is called as Instance? An instance is a virtual server for running applications on Amazon’s EC2. Simply Virtual Machine is called as Instance(i.e)it holds the HDD, OS, RAM, Network Connection Whatever things that are need to run a system.  Note : Everything is Virtual You can’t able to see the HDD, RAM , or CPU. Only thing is you can able to configure it based on your need.    So here is the Definition….  Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. Why Amazo...
11 comments
Read more