Create a simple picture Gallery based on detail view

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

$ = 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"

$(’<button id=“next”>></button>’).appendTo(this);
$(’<button id=“prev”><</button>’).appendTo(this);
$(firstpict).addClass(‘firstpict current’).css(‘display’,’’);

$(’#next’).click(function() {
if ($(’.current’).hasClass(‘lastpict’)) {
else {

$(’#prev’).click(function() {
if ($(’.current’).hasClass(‘firstpict’)) {
else {

3/ Add the following Css to API/Code -> CSS

/* Gallery */
#prev, #next {
cursor: pointer;
color: white;
font-size: 24px;
height: 50px;
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 {

#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) {

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.

Hi Brad. Nope. few pages of the app do not require a login and Chat is open to all so I didn't investigate this

Steven - a side question about

Noticed you're using it on this page and wondering if you've tried accessing the Tawk API to set the Task user name from the Knack username? (something I'm trying to do without success so far)

Thanks again Stevan, this is great stuff.