Tweet
Hallo allerseits!
Ich steh gerade etwas auf dem Schlauch... ich versuche mal mein Problem zu schildern:
Ich habe von Hand einen HTML-Mockup erstellt, der eine bestimmte Struktur haben muss, damit die Javascript-Animationen so funktionieren wie vorgegeben. Der Mockup ist unter dieser URL zu finden.
Die Daten ziehe ich aus einer DB und baue daraus einen Baum, der hierarchisch aufgebaut ist:
Die gewünschte HTML-Struktur hat gewisse Anforderungen:
- die Länge der Projekttitel wird beim Iterieren addiert
- wird eine gewisse Gesamtlänge (45 Zeichen) erreicht, sollen die Projekte auf eine neue "Zeile" (siehe Mockup!)
Die HTML-Struktur sollte dann folgendermassen aussehen:
Nun kommt der PHP-Teil, der bis zu einem gewissen Punkt das ausgibt, was ich möchte, aber eben nur zu einem gewissen Punkt. Ich habe schön sorgfältig von oben her angefangen, also zuerst über Kategorien, dann über Projekte iteriert unter Berücksichtigung der oben genannten Anforderungen. Der folgende Code erzeugt mir die gewünschte HTML-Struktur noch ohne preview-div und ohne content-div.
Bei diesen zwei Elementen (preview und content) habe ich grosse Mühe. Ich müsste quasi innerhalb des foreach-Blocks nochmals über dasselbe Array iterieren können. Wie muss ich oben stehenden PHP-Code ändern, damit ich am Schluss dieselbe HTML-Struktur habe wie beim Mockup? Also mit einem Preview-Container, der alle Vorschaubilder der Projekte auf derselben Zeile enthält, sowie einem Content-Container, der alle Projekt-Beschreibungen und -bilder der zugehörigen Projekte auf derselben Zeile enthält.
Seh ich den Wald vor lauter Bäume nicht oder habe ich die falsche Herangehensweise gewählt?
Falls mir hier jemand auf die Sprünge helfen könnte, wäre ich sehr sehr dankbar!
Beste Grüsse,
Greg
Ich steh gerade etwas auf dem Schlauch... ich versuche mal mein Problem zu schildern:
Ich habe von Hand einen HTML-Mockup erstellt, der eine bestimmte Struktur haben muss, damit die Javascript-Animationen so funktionieren wie vorgegeben. Der Mockup ist unter dieser URL zu finden.
Die Daten ziehe ich aus einer DB und baue daraus einen Baum, der hierarchisch aufgebaut ist:
Code:
¦- Kategorie1 ¦ ¦- Projekt1 ¦ ¦ ¦- Credits ¦ ¦ ¦ ¦- Value ¦ ¦ ¦ ¦ ¦ ¦-Sets ¦ ¦ ¦- Set1 ¦ ¦ ¦- Images ¦ ¦ ¦- Image1 ¦ ¦ ¦- Image2 ¦ ¦ ¦ ¦- Projekt2 ¦ ¦- Projekt3 ¦ ¦- Kategorie2 ¦- Projekt1 <!-- und so weiter... -->
- die Länge der Projekttitel wird beim Iterieren addiert
- wird eine gewisse Gesamtlänge (45 Zeichen) erreicht, sollen die Projekte auf eine neue "Zeile" (siehe Mockup!)
Die HTML-Struktur sollte dann folgendermassen aussehen:
HTML-Code:
<div id="projects"> <p class="projects_headline" id="spaces">Spaces</p> <div class="project_titles"> <div id="line1_spaces"> <div class="project_title" id="titles1_spaces"> <a class="title" id="t2">Lichtkissen</a> <a class="title" id="t4">Art Lobby</a> <a class="title" id="t5">Kari</a> <a class="title" id="t7">Dreispitzhalle</a> <a class="title" id="t6">Hull</a> </div> <div class="project_preview" id="previews1_spaces"> <img class="preview" id="p2" src="images/images/preview_2.jpg" /> <img class="preview" id="p4" src="images/images/preview_4.jpg" /> <img class="preview" id="p5" src="images/images/preview_5.jpg" /> <img class="preview" id="p7" src="images/images/preview_7.jpg" /> <img class="preview" id="p6" src="images/images/preview_6.jpg" /> </div> <div class="project_content" id="content1_spaces"> <div class="content-item" id="c2"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c4"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c5"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c7"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c6"> <!-- Projektbeschreibung und -bilder --> </div> </div> </div> <div id="line2_spaces"> <div class="project_title" id="titles2_spaces"> <a class="title" id="t8">Artshop 08</a> <a class="title" id="t9">Cocoon</a> </div> <div class="project_preview" id="previews2_spaces"> <img class="preview" id="p8" src="images/images/preview_8.jpg" /> <img class="preview" id="p9" src="images/images/preview_9.jpg" /> </div> <div class="project_content" id="content2_spaces"> <div class="content-item" id="c8"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c9"> <!-- Projektbeschreibung und -bilder --> </div> </div> </div> </div> <p class="projects_headline" id="objects">Objects</p> <div class="project_titles"> <div id="line1_objects"> <div class="project_title" id="titles1_objects"> <a class="title" id="t1">Schlitten</a> <a class="title" id="t3">Artzappening</a> </div> <div class="project_preview" id="previews1_objects"> <img class="preview" id="p1" src="images/images/preview_1.jpg" /> <img class="preview" id="p3" src="images/images/preview_3.jpg" /> </div> <div class="project_content" id="content1_objects"> <div class="content-item" id="c1"> <!-- Projektbeschreibung und -bilder --> </div> <div class="content-item" id="c3"> <!-- Projektbeschreibung und -bilder --> </div> </div> </div> </div> </div>
PHP-Code:
<div id="projects">
<?php
$length = 0;
$limit = 45;
$loop = 1;
// loop through categories
foreach ($projects_tree as $category)
{
?>
<p class="projects_headline" id="<?php echo strtolower($category->Category_Name_DE); ?>"><?php echo $category->Category_Name_DE; ?></p>
<div class="project_titles">
<div id="line<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
<div class="project_title" id="titles<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
<?php
// loop through projects
foreach ($category->Projects as $project)
{
// add project title length
$length = $length + strlen($project->Title_DE);
if ($length - $limit < 0)
{
?>
<a class="title" id="t<?php echo $project->ID_Project; ?>"><?php echo $project->Title_DE; ?></a><img class="preview" id="p<?php echo $project->ID_Project; ?>" src="<?php echo base_url(); ?>/images/images/preview_<?php echo $project->ID_Project; ?>.jpg" />
<?php
}
else
{
// reset line length
$length = 0 + strlen($project->Title_DE);
$loop++;
?>
</div>
</div>
<div id="line<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
<div class="project_title" id="titles<?php echo $loop . '_' . strtolower($category->Category_Name_DE); ?>">
<a class="title" id="t<?php echo $project->ID_Project; ?>"><?php echo $project->Title_DE; ?></a><img class="preview" id="p<?php echo $project->ID_Project; ?>" src="<?php echo base_url(); ?>/images/images/preview_<?php echo $project->ID_Project; ?>.jpg" />
<?php
}
}
// reset total length and loop count
$length = 0;
$loop = 1;
?>
</div>
</div>
</div> <!-- end class="project_titles" -->
<?php
}
?>
</div>
Seh ich den Wald vor lauter Bäume nicht oder habe ich die falsche Herangehensweise gewählt?
Falls mir hier jemand auf die Sprünge helfen könnte, wäre ich sehr sehr dankbar!
Beste Grüsse,
Greg
Moderatorin
Kommentar