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/]&Image2=[@field:Photo_2/]&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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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 reacted to TsiBiRu in Limit the width of my dropdown.thumb.jpg.03878e50b4d1236f6c1e432d00fe2a55.jpg)
Ronan got a reaction from DefinitelyNot31337 in Auto Focus After Ajax Refresh
.thumb.jpg.03878e50b4d1236f6c1e432d00fe2a55.jpg)