Jump to content
  • 0

Additional Image when MAIN Image is clicked




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.


Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.

* {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}

<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 class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="[@Image2/]" style="width:100%">


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

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


<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> 

var slideIndex = 1;

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

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...