[PHP] Layout voor fotoalbum uit database *

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • intermusic
  • Registratie: September 2002
  • Laatst online: 25-03 14:05

intermusic

Marc Hoekstra

Topicstarter
Ik heb een foto script.
Deze laat op elke rij twee foto's zien van dezelfde groote.
Deze worden uit een database gehaald, samen met variabele wat de groote moet zijn van de foto.

VB:
foto op row0, size 1--foto op row1, size 1
foto op row2, size 1--foto op row3, size 1
foto op row4, size 1--foto op row5, size 1

Hierbij is size 1 = 300-225

Nu is het zo dat de variabele voor de groote bij elke foto anders kan zijn, die uit de database worden gehaald. vb. size 2 ipv. size 1.
Hierbij is size 2 = 600-450

Deze zijn groter, dus die wil ik apart op een rij hebben, maar toch dat de foto van de volgende row wel weer in beeld verschijnt als eerste van de volgende rij, na de grote foto

VB.
foto op row0, size 1--foto op row1, size 1
foto op row2, size 2
foto op row3, size 1 --foto op row4, size 1
foto op row5, size 1 --foto op row6, size 1

Geloof me, ik heb er echt zwaar op zitten kraken maar ik krijg het niet voormekaar.

Ik heb het volgende script om 2 foto's op iedere rij te laten zien:
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
<?
echo "<table>";
$max = "2"; 
$sql_query2 = "SELECT id FROM pics WHERE news_id= '".$HTTP_GET_VARS['id']."'"; 
$sql_result2 = mysql_query($sql_query2) or die(mysql_error()); 
$sql_aantal = mysql_num_rows($sql_result2); 
$aantal_paginas = ceil($sql_aantal / $max);
for ($pagina = 0; $pagina < $aantal_paginas; $pagina++) {
    $records = $pagina * $max; 
    $sql_query3 = "SELECT img, img_size FROM pics WHERE news_id= '".$HTTP_GET_VARS['id']."'  ORDER BY id LIMIT ".$records.", ".$max.""; 
    $sql_result3 = mysql_query($sql_query3) or die(mysql_error());
    $sql_number = MYSQL_NUM_ROWS($sql_result3);
    echo "<tr><td>\n";
    for ($label = 0; $label < $sql_number; $label++) {
        $sql_pic = mysql_result($sql_result3,$label,"img");
        $sql_img_size = mysql_result($sql_result3,$label,"img_size");
        if ($sql_img_size == 0) {
            $img_width = "300";
            $img_height = "225";
        }
        if ($sql_img_size == 2) {
            $img_width = "600";
            $img_height = "450";
        }
        echo "<table>\n<tr><td>\n[img]\"".$sql_pic."\"[/img]\n</td></tr>\n</table>\n</td>\n";
        if (($label % 2) == 0) {
            echo "<td width=\"5\">\n&nbsp</td>\n<td align=\"left\" valign=\"top\">\n";
        }
    }
    echo "</tr>\n\n";
}
echo "</table>";
?>


Wat zou ik hier aan moeten veranderen om een grote foto op een aparte rij te laten zien, maar toch de foto van de volgende row, weer als eerste van de volgende rij te laten zien?

Acties:
  • 0 Henk 'm!

  • phYzar
  • Registratie: November 2001
  • Laatst online: 21:51
intermusic schreef op 21 oktober 2003 @ 01:23:
[PHP] Grote foto op aparte rij laten zien en verder met volgende row uit database
Pakkende titel :+

Idee:

Maak een teller.
Maak een tabel.
Elke rij van de tabel bevat 2 foto's.
Bij elke foto kijk je: teller oneven getal? volgende rij en bij elke foto teller + 1
Foto met dubbele breedte? teller + 2 zodat de volgende foto op de volgende rij staat.

Wat je zelf nog even mag bedenken is wat er gebeurd als er een foto aan de beurt is om op de tweede plek van een rij te komen terwijl hij te breed is. :+

[ Voor 3% gewijzigd door phYzar op 21-10-2003 01:31 ]


