Groeperen van items

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

BI Ontwikkelaar

Ben jij gek op het verzamelen en analyseren van informatie? En wil je met deze passie graag zorgorganisaties meer inzicht verschaffen? Lees dan snel verder. Jouw baan Als BI ontwikkelaar Datawarehouse help je zorgorganisaties bij het inzichtelijk maken en grafisch presenteren van hun data. De ene dag werk je aan rapportages en kubussen, een dag later spreek je af met je collega’s om je in een ingewikkeld zorgproces te verdiepen. Je verwerkt informatiewensen samen met onze ontwikkelaars in de software. Afwisselend en uitdagend, want je werkt aan meerdere projecten tegelijk. Wat voor projecten? Dat stemmen we zoveel mogelijk af op

Bekijk vacature »

Fullstack PHP developer gezocht voor reisbranche

Functieomschrijving Voornamelijk werk je hier aan de backend echter zal je ook op de front-end een bijdrage gaan leveren. Ze werken hier met Laravel, Vue.js en MySQL. Er wordt hier ook veel aandacht besteed aan code reviews en unit testing. Ze werken hier Scrum/Agile met wekelijkse sprints op hoog niveau. Sommige veroudererde projecten die gebouwd zijn met Zend worden overgezet naar Laravel. Functie-eisen - Je hebt HBO werk en denk niveau; - Je hebt minimaal 4 jaar ervaring als Fullstack developer; - Je hebt kennis van Laravel; - Ervaring met Agile Scrum werken. Bedrijfsomschrijving Deze organisatie begeeft zich in de

Bekijk vacature »

MS SQL Developer Automatisering Miljoenen gebruike

Functieomschrijving Wil jij als SQL Developer aan het werk binnen een van de meest complexe organisaties van Nederland? Wil jij meedenken en werken aan een platform met miljoenen gebruikers? Lees dan snel verder! Functie-eisen Hbo denk - en werkniveau; Minimaal 3 jaar ervaring, bij voorkeur in een soortgelijke functie of doormiddel van stage; Ervaring met SQL Server 2012 of hoger; Ervaring met SQL Server HA techniekene FCI en AG, SQL Native Backup; Ervaring met Windows 2012/2016; Ervaring met PowerShell op het gebied van deployment automation en het automatiseren van processen; Bedrijfsomschrijving Als SQL Developer kom je te werken in de

Bekijk vacature »

Java Developer - Digitale Overheid

FunctiebeschrijvingJava Developer: Wil jij een bijdrage leveren aan de ontwikkeling van de digitale overheid en de maatschappelijke vraagstukken waar we met elkaar voor staan? Bel of Whatsapp met Mark Hartman via 06 29070400! Wat ga je doen? Als Java Developerhoud jij je bezig met het realiseren van mooie en innovatieve oplossingen voor de Nederlandse overheid. Hoe? Het ontwerpen en ontwikkelen met Java in een van onze complexe projecten. Waarom? Om met jouw code het verschil te maken in het hart van de digitale overheid in Nederland. Waar? Bij CGI in Rotterdam, dé IT-specialist op het gebied van digitale overheid. Met

Bekijk vacature »

Mobile Developer

Ontwikkel jij graag door aan onze innovatieve, prijswinnende mobiele identiteitsverificatie oplossing ReadID? Innovalor zoekt een Mobile Developer (Android / iOS) Functie omschrijving Ontwikkelen van onze ReadID SDK voor Android en/of iOS, zowel MRZ- als NFC-functionaliteiten; Bijdragen aan onze API-documentatie en geautomatiseerde tests; Ontwikkelaars van onze klanten helpen om de ReadID API optimaal te gebruiken; Demo-apps ontwikkelen om ReadID te demonstreren aan potentiële klanten; Ontwikkelen van de publieke ReadID demo-app voor de Play Store en/ofApp Store; Ontwikkelen voor onze kant-en-klare / white-label apps; Werken met technologiepartners die aanvullende producten hebben, zoals gezichtsherkenning; Bijdragen aan de routekaart voor ReadID; Werken met en

