Additional Image when MAIN Image is clicked

Ronan · January 28, 2019

Hi,

I have a gallery report DataPage, and I'm displaying an image (Main Image)in the results page via HTML block.

It is like a Dish Description that contains the details of that specific dish (ingredients, cooking methods, etc.), and I'm displaying the main image of the Dish in the results page. What I want is the ability to display additional image, preferable when I click the main image.

Please advise, and thank you for your time.

Regards,
Ronan

TsiBiRu · January 28, 2019

Hi @Ronan,

I have a have a work flow that is just like this, I've contacted support to assist me in implementing this. And they help me formulate a solution for this, to implement this solution kindly follow the steps below.

Notes: This solution will display 3 additional image when the main image is click.

1. On your results page, go to the HTML block that displays your main image and paste the code below. The code below will open another HTML DataPage as a pop-up window, and it will also pass the value/image that we will be displaying as an additional image.

<a href="javascript:void(window.open('
https://c5eib829.caspio.com/dp/d90b60006f822a89840c4a60b477?Image1=[@field:Main_Photo/]&amp;Image2=[@field:Photo_2/]&amp;Image3=[@field:Photo_3/]', 'Additional Images', 'width=700,height=550'));"><img alt="" src="[@app:mainImage/]" style="width: 200px; height: 200px; margin: 1px;" /> </a>

You can use the code as it is, just update the source of the images to match your images in your table. Refer to this screenshot http://prntscr.com/mde9bg

2. Create a new HTML DataPage and just paste the code below, you can use it as it is https://prnt.sc/mdec50.

<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  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;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">
<!-- Update the source of the Images *************************************  -->
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="[@Image1/]" style="width:100%">

</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="[@Image2/]" style="width:100%">

</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="[@Image3]" style="width:100%">
 
<!-- Update the source of the Images *************************************  -->
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

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

3. Deploy as URL the HTML DataPage that we just created, copy the deployed URL and update the deployed URL in our code in step 1.

That should do it, this solution is working well on my end. If you encounter any issue implementing it, just reply to this thread so that I can help you in implementing this workflow.

I hope this helps.

Regards,
TsiBiRu

Ronan · January 28, 2019

Hi @TsiBiRu,

Thank you so much, your solution worked perfectly.

- Ronan

IamNatoyThatLovesYou · September 29, 2022

Hello Everyone, just want to mention that we have a new TechTip that you can checkout using images that will zoom in and out the image that may be useful for this.

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/zooming-images-in-report-datapages/

- Natoy

ParkLoey · May 29

Hi! Just in case anyone wants to zoom an image on hover via the results page of a tabular report form:

Login

Additional Image when MAIN Image is clicked

Question

Ronan

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

TsiBiRu

Link to comment

Share on other sites

Ronan

Link to comment

Share on other sites

IamNatoyThatLovesYou

Link to comment

Share on other sites

ParkLoey

Link to comment

Share on other sites

Join the conversation

Browse