Acties:
  • 0 Henk 'm!

  • intermusic
  • Registratie: September 2002
  • Laatst online: 25-03 14:05

intermusic

Marc Hoekstra

Topicstarter
phYzar schreef op 21 October 2003 @ 01:30:
[...]


Pakkende titel :+

Idee:

Maak een teller.
Maak een tabel.
Elke rij van de tabel bevat 2 foto's.
Bij elke foto kijk je: teller oneven getal? volgende rij en bij elke foto teller + 1
Foto met dubbele breedte? teller + 2 zodat de volgende foto op de volgende rij staat.
Hier kan ik absoluut weer een heel stuk verder mee, maar nog een probleem:
Als een grote foto de enelaatste foto is, dan laat het script de volgende row niet zien.
Als een grote foro de derde laatste foto is, dan laat het script de volgende row niet zien, maar die daarna wel weer.
phYzar schreef op 21 October 2003 @ 01:30:
[...]
Wat je zelf nog even mag bedenken is wat er gebeurd als er een foto aan de beurt is om op de tweede plek van een rij te komen terwijl hij te breed is. :+
Dit laat ik aan de beheerders over. Die moeten er maar voor zorgen dat er een even aantal foto's voor de grote foto komen te staan.

Acties:
  • 0 Henk 'm!

  • phYzar
  • Registratie: November 2001
  • Laatst online: 21:51
intermusic schreef op 21 oktober 2003 @ 01:53:
[...]

Hier kan ik absoluut weer een heel stuk verder mee, maar nog een probleem:
Als een grote foto de enelaatste foto is, dan laat het script de volgende row niet zien.
Als een grote foro de derde laatste foto is, dan laat het script de volgende row niet zien, maar die daarna wel weer.
Goed naar je code kijken met het volgende in gedachten:

als: foto smal en teller oneven: rij openen + foto
als: foto smal en teller even: foto + rij sluiten
als: foto breed en teller oneven: rij openen + foto + rij sluiten
als: foto breed en teller even: rij sluiten + rij openen + foto + rij sluiten

Acties:
  • 0 Henk 'm!

  • intermusic
  • Registratie: September 2002
  • Laatst online: 25-03 14:05

intermusic

Marc Hoekstra

Topicstarter
phYzar schreef op 21 oktober 2003 @ 02:02:
[...]


Goed naar je code kijken met het volgende in gedachten:

als: foto smal en teller oneven: rij openen + foto
als: foto smal en teller even: foto + rij sluiten
als: foto breed en teller oneven: rij openen + foto + rij sluiten
als: foto breed en teller even: rij sluiten + rij openen + foto + rij sluiten
Dit is eigenlijk precies de oplossing voor het probleem als de tweede foto in de rij een grote foto is, maar waar het om gaat.

Als ik aangeef dat er een nieuwe rij moet worden gemaakt omdat de volgende foto groot is dan break ik uit de eerste for loop nadat de grote foto is laten zien zodat een volgende rij wordt laten zien, maar dan wordt de row na de grote foto vergeten omdat ik uit de for loop spring. Dat verklaart ook dat de tweede foto na de grote foto wel wordt laten zien. Die zit gewoon lekker weer in de volgende row.
Zie code...

Acties:
  • 0 Henk 'm!

  • intermusic
  • Registratie: September 2002
  • Laatst online: 25-03 14:05

intermusic

Marc Hoekstra