Bekijk vacature »

Full-Stack Web Developer

Kennis van C#, JavaScript, CSS en HTML5? En wil je die kennis inzetten om de zorg te verbeteren met slimme en innovatieve online portalen? Jouw baan Als Full-Stack Web Developer programmeer jij zowel front-end als back-end en ontwikkel je nieuwe functionaliteiten in het webportaal voor zorgverleners of patiënten. Denk hierbij aan vragenlijsten, labuitslagen en het bewerken van persoonsgegevens. Ook stort jij je vol overgave op lastige vraagstukken die binnenkomen via onze consultants. Samen met je team bedenk en bespreek je oplossingen en voer je code-reviews uit om elkaar naar een nóg hoger niveau te tillen. Jouw team Ons team? Work

Bekijk vacature »

Senior .NET developer/ architect gezocht, api deve

Ben je een ervaren .NET developer en op zoek naar baan waarbij je je ook meer kunt gaan richten op architectuur? Binnen een leuke, sociale en betrokken werkomgeving? Met technieken als .NET Core en Azure? Dan zou deze baan wellicht iets voor jou kunnen zijn. Voor een organisatie in Rotterdam zijn we op zoek naar eens senior .NET ontwikkelaar/ architect. De organisatie bevindt zich in de financiële branche en is een van de grotere spelers in hun vakgebied. De organisatie bestaat uit circa 600 medewerkers en heeft verschillende vestigingen in Nederland. Het hoofdkantoor zit in Rotterdam en daar is ook

Bekijk vacature »

Servicedesk Medewerker

OVER AUMATICS Wij zijn een gedreven en professionele IT organisatie. Aumatics heeft haar hele organisatie en dienstverlening ingericht om samen met de klant te groeien en op tijd te anticiperen in een snel veranderende wereld. Wij doen dat door onze klanten de juiste tools te bieden en te begeleiden in een interactief proces. Hierin staat de continuïteit van de business altijd centraal. Samen groeien is een speerpunt in onze aanpak en we zien die onderlinge verbondenheid als fundamentele waarde in de samenwerking met de klant. Voor de uitbreiding van onze organisatie zijn we op zoek naar een teamspeler en professional:

Bekijk vacature »

ICT Engineer

OVER AUMATICS Wij zijn een gedreven en professionele IT organisatie. Aumatics heeft haar hele organisatie en dienstverlening ingericht om samen met de klant te groeien en op tijd te anticiperen in een snel veranderende wereld. Wij doen dat door onze klanten de juiste tools te bieden en te begeleiden in een interactief proces. Hierin staat de continuïteit van de business altijd centraal. Samen groeien is een speerpunt in onze aanpak en we zien die onderlinge verbondenheid als fundamentele waarde in de samenwerking met de klant. Voor de uitbreiding van onze organisatie zijn we op zoek naar een teamspeler en professional:

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Webdeveloper

Functieomschrijving Voor dit bedrijf in Delft zijn wij op zoek naar een senior PHP-programmeur die mooie en solide code schrijft en projecten kan draaien van eerste ontwerp tot aan oplevering afgestemd op de wensen van de klant. Dit betekent dat jij betrokken bent bij de gehele ontwikkeling en waarborging van het product. Jij hebt uiteraard al ervaring met PHP en verder met: frameworks, MySQL en JavaScript, met unit-testing en test-driven development. Als jij weet wat hiermee bedoeld wordt is dit zeer waarschijnlijk jouw passie en zeer waarschijnlijk iets voor jou! Naast bovenstaande kennis kan jij de leiding pakken en collega's

Bekijk vacature »

.NET Developer Zorg-ICT

