Tijden veranderen
aantal zichbare foto's varieren
Ik ben alleen een beetje thuis in HTML, CSS en een nog kleiner beetje in PHP. Van jQuery of JavaScript weet ik nog niks en dat wil ik ook niet gebruiken. Dus ik wil ook geen aparte knop toevoegen. Het liefst zou ik iets willen doen met een IF statement en 'isset $_GET' (en nog iets erachter), zodat ik meteen daarmee om leer te gaan en zodat je alleen maar in de adresbalk bijvoorbeeld een getal hoeft te veranderen.
Wie heeft voor mij de oplossing voor dit probleem? Alvast bedankt voor het meedenken.
Gewijzigd op 16/10/2017 18:35:53 door - Ariën -
Oorspronkelijk had ik één grote array met alle 20 foto's. Nu heb ik 5 kleinere arrays gemaakt en als ik ze na elkaar uitlees komen er i.c.m. CSS 5 rijen van 4 foto's onder elkaar.
Dit staat in CSS:
#container{
margin: 0 auto;
width: 900px;
background-color: #ffffff;
}
ul {
list-style-type: none;
display: flex;
margin-top: 0;
padding-left: 20px;
}
ul li img {
margin-right: 20px;
}
Het bestand van de eigenlijke webpagina bevat deze 'include'-instructie:
<div id="container">
</div>
En zo heb ik het PHP-bestand geformuleerd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
$rij1 = array('<img src="img/photo1.jpg">', '<img src="img/photo2.jpg">', '<img src="img/photo3.jpg">', '<img src="img/photo4.jpg">');
$rij2 = array('<img src="img/photo5.jpg">', '<img src="img/photo6.jpg">', '<img src="img/photo7.jpg">', '<img src="img/photo8.jpg">');
$rij3 = array('<img src="img/photo9.jpg">', '<img src="img/photo10.jpg">', '<img src="img/photo11.jpg">', '<img src="img/photo12.jpg">');
$rij4 = array('<img src="img/photo13.jpg">', '<img src="img/photo14.jpg">', '<img src="img/photo15.jpg">', '<img src="img/photo16.jpg">');
$rij5 = array('<img src="img/photo17.jpg">', '<img src="img/photo18.jpg">', '<img src="img/photo19.jpg">', '<img src="img/photo20.jpg">');
echo '<ul>';
foreach ($rij1 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij2 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij3 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij4 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij5 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
?>
$rij1 = array('<img src="img/photo1.jpg">', '<img src="img/photo2.jpg">', '<img src="img/photo3.jpg">', '<img src="img/photo4.jpg">');
$rij2 = array('<img src="img/photo5.jpg">', '<img src="img/photo6.jpg">', '<img src="img/photo7.jpg">', '<img src="img/photo8.jpg">');
$rij3 = array('<img src="img/photo9.jpg">', '<img src="img/photo10.jpg">', '<img src="img/photo11.jpg">', '<img src="img/photo12.jpg">');
$rij4 = array('<img src="img/photo13.jpg">', '<img src="img/photo14.jpg">', '<img src="img/photo15.jpg">', '<img src="img/photo16.jpg">');
$rij5 = array('<img src="img/photo17.jpg">', '<img src="img/photo18.jpg">', '<img src="img/photo19.jpg">', '<img src="img/photo20.jpg">');
echo '<ul>';
foreach ($rij1 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij2 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij3 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij4 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
echo '<ul>';
foreach ($rij5 as $value){
echo '<li>'.$value.'</li><br>';
}
echo '</ul>';
?>
Maar dat wil ik zo niet laten. Bij een webshop heb ik wel eens gezien dat je meer produkten kunt opvragen. Zoiets wil ik ook voor mijn foto's maken. In plaats van alle 20 foto's tegelijkertijd te tonen, wil ik het aantal zichtbare foto's zelf kunnen kiezen. En in de adresbalk komt dan iets te staan als:
http://localhost/album.php?aantal=9
En als ik dan 'aantal=9' verander in 'aantal=5' dan zou ik bijvoorbeeld maar 5 foto's moeten zien.
Ik denk dat ik moet beginnen met het formuleren van een variabele zonder inhoud met daaronder een controle:
Ergens (maar waar???) moet er ook een link geplaatst worden met een verwijzing naar de adresbalk:
<a href="http://localhost/album.php?aantal=...">...</a>
En wat zou er dan op de plek van de puntjes moeten staan?
Ik zou vervolgens iets met een IF-statement willen doen waarin bijvoorbeeld het volgende voorkomt:
if($aantal == '...'){
echo '...';
}
Misschien ben ik wel helemaal verkeerd begonnen en is dat de reden dat ik hier niet uitkom. Moet ik eventueel gebruik maken van een multidimensionale array?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$photos = array(
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo1.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo2.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo3.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo4.jpg">'),
//etc.
);
?>
$photos = array(
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo1.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo2.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo3.jpg">'),
array('href' => 'localhost/album.php', 'content' => '<img src="img/photo4.jpg">'),
//etc.
);
?>
Waar en hoe moet ik het PHP-bestand aanpassen om het beoogde trucje te realiseren? Wie is zo vriendelijk om wat meer begrijpelijke uitleg te geven? Alvast bedankt.