Topicstarter
Ik heb nu de code veranderd in het volgende:
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?
    echo "<table>";
    $max = "2"; 
    $sql_query2 = "SELECT id FROM pics WHERE news_id= '".$HTTP_GET_VARS['id']."'"; 
    $sql_result2 = mysql_query($sql_query2) or die(mysql_error()); 
    $sql_aantal = mysql_num_rows($sql_result2); 
    $aantal_paginas = ceil($sql_aantal / $max);
    $pagina = 0; 
    while ($pagina < $aantal_paginas) {
        $records = $pagina * $max; 
        $sql_query3 = "SELECT img, img_text, img_size FROM pics WHERE news_id= '".$HTTP_GET_VARS['id']."'  
        ORDER BY id LIMIT ".$records.", ".$max.""; 
        $sql_result3 = mysql_query($sql_query3) or die(mysql_error());
        $sql_number = MYSQL_NUM_ROWS($sql_result3);
        echo "<tr><td align=\"center\">\n<table border=\"0\">\n<tr>\n";
        for ($label = 0; $label < $sql_number; $label++) {
            $sql_pic = mysql_result($sql_result3,$label,"img");
            $sql_img_text = stripslashes(mysql_result($sql_result3,$label,"img_text"));
            $sql_img_size = mysql_result($sql_result3,$label,"img_size");
            if ($sql_img_size == 0) {
                $img_width = $inc_img_small_flat_width;
                $img_height = $inc_img_small_flat_height;
            }
            if ($sql_img_size == 2) {
                $img_width = $inc_img_big_flat_width;
                $img_height = $inc_img_big_flat_height;
            }
            if (($sql_img_size == 2) or ($sql_img_size == 3)){
                if (($label % 2) != 0) {
                    echo "</tr></tr>\n";
                }
                echo "<td align=\"center\" valign=\"top\">\n
                <table width=\"90%\" border=\"0\" bgcolor=\"#133859\">\n<tr><td>\n
                [img]\"".$sql_pic."\"[/img]\n
                </td></tr>\n</table>\n</td>";
                $pagina + 1; 
                $label = $sql_number;
            }
            else {
                echo "<td align=\"left\" valign=\"top\">\n
                <table width=\"100%\" border=\"0\" bgcolor=\"#133859\">\n<tr><td>\n
                [img]\"".$sql_pic."\"[/img]\n
                \n</td></tr></table></td>";             
                if (($label % 2) == 0) {
                    if ((mysql_result($sql_result3,$label + 1,"img_size") == 2) 
                     or (mysql_result($sql_result3,$label + 1,"img_size") == 3)) {
                        echo "</tr>\n</table>";
                    }
                    else {
                        echo "<td width=\"5\">\n<b>&nbsp</b></td>\n";
                    }
                }
                else {
                    echo "</tr>\n</table>";
                }
            }
        }
        echo "</tr>\n\n";
        $pagina++;
    }
echo "</table>";
?>


Hiermee krijg ik dus nu de grote foto op een nieuwe rij.
Zelfs als de grote foto de tweede is van een rij.

Nu is het nog wel zo dat de row volgend op de vorige row met grote foto, niet zichtbaar is.
Dit heeft te maken dat ik uit de for loop breek en de mysql_result met de $label die zou komen, helemaal niet komt.

Hoe kan ik er voor zorgen dat deze evengoed mee wordt genomen, maar dan naar de volgende rij?

Acties:
  • 0 Henk 'm!

  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06 13:31

drm

f0pc0dert

[nohtml]tipje: doe het niet met een tabel maar met floating elements. Dat is veel eenvoudiger uit te poepen, namelijk.

Voorbeeldje:

1
2
3
4
5
6



source:
HTML:
1
2
3
4
5
6
7
8
<div style="clear:both; width:310px;">
   <div style="float:left; width:130px; margin:10px; background-color: #999;">1</div>
   <div style="float:left; width:130px; margin:10px; background-color: #999;">2</div>
   <div style="float:left; width:280px; margin:10px; background-color: #999;">3</div>
   <div style="float:left; width:130px; margin:10px; background-color: #999;">4</div>
   <div style="float:left; width:130px; margin:10px; background-color: #999;">5</div>
   <div style="float:left; width:280px; margin:10px; background-color: #999;">6</div>
</div>


Natuurlijk moet je de divjes vervangen door de juiste images en de styles niet inline gebruiken maar classes, maar dat is het idee. Als je meer wilt weten over hoe je met css moet/kunt werken moet je even op css zoeken in Webdesign en Graphics

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

Pagina: 1