Complexe software ontwikkelen: dat is jouw ding! Voor onze vestiging in Hoogeveen zoeken wij fanatieke junior en senior .NET Developers die met de laatste Microsoft-tools en -technieken willen werken. Jij bent gemotiveerd en draagt graag verantwoordelijkheid voor je 'eigen' software, die wordt ingezet in ziekenhuizen door heel Nederland. Jouw baan Je bent verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van jouw eigen module. Dit gaat om complexe ICT-producten die feilloos moeten functioneren binnen de complexe omgeving van een zorgorganisatie. Je werkt zelfstandig of in een klein team. ChipSoft maakt gebruik van een zelf ontwikkeld multi tier framework. Tijdens een

Bekijk vacature »

.NET Developer PACS / Multimedia

Wil jij met jouw ontwikkelskills medisch specialisten het optimale uit beeldmateriaal laten halen? Dan is dit jouw droombaan! Ter versterking van ons PACS-team in Amsterdam zoeken wij een ontwikkelaar die verantwoordelijkheid krijgt over zijn ‘eigen’ software. Jouw baan In deze functie ga je medische apparatuur (ECG\echo\OCT\MRI\Etc) integreren in ons EPD. Jij houdt je daarnaast bezig met het maken van software om de verschillende output-formaten van de apparatuur te ondersteunen en te presenteren aan medische specialisten. Tevens ben je verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van je eigen PACS-tools (Picture Archiving and Communication System). Die tools integreer je feilloos

Bekijk vacature »

Sr. IAM Portal Developer

Sr. IAM Portal Developer Intro Would you like to join a company who is active in the high-tech industry and work on high-end software in the Brainport region of Eindhoven? For our client I am looking for a Sr. IAM Portal Developer. The IT division supports information management, infrastructure and automation and optimization of key business processes across the organization. The ICT infrastructure, hardware and applications are absolutely mission-critical for almost all the client’s internal and external activities. A sub-department within the IT organization is the IT Competence Center Corporate. This competence center is responsible for innovation projects and changes

Bekijk vacature »

ETL Developer Datawarehouse

Wil jij je ETL-ontwikkelexpertise inzetten binnen de zorg? Dan is dit jouw baan! Je werkt vanuit de Crystal Tower in Amsterdam met de nieuwste Microsoft-technieken aan slimme oplossingen die zorgorganisaties helder inzicht geven in hun verbeterpunten. Jouw baan Onze datamodellen geven ziekenhuizen meer inzicht in hun huidige activiteiten en verwachte ontwikkelingen. Jij gaat deze complexe modellen verder uitbouwen én ontwikkelt en verbetert daarbij proactief de ETL in C# en SQL. Hierbij heb je alle ruimte om te sparren met (ervaren) collega-ETL-ontwikkelaars en werk je samen met onze BI-ontwikkelaars, software developers en consultants technische implementatie. Jouw team Je versterkt het Datawarehouse

Bekijk vacature »

Pagina: 1 2 volgende »

Johan Steel

Johan Steel

12/05/2020 17:26:27
Quote Anchor link
Gents,

Jullie hebben mij al erg geholpen in andere topics, hopelijk lukt het nu weer. Ik probeer een image gallery op te zetten en tot nu toe lukt dat aardig. Ik heb een pagina waar gebruikers een diersoort kunnen kiezen bijvoorbeeld 'kat', 'paard', 'hond'. Vervolgens wordt vanuit de database alle dieren van die diersoort uitgespuugd. Dit werkt (danzij jullie) goed!

Wat ik nu graag zou willen is de complete verzameling aan dieren in 1 overzicht laten uitspugen. Opzich is dat geen probleem, ook dat lukt. Maar ik zou ze graag per diersoort groeperen. Ik denk zelf aan een section per diersoort, en dan een kopje om welk diersoort het gaat. De code die ik nu heb en het totaal overzicht uitspuugt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
42
43
44
<?php
    include 'header.php';
      $sql1 = "SELECT * FROM dataset2";
      $result1 =  mysqli_query($conn, $sql1);
      $queryResult1 = mysqli_num_rows($result1);

