Hi there!
1/ Create a page with 1 detail view of a record containing pictures.
(detail view : 1 column) add as many as you want and style picts field and to "hide label". the pictures will be contained in table row
Say this is in Page_5 and the detail view is #view_10.
2/ Add the following function to your API/Code -> Javascript.
/*Simple-gallery function*/$.fn.gallery = function() {
var firstpict = “#”+$(this).attr(‘id’) + " tr:first-child"
var lastpict = “#”+$(this).attr(‘id’) +" tr:last-child"
var nextpicts = “#”+$(this).attr(‘id’) +" tr:nth-child(n+2)"
var allpicts = “#”+$(this).attr(‘id’) +" tr"$(this).addClass(“gallery”);
$(’<button id=“next”>></button>’).appendTo(this);
$(’<button id=“prev”><</button>’).appendTo(this);
$(firstpict).addClass(‘firstpict current’).css(‘display’,’’);
$(nextpicts).css(‘display’,‘none’);
$(lastpict).addClass(‘lastpict’);
$(allpicts).addClass(‘pict’);$(’#next’).click(function() {
if ($(’.current’).hasClass(‘lastpict’)) {
$(’.current’).removeClass(‘current’).css(‘display’,‘none’)
$(’.firstpict’).css(‘display’,’’).addClass(‘current’);
}
else {
$(’.current’).removeClass(‘current’).css(‘display’,‘none’)
.next().css(‘display’,’’).addClass(‘current’);
}
});$(’#prev’).click(function() {
if ($(’.current’).hasClass(‘firstpict’)) {
$(’.current’).removeClass(‘current’).css(‘display’,‘none’)
$(’.lastpict’).css(‘display’,’’).addClass(‘current’);
}
else {
$(’.current’).removeClass(‘current’).css(‘display’,‘none’)
.prev().css(‘display’,’’).addClass(‘current’);
}
});
};
3/ Add the following Css to API/Code -> CSS
/* Gallery */
#prev, #next {
cursor: pointer;
color: white;
font-size: 24px;
height: 50px;
border-radius:25px;
width: 50px;
position: absolute;
top:50% ;
background: rgba(51,51,51,0.2);
border: none; z-index:100}#next {
right:5% ; }#prev {
left: 5%;}#prev:focus, #next:focus {
outline:0}#prev:hover, #next:hover {
background: rgba(51,51,51,0.8) !important}.gallery {
height : 450px}.gallery .kn-details-column, .gallery .kn-details-group, .gallery .kn-details-group-column, .gallery .kn-label-none, .gallery tbody {
height: 100% !important}.gallery td {
vertical-align: middle}.gallery tr {
text-align: center}
You can style previous and next buttons playing with the above CSS.
4/ Call the function on wished page render. (API/Code -> Javascript)
/* Triggers gallery on page_5 render*/
$(document).on(‘knack-page-render.page_5’, function (event, page) {
$(’#view_10’).gallery();
});
You can do it on any Page / view by just calling the function.
You can see how it looks like on my app - click the "camera" link to view the gallery.