In this article we will show how you can integrate image gallery component ( Swiper ) into your PHPRunner or ASPRunner.NET application. Besides sliding images this component can also display HTML cards which makes it even more attractive. Check the video below we added a slider to the Welcome page that shows Categories table data in Cards format. It slides through all records automatically and on click it shows the selected record's View page in popup. It also remembers the index of the latest shown slide and if you leave this page and come back, it will start where you left off.
1. Style Editor -> Custom files.
Add a folder named swiper there and import files swiper-bundle.min.js and swiper-bundle.min.css ( attached to this post ).
2, Style Editor -> Templates -> headers.htm
Add the following two lines at the end:
<script src="swiper/swiper-bundle.min.js"></script>
<link href="swiper/swiper-bundle.min.css" rel="stylesheet">3. Custom CSS
Add the code from css.txt file.
4. Events -> custom_functions.js section.
Add the following code there:
function getCookie(name) {
// Add an equals sign to the name to ensure we match the correct cookie
const nameEQ = name + "=";
// Split the document.cookie string into an array of individual cookies
const ca = document.cookie.split(';');
// Loop through the cookie array
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
// Remove leading whitespace
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
// If the cookie string begins with the name we are searching for, return its value
if (c.indexOf(nameEQ) === 0) {
// Decode the cookie value using decodeURIComponent for proper handling of special characters
return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
}
// Return null if the cookie is not found
return null;
}5. Welcome page in the Page Designer.
It can be any other page in fact. Insert a code snippet and paste the following code there.
This code was tested with both images coming from the folder on the hard drive as well as with the data coming from the database. If you use data coming from the database, make sure to update this code replacing tables and field names.
PHP code
echo '<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->';
/* from the folder
// get a list of images from 'files' folder and save them to an array
$images = [];
$files = scandir('files');
foreach ($files as $file) {
$ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
if (in_array($ext, ['jpg', 'jpeg', 'png'])) {
$images[] = $file;
}
}
// randomize the order of images
shuffle($images);
//send image's HTML code to the output
foreach ($images as $image) {
echo '<div class="swiper-slide"><img src="files/' . htmlspecialchars($image) . '"></div>' . PHP_EOL;
}
*/
// from the database
$images = [];
$rs = DB::Query("SELECT CategoryID, file, CategoryName, Description FROM categories");
while ($data = $rs->fetchAssoc()) {
$fileJson = json_decode($data['file'], true);
if (is_array($fileJson)) {
foreach ($fileJson as $fileEntry) {
if (isset($fileEntry['name'])) {
$ext = strtolower(pathinfo($fileEntry['name'], PATHINFO_EXTENSION));
if (in_array($ext, ['jpg', 'jpeg', 'png'])) {
echo '<div class="swiper-slide" data-id="'.$data["CategoryID"].'">
<div><img src="' . htmlspecialchars($fileEntry['name']) . '"></div>
<div>
<div class="slide-title">' . $data['CategoryName'] . '</div>
<div class="slide-description">' . $data['Description'] . '</div>
</div>
</div>';
}
}
}
}
}
// randomize the order of images
// shuffle($images);
// rest of HTML
echo'</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>';C# code
MVCFunctions.Echo(@"<div class=""swiper"">
<!-- Additional required wrapper -->
<div class=""swiper-wrapper"">
<!-- Slides -->");
/* from the folder
// get a list of images from 'files' folder and save them to an array
var images = new List<string>();
string[] files = Directory.GetFiles(Server.MapPath("files"));
foreach (string file in files)
{
string ext = Path.GetExtension(file).ToLower().TrimStart('.');
if (ext == "jpg" || ext == "jpeg" || ext == "png")
{
images.Add(Path.GetFileName(file));
}
}
// randomize the order of images
var rng = new Random();
images = images.OrderBy(_ => rng.Next()).ToList();
// send image's HTML code to the output
foreach (string image in images)
{
string safeImage = System.Web.HttpUtility.HtmlEncode(image);
MVCFunctions.Echo($@"<div class=""swiper-slide""><img src=""files/{safeImage}""></div>" + Environment.NewLine);
}
*/
// from the database
var rs = DB.Query("SELECT CategoryID, file, CategoryName, Description FROM categories");
while (rs.fetchAssoc())
{
string fileRaw = Convert.ToString(rs.data("file"));
var fileJson = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Dictionary<string, string>>>(fileRaw);
if (fileJson != null)
{
foreach (var fileEntry in fileJson)
{
if (fileEntry.ContainsKey("name"))
{
string fileName = fileEntry["name"];
string ext = Path.GetExtension(fileName).ToLower().TrimStart('.');
if (ext == "jpg" || ext == "jpeg" || ext == "png")
{
string categoryId = Convert.ToString(rs.data("CategoryID"));
string categoryName = Convert.ToString(rs.data("CategoryName"));
string description = Convert.ToString(rs.data("Description"));
string safeFileName = System.Web.HttpUtility.HtmlEncode(fileName);
MVCFunctions.Echo(
$@"<div class=""swiper-slide"" data-id=""{categoryId}"">
<div><img src=""{safeFileName}""></div>
<div>
<div class=""slide-title"">{categoryName}</div>
<div class=""slide-description"">{description}</div>
</div>
</div>"
);
}
}
}
}
}
MVCFunctions.Echo(@"</div>
<!-- If we need pagination -->
<div class=""swiper-pagination""></div>
<!-- If we need navigation buttons -->
<div class=""swiper-button-prev""></div>
<div class=""swiper-button-next""></div>
<!-- If we need scrollbar -->
<div class=""swiper-scrollbar""></div>
</div>");Let us know if you have any questions using this in your own projects.
Sergey Kornilov admin
swiper-bundle.min.css
css.txt