?>

<html>
      <head>
        <title>Alle dieren</title>
        
      </head>
  <p style="font-size:40px" >Alle dieren</p>
 <body>

  <?php
  if($queryResult1 > 0) echo
  "<section class='head_container'>
  <p>($queryResult1)</p>
  </section>"
;
  ?>


 <section class="container">
          <?php
                if($queryResult1 > 0){
                 while($row = mysqli_fetch_assoc($result1)){
                       echo "
                              <div class='item'>
                              <a href='images_normal/"
.$row['photo_id'].".jpg'><img
                              src='images/"
.$row['photo_id'].".jpg' width='300' height='169'></a><br>
                              <a href="
.$row['link']." target='_blank'>
                              <b>"
.$row['common_name']."</b><br>
                              <i>("
.$row['full_name'].")</i><br>
                              "
.$row['country'].", ".$row['area'].", ".$row['year_photo']."</a>
                              </div>"
;

          }
          }


          ?>


</section>
</body>
</html>


Wellicht kan iemand mij op weg helpen?

Thanks!

Johan

Edit:
Code-tags geplaatst. Zie oko de opmaakcodes in de Veelgestelde vragen.
Tevens heb ik de topictitel aangepast naar iets wat duidelijker is.
Gewijzigd op 12/05/2020 17:52:57 door - Ariën -
 
PHP hulp

PHP hulp

01/06/2020 01:03:25
 
- Ariën -
Beheerder

- Ariën -

12/05/2020 17:52:10
Quote Anchor link
Gebruik ORDER BY diersoort in je query. en verwerk dit in je query.
Zodra er een andere diersoort wordt getoond (begint bij een lege string) dan komt er een tussenrij met de diersoort.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
<?php
$result
= mysqli_query($conn, $sql);
$previousItem = '';

while($data = mysqli_fetch_assoc($result))
{

  if( $previousItem != $data['categorie'] )
  {

    echo '<tr><td>'.$data['categorie'] ).'</td></tr>';
    $previousItem = $data['categorie'];
  }


  echo '<tr>
           <td>'
.$data['content'].'</td>
        </tr>'
;
}

?>

</table>
Gewijzigd op 12/05/2020 22:42:43 door - Ariën -
 
Thomas van den Heuvel

Thomas van den Heuvel

12/05/2020 18:26:53
Quote Anchor link
Wellicht bedoel ORDER BY?

En misschien is het een beter idee om uit te denken hoe je je pagina's organiseert, en daar dan een technische implementatie bij maakt.

Scheid het ontwerp (design) en de bouw (techniek).
Gewijzigd op 12/05/2020 18:28:01 door Thomas van den Heuvel
 
Johan Steel

Johan Steel

12/05/2020 22:38:28
Quote Anchor link
Hi All,

Dank voor de hulp! Ik denk dat ik weer een stapje verder ben. Ik heb de code van Ariën gebruikt en de output was slechts 1 diersoort en 1 naam. (terwijl er tientallen diersoorten zijn en ook meerdere namen per diersoort). Hierna de tip van Thomas gebruikt "ORDER BY" ipv "GROUP BY" en waarempel, meer output :-).

Thing is, het lijkt een soort van random output (ik kan iig geen patroon/structuur ontdekken). Wat er gebeurt is dat de diersoorten verschillende keren uitgespuugd worden. Dus bijvoorbeeld:
'Paard', 'Linda', 'Saskia',
'Kat', 'Toby', '
'Paard', 'Paula'
'hond', 'Floris', 'Jan', 'Klaas'
'Paard', 'Hendrik'

Afijn, zoals je ziet in het voorbeeld, is het lastig om te bepalen waar het mis gaat?

Dit is de code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
    include 'header.php';
      $sql = "SELECT * FROM dataset2 ORDER BY 'diersoort'";
      $result =  mysqli_query($conn, $sql);
      $queryResult = mysqli_num_rows($result);
      $previousItem= '';

