Create a bootstrap carousel on the apps home page

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Create a bootstrap carousel on the apps home page

Post by fgazza » 2019-12-06 15:53

Hello everyone!
I have a "photo" table with an "image" field.
I would like to create a bootstrap carousel in the appgini login page. The carousel should take the images from the "image" field of the "photo" table.

Could anyone help me? Thanks.

Fabiano

fgazza
Veteran Member
Posts: 205
Joined: 2019-04-30 17:37

Re: Create a bootstrap carousel on the apps home page

Post by fgazza » 2019-12-10 05:58

Hello everybody,
I am still trying to create a carousel by taking images from a table of objects.
In the end I thought of creating a customized page in which the carousel should appear.
I have a table fotografie with the following fields:
pri_key is the primary key
titolo is a text field that contains a title for the image (a short caption)
fotografia is the field in which I upload the images.
I use last version of appgini.
I created this code (taked from https://www.w3schools.com/howto/howto_js_slideshow.asp). Structure and style of carousel seems to work but I can't insert images from the ######## field of the ###### table into the code array.

______________my code________________
<?php

$currDir = dirname(__FILE__);
include("$currDir/defaultLang.php");
include("$currDir/language.php");
include("$currDir/lib.php");
include_once("$currDir/header.php");


/* grant access to all users who have access to the fotografie table */
$fotografia_from = get_sql_from('fotografie');
if(!$fotografia_from) exit(error_message('Non sei autorizzato a visualizzare questa risorsa!', false));

$items = array();
$item_fields = get_sql_fields('fotografie');
$item_from = get_sql_from('fotografie');
$res = sql("select {$item_fields} from {$item_from}",$eo);
while($row = db_fetch_assoc($res)){
$items[] = $row;
}

var_dump($items);

?>

<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);
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

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

<body>

$fotografia_src = getUploadDir("") .$fotografie["fotografia"];

<?php foreach($items as $i=>$fotografie){?>

<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<!--<img src="img_nature_wide.jpg" style="width:100%">-->
<?php echo "<img src=\"{$fotografia_src}\" />"; ?>
<div class="carousel-background" style="background-image: url(<?php echo substr($row['fotografia'], 3); ?>)">
<div class="text">Caption Text</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</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>
<?php }?>

<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.style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots.className = dots.className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>

</body>

______________end of code___________________________________

I hope someone can help me.
THANKS!
Fabiano

Post Reply