SIMPLE MODAL PHOTO GALLERY ON A PAGE WITHOUT APP

Highlighted
Excursionist
30 0 6

Hello Community,

I'm trying to add a photo gallery to a Shopify page, but I can't seem to get it to work.

Here is the non-shopify version which works fine: http://dewla.com/modal

On Shopify: https://karan.dewla.com/pages/strut-products

 

HTML

<div id="noModal" class="gallery-container-all">

	<div class="gallery-container">
	  <img class="gallery-photo" src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-01.jpg?v=1596667401" alt="Strut System" onclick="openModal();currentSlide(1)">
	   <span class="gallery-title">Strut System</span>
	  <span class="gallery-text">Custom Strut and fittings grid for data center in San Francisco Bay Area</span>
	</div>
	<div class="gallery-container">
	  <img class="gallery-photo" src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-02.jpg?v=1596667401" alt="Strut System" onclick="openModal();currentSlide(2)">
	  <span class="gallery-title">Strut System</span>
	  <span class="gallery-text">Custom Strut and fittings grid for data center in San Francisco Bay Area</span>
	</div>
	<div class="gallery-container">
	  <img class="gallery-photo" src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-03.jpg?v=1596667401" alt="Strut System" onclick="openModal();currentSlide(3)">
	   <span class="gallery-title">Strut System</span>
	  <span class="gallery-text">Custom Strut and fittings grid for data center in San Francisco Bay Area</span>
	</div>
	<div class="gallery-container">
	  <img class="gallery-photo" src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-04.jpg?v=1596667401" alt="Strut Support" onclick="openModal();currentSlide(4)">
	   <span class="gallery-title">Strut Supports</span>
	  <span class="gallery-text">Custom strut system for pipeing support</span>
	</div>
	<div class="gallery-container">
	  <img class="gallery-photo" src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-05.jpg?v=1596667401" alt="Stainless Unistrut Trapeze" onclick="openModal();currentSlide(5)">
	   <span class="gallery-title">Stainless Unistrut Trapeze</span>
	  <span class="gallery-text">Custom Stainless Unistrut trapeze for San Francisco Airport. All the supports were individually tagged and palletized</span>
	</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 / 5</div>
      <img src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-01.jpg?v=1596667401" style="width:100%; height: auto; max-height: 600px;">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 5</div>
      <img src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-02.jpg?v=1596667401" style="width:100%; height: auto; max-height: 600px;">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 5</div>
      <img src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-03.jpg?v=1596667401" style="width:100%; height: auto; max-height: 600px;">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 5</div>
      <img src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-04.jpg?v=1596667401" style="width:100%; height: auto; max-height: 600px;">
    </div>
	
	    <div class="mySlides">
      <div class="numbertext">5 / 5</div>
      <img src="https://cdn.shopify.com/s/files/1/0278/8157/0339/files/struts-and-fittings-05.jpg?v=1596667401" style="width:100%; height: auto; max-height: 600px;">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>


  </div>
</div>	

 

JavaScript

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");
  
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }

  slides[slideIndex-1].style.display = "block";
}

 

CSS

.gallery-container-all{
 @import url('https://fonts.googleapis.com/css?family=Poppins');
  width: fit-content;
  height: auto;
  display:block;
  font-family: 'Poppins', sans-serif;
}

.gallery-container{
  width: calc(20% - 6px);
  overflow:hidden;
  height: fit-content;
  margin:3px;
  padding: 0;
  display:block;
  position:relative;
  float:left;

}

img.gallery-photo {
  width: 100%;
  transition-duration: .3s;
  max-width: 100%;
  max-height: 300px;
  display:block;
  overflow:hidden;
  cursor:pointer;
}
.gallery-title{
  position:absolute;
  display:block;
  cursor:pointer;
  top: 35%;
  display: none;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 1.6em;
  text-shadow: 1px 5px 10px black;
  transition-duration: .3s;
}
.gallery-text{
  position:absolute;
  top: 70%;
  cursor:pointer;
  max-width: 80%;
  text-align:center;
  left: 50%;
  text-shadow: 1px 5px 10px black;
  font-size: 1em;
  display:none;
  margin-right: -50%;
  transition-duration: .3s;
  transform: translate(-50%, -50%) 
}

.gallery-container:hover img{
  transform: scale(1.2);
  transition-duration: .3s;
  filter: contrast(10%);
  opacity: .7;
}
.gallery-container:hover span{
  color:white;
  display: block;
  transition-duration: .3s;
}

@media only screen and (max-width: 905px) {
    .gallery-container {
        width: calc(33% - 6px);
    }
}

@media only screen and (max-width: 800px) {
    .gallery-container {
        width: calc(50% - 6px);
    }
}
@media only screen and (max-width: 400px) {
    .gallery-container {
        width: 100%;
    }
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 801;
  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: 850px;
}

/* 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;
}


/* 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;
}
0 Likes
Highlighted
Excursionist
30 0 6

I did figure out a partial solution.  Some CSS tags overlapped with exiting ones from the theme. So I just changed how everything is labeled.

0 Likes
Highlighted
Tourist
15 0 0

 

Hello , 

Your work seems great ! can you please tell me method that where you put your codes in what sections respectively  , as similarly I have one photo gallery to integrate - .js file , .css file (uploaded both in Assets) and now i have html code but moment i paste same in new page html section , it vanishes away.

 

 

0 Likes
Highlighted
Excursionist
30 0 6

Hello @jaspreet30 ,

I created a custom template page for the gallery and called it page.gallery.liquid. In that template I added the JS code. The HTML code I added it to the page, in the page editor and then selected "page.gallery" as the template suffix.

For the CSS, I added the code the bottom of theme.scss.liquid.

However....... if you looked at it in the last few days, I'm actually using an app right now. I just installed the trial of "Cozy Image Gallery", but I might switch back to the coded version again. It's not that much better.

Regards, Diego

 

0 Likes