?>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<html>
      <head>
        <title>Alle dieren</title>
      </head>
 <body>
 <table>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
                 while($data = mysqli_fetch_assoc($result))
                 {

                   if($previousItem != $data['diersoort'])
                      {

                      echo "<tr>
                            <td><b><br>"
.$data['diersoort']."</td></b>
                            </tr>"
;

                      $previousItem = $data['diersoort'];
                      }


                      echo"<tr>
                           <td>"
.$data['common_name']."</td>
                           </tr>"
;
                   }

          ?>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
</table>
</body>
</html>


Iemand die ziet waar het misgaat?

Thanks!

Johan
 
- Ariën -
Beheerder

- Ariën -

12/05/2020 22:42:02
Quote Anchor link
Diersoort is een veld. Dus haal die quotes eens weg in je query.
 
Johan Steel

Johan Steel

13/05/2020 11:43:48
Quote Anchor link
Hi Ariën,

Goed gezien! Dit was het probleem.. Blijkbaar heb ik een issue met quotes ;-)..

De output klopt nu. Echter de opmaak is wat anders geworden. Voor de "alle diersoorten" aanpassing werden alle afbeeldingen keurig verdeeld over het grid, nu wordt alles naar links uitgelijnd. Dit is de code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?php
include 'header.php';
  $sql = "SELECT * FROM dataset2 ORDER BY diersoort";
  $result =  mysqli_query($conn, $sql);
  $queryResult = mysqli_num_rows($result);
  $previousItem= '';

?>

<html>
      <head>
        <title>Alle dieren</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
              body
              {
                text-align:center;
                background-color: #EEEEEE;
                font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
              }
              .container{
                width:1000px;
                height:100%;
                margin: auto;
                background-color:white;
                font-family:Helvetica,arial;
                font-weight: normal;
                text-decoration: none;

                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                justify-items: center;
                grid-gap: 0px;
                grid-row-gap: 0px;
               }

                .head_container{
                  width:1000px;
                  height:20px;
                  margin: auto;
                  text-align: center;
                  background-color:white;
                  font-family:font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
                  font-weight: normal;
                  font-size: 30px;
                 }
                .item{
                  font-family:Helvetica,arial,;
                  font-weight: normal;
                  text-decoration: none;
                  font-size: 14px;
                  width: 300px;
                  height: 200px;
                  margin: 18px;
                  }
                  img {
                    border-radius: 3%;
                  }

                  a{
                    text-decoration:none;
                    color: inherit;
                  }

      @media only screen and (max-width: 70em) {
      .container{
        width: 98%;
      }
      .head_container{
        width: 98%;
       }

        }

    </style>
  </head>
  <p style="font-size:40px" >Alle dieren</p>
 <body>
          <?php

                 while($data= mysqli_fetch_assoc($result)){
                   {

                     if($previousItem != $data['diersoort'])
                        {

                        echo "<section class='head_container'>
                              "
.$data['diersoort']."
                              </section>"
;

                        $previousItem = $data['diersoort'];
                        }


                       echo "
                              <section class='container'>
                              <div class='item'>
                              <a href='images_normal/"
.$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' width='300' height='169'></a><br>
                              <a href="
.$data['link']." target='_blank'>
                              <b>"
.$data['common_name']."</b><br>
                              <i>("
.$data['full_name'].")</i><br>
                              "
.$data['country'].", ".$data['area'].", ".$data['year']."</a>
                              </div></section>"
;
          }
          }

          ?>

</body>
</html>


Iemand die ziet wat er misgaat? Ik probeer twee secties te creeeren een kop met diersoort en de plaatjes en namen daaronder.

Groet,

Johan
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 12:22:24
Quote Anchor link
Kunnen we een voorbeeld zien? Of heb je een snippet op JSfiddle staan?
 
Johan Steel

Johan Steel

13/05/2020 21:27:47
Quote Anchor link
Hi Ariën,

Voorbeeld:

https://i.ibb.co/DGGk24f/Knipsel.jpg

Hopelijk is het duidelijk.

Groet,

Johan
Gewijzigd op 13/05/2020 21:30:06 door Johan Steel
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 21:54:18
Quote Anchor link
Kijk eens naar float:left, of een flexbox?
 
Johan Steel

Johan Steel

13/05/2020 21:58:59
Quote Anchor link
Thanks voor de suggestie! Het ging mij vooral om de HTML code in de php echo, wellicht dat daar iets anders moet. Want in de CSS heb ik niks veranderd en voor de aanpassing ging het wel goed. Ik dacht wellicht heeft het met de section/items te maken.

Ik ga dan toch maar even in de css proberen..

Gr,

Johan
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 22:11:12
Quote Anchor link
Laat anders eens een voorbeeld van je site zien, zodat we daarmee kunnen rommelen?
 
Johan Steel

Johan Steel

13/05/2020 22:27:52
Quote Anchor link
OK! Ik denk dat mijn eerdere post de situatie wel goed schetst, maar wellicht helpt het:

Voor de aanpassing:

https://i.ibb.co/WfKB86c/darters-voor.jpg

Na de aanpassing:

https://i.ibb.co/wcsTfRd/darters-na.jpg

Zou iets simpels moeten zijn, lijkt mij. Maar ik zie het niet :-)
 
