Adding Swipe Function for Image Navigation

3 minutes to read

Enhance your app user experience with a simple lightbox solution that displays expanded images or even YouTube video previews with:

The swipe function of mobile devices, or
a handy navigation arrow for desktop devices.

This article guides you on how to add this feature to your Report DataPages using the provided JavaScript.

Steps to create the swipebox parameter:

To configure the swipe function, you will need to add the relevant external parameter by following these steps.

Download this JavaScript and unzip the file.
On the Caspio home page, click All assets.
From the left panel, click Files. In the upper right corner, click Upload file. Upload the unzipped JavaScript.
In your application, in the App parameters section, click Manage.
Create an app parameter manually, using the name Swipebox_JS, type File, and select the uploaded JavaScript as value.

Steps to add swipe function for image viewing:

Prerequisites: Make sure that you have a table with at least one file field for images and one unique field.

Create or edit a Report DataPage. Select a relevant table as the data source. Proceed to the Configure Results Page or Configure Details Page screen and add an HTML block.
In the HTML Block, disable the HTML Editor and paste the following code:
Optional: In the pasted code:
1. Replace [@field:Image/] with the image field from your table. Use the Insert button at the lower right-hand corner of the HTML panel to insert the image field parameter in File URL format.
2. Change the height attribute as needed. As an alternative to specifying the height of the original image file, you can use the Image Resizer to have Caspio automatically create a separate thumbnail file.

Insert Header & Footer. Disable the HTML Editor and paste the following codes:

Header: Swipebox_JS is an app parameter set to a File type. You can download the JavaScript file from here and unzip the file.

Footer:

Steps to add swipe function for YouTube videos previewing:

Prerequisites: Make sure that you have a table with at least one field for YouTube links, e.g. https://www.youtube.com/watch?v=2_vHlKRw3dg, and one unique field.

Create or edit a Report DataPage. Select a relevant table as the data source. Proceed to the Configure Results Page or Configure Details Page screen and add an HTML block.
In the HTML Block, disable the HTML Editor and paste the following code:
Replace the URL_FIELD in the HTML code with the field name from your table.
Insert Header & Footer. Disable the HTML Editor and paste the following codes:

Header: Swipebox_JS is an app parameter set to a File type. You can download the JavaScript file from here and unzip the file.

Footer:

Related information:

Creating a Lightbox View for Images

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge’s standard feature set. These solutions are provided “as is” without warranty, support, or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<!-- For viewing images -->

<div>
 <a href="[@field:Image/]" class="custom"><img src="[@field:Image/]" height="200" /></a>
</div>

code2

<!-- For CSS and JQuery plugins -->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="[@app:Swipebox_JS/]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/css/swipebox.css"/>

code3

<!-- to know more options, visit this link https://github.com/brutaldesign/swipebox -->

<script>

$(function () {
    $('.custom').swipebox(); // custom is the class from HTML Block, you can freely change this
});

</script>

code4

<!-- For viewing videos from URL -->

<p><a href="[@field:URL_FIELD]" class="custom">Show Video</a></p>

code5

<!-- For CSS and JQuery plugins -->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="[@app:Swipebox_JS/]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/css/swipebox.css"/>

code6

<!-- to know more options, visit this link https://github.com/brutaldesign/swipebox -->

<script>

$(function () {
    $('.custom').swipebox(); // custom is the class from HTML Block, you can freely change this
});

</script>