Product Info Deascription - Adding Images & Image Links

♥Dnj1964 · March 16, 2019

Edge BS4

Wanting to add a group of small clickable images that open a pop-up to a larger image similar to what the colorbox does but without obscuring the whole page.

Not sure if I am on the right track, assume that it has to be implemented in some type of modal....

Did a search for image links - bootstrap and this is the code that I came up with...

<head> elements....

<css> elements....

<body> elements....

<js> elements.....

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* 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: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  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 {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  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;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>






  Image Modal
Using CSS to create a modal (dialog box) that is hidden by default.
JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. 
Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.

  
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

  
  
  
  
  
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

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

♥Dnj1964 · March 16, 2019

Thinking this over and don't know how badly this messes things up or if it even works and if it creates any vulnerabilities. But here goes nothing...

Add this code to /public_html/includes/template_top.php

<meta name="viewport" content="width=device-width, initial-scale=1">

Add this code to /public_html/user.css

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* 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: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  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 {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  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;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

Save this as a .js file and upload to /public_html/ext/js/mymodal.js

Then add script call to /public_html/includes/modules/content/product_info/templates/tpl_cm_pi_description.php

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

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

Use the html on the product description pages as needed

<img id="myImg" class="img-responsive" src="images/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

mymodal.js

♥Dnj1964 · March 17, 2019

The code above doesn't work or at least didn't for me.

What I did do is...

Uploaded 2 files /public_html/ext/js

jquery.js and main.js (They are attached below)

In /public_html/includes/modules/content/product_info/templates/tpl_cm_pi_description_tabs.php

Added above <?php

<script src="ext/js/jquery.js" type="text/javascript"></script>
<script src="ext/js/main.js" type="text/javascript"></script>

Added to bottom of /public_html/includes/modules/content/product_info/templates/tpl_cm_pi_description_tabs.php (I am using Product Description with Tabs) by JCMagpie

In /public_html/includes/modules/content/product_info/templates/tpl_cm_pi_description.php (Stock Edge BS4) would be below the </div>

<style>
a{
  text-decoration:none;
  color:#f30;	
  }


p{
  clear:both;
  margin:0;
  padding:.5em 0;
  }


pre{
	display:block;
	font:100% "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	overflow:auto;
	width:800px;
    }

img{
    border:none;
    }


ul,li{
      margin:0;
      padding:0;
      }


li{
   list-style:none;
   float:left;
   display:inline;
   margin-right:10px;
   }

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}
</style>

Then when adding product place the code where you need. I chose to create 2 image files first is the thumbnail which loads with the page and then the mouseover larger image

<ul>
<li>
<a href="images/LARGE IMAGE 1" class="preview" title="TEXT YOU WANT BELOW IMAGE ON MOUSE OVER">
<img class="img-responsive" src="images/LARGE IMAGE 1 THUMB" alt="IMAGE NAME">
</a>
</li>

<li>
<a href="images/LARGE IMAGE 2" class="preview" title="TEXT YOU WANT BELOW IMAGE ON MOUSE OVER">
<img class="img-responsive" src="images/LARGE IMAGE 2 THUMB" alt="IMAGE NAME">
</a>
</li>
</ul>

All I can tell you is that it works for my needs, don't think it should cause any issues but maybe Burt or another can have a look and decide that for sure.

Best of luck!

jquery.js

main.js

♥Dnj1964 · March 17, 2019

And this is what you get by adding this

image.png.e73efe1c6311eb0d5753016c9d805145.png

Product Info Deascription - Adding Images & Image Links

Recommended Posts

♥Dnj1964

♥Dnj1964

♥Dnj1964

♥Dnj1964

Archived

Browse

Activity