- Ariën -
Beheerder

- Ariën -

13/05/2020 22:34:29
Quote Anchor link
Dit is een kwestie van de HTML-broncodes en eventueel de CSS vergelijken.
 
Thomas van den Heuvel

Thomas van den Heuvel

13/05/2020 22:54:35
Quote Anchor link
Een heleboel HTML-tags hebben een display attribuut. Deze heeft twee varianten: block of inline.

Zogenaamde "block level elementen" zullen, als je die achtereenvolgens achter elkaar zet in je broncode, altijd op een nieuwe regel getoond worden.

De "inline elementen" kunnen standaard naast elkaar gezet worden.

Het standaard display-gedrag kun je via CSS aanpassen die van deze default afwijkt (mogelijk enkele variaties of onlogische constructies daar gelaten).

Zowel <section> alsook <div> tags hebben standaard het block display-type, dus het is niet zo verwonderlijk dat deze onder elkaar worden gezet.

Wil je dit aanpassen (zodanig dat dit van het default gedrag afwijkt), dan zul je attributen als display en float -en mogelijk meer- expliciet moeten voorzien van niet-standaard waarden voor deze elementen via ofwel rechtstreekse stijldefinities (het style-attribuut), of wellicht beter, via een CSS-class.
Gewijzigd op 13/05/2020 22:55:49 door Thomas van den Heuvel
 
Johan Steel

Johan Steel

14/05/2020 10:17:52
Quote Anchor link
Hi,

Dank weer voor het meedenken! Het comment van Thomas klinkt plausibel, dus ik ben een beetje op onderzoek uit gegaan. Maar ik betwijfel toch of bijvoorbeeld de display op block staat. Is het niet default inline? Immers wanneer ik block wel in de code toevoeg, zie je duidelijk dat er daadwerkelijk nieuwe regels ontstaan:

https://ibb.co/82j1D7J

Groet,

JOhan
Gewijzigd op 14/05/2020 10:19:24 door - Ariën -
 
- Ariën -
Beheerder

- Ariën -

14/05/2020 10:33:10
Quote Anchor link
Je kan de stijlregels eenvoudig bekijken via de Element Inspector van je browser.
 
Adoptive Solution

Adoptive Solution

14/05/2020 10:56:17
Quote Anchor link
Op onderstaand adres kan je album code ophalen.
Met wat aanpassingen en het toevoegen van je eigen code (o.a de head_container en item kan je 1 op 1 toevoegen) krijg je het resultaat wat je wilt.

https://phppot.com/php/php-responsive-image-gallery-using-css-media-queries/

Een uitgebreider fotooalbum is dit :

https://www.jqueryscript.net/layout/Pinterest-Like-Dynamic-Responsive-Grid-Layout-Plugin-BlocksIt.html
 
Johan Steel

Johan Steel

14/05/2020 16:23:31
Quote Anchor link
Hi Adoptive Solution,

Dank voor de tip! Ik heb het uitgeprobeerd (de CSS opmaak in jouw link) lijkt wel weer een stapje verder, maar tegelijk ook weer een stapje terug. Ik denk dat het komt omdat er geen gebruik gemaakt wordt van sections. DIt is het resultaat (nog niet zoals ik het wil):

https://i.ibb.co/xhCHD5m/darters2.jpg

Groet,

Johan
 
Adoptive Solution

Adoptive Solution

14/05/2020 16:32:07
Quote Anchor link
Dan voeg je sections toe.

Hier resulttaat met je eigen code
https://ibb.co/xmbtH0d
 
Johan Steel

Johan Steel

14/05/2020 17:19:29
Quote Anchor link
THanks, jouw output is gelijk aan mijn laatste post.

Het idee is om de opmaak juist te behouden (na de diersoort aanpassing):

https://i.ibb.co/WfKB86c/darters-voor.jpg>

Dank voor je hulp!

Gr,

JOhan

Toevoeging op 14/05/2020 17:42:47:

Gents,

Het ziet er naar uit dat het gelukt is! Uiteindelijk zullen het twee verschillende (=andere opmaak) divjes worden in een section. Zodra ik de code definitief werkend heb, zal ik het posten.

Iedereen dank voor het meedenken, anders was het zeker niet gelukt!

Gr,

Johan
Gewijzigd op 14/05/2020 17:21:16 door Johan Steel
 
Johan Steel

Johan Steel

16/05/2020 22:42:36
Quote Anchor link
Iedereen bedankt voor de input, het is gelukt, hieronder de code. Uiteindelijk werkt 1 section met twee verschillende div classes het beste:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
42
43
44
45
46
47
48
49
50
51
<style>

        body{
          text-align:center;
          background-color: #EEEEEE;
          font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
        }

        .container{
          width:1023px;
          margin: auto;
          background-color:white;
          font-family:Helvetica,arial;
          font-weight: normal;
         }

        div.item2 {
           width: 1000px;
           display: inline-block;
           margin: auto;
           background-color: white;
           font-size: 22px;
           }

        div.item{
            font-size: 13px;
            width: 300px;
            height: 200px;
            margin: 20px;
            float: left;
            }

        img{
            border-radius: 3%;
            }

          a{
            text-decoration:none;
            color: inherit;
            }

      @media only screen and (max-width: 70em) {
      .container{
        width: 98%;
      }
      div.item2{
        width: 95%;
       }
}

    </style>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<body>
   <section class='container'>
          <?php
                 while($data= mysqli_fetch_assoc($result)){
                   {

                     if($previousItem != $data['diersoort'])
                        {

                        echo "<div class='item2'>
                              <br>
                              "
.$data['diersoort']."
                              <hr>
                              </div>"
;

                        $previousItem = $data['diersoort'];
                        }


                       echo "

                              <div class='item'>
                              <a href='images_normal/"
.$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' ></a><br>
                              <a href="
.$data['link']." target='_blank'>
                              <b>"
.$data['common_name']."</b><br>
                        
                              </div></a>"
;
          }
          }

          ?>

</section>
</body>


Enige wat nog wel een probleem is, is dat de laatste diersoort, buiten de section valt. Doordat de achtergrond van de section wit is, lijkt het laatste diersoort daar nu buiten te vallen:

https://i.ibb.co/PT6LPM6/wrasses.jpg

Ligt dit aan de php code?

THanks again,

Johan
Gewijzigd op 16/05/2020 23:07:39 door Johan Steel
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.