nicht angemeldet
Tabelle: Umbruch für Thumbnails
0 
Matthias Apsel
0 0 Matthias Apsel
0 Matthias Apsel
0 0 0 Matthias Apsel
0
Tabelle: Umbruch für Thumbnails
Hallo Leute,
habe ein PHP Script in welchem Thumbnails untereinander gereiht werden. Aussendrum ist eine Tabelle mit zwei Zellen, links das grosse Bild, rechts die Thumbnails, also ein Photoviewer.
Ich möchte die Thumbnails untereinander reihen, allerdings gehen die Thumbnails über die Tabelle hinaus, sollten aber in der Zelle bleiben und in mehreren Spalten und Zeilen sich verteilen.
Daher bitte ich um Unterstützung :)
Danke
Gruss
KC
-
Om nah hoo pez nyeetz, Khan Cross!
habe ein PHP Script in welchem Thumbnails untereinander gereiht werden. Aussendrum ist eine Tabelle mit zwei Zellen, links das grosse Bild, rechts die Thumbnails, also ein Photoviewer.
nimm keine Tabelle sondern floate das große Bild. Begrenze ggf. den Platz durch ein gruppierendes Element.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Khan Cross!
habe ein PHP Script in welchem Thumbnails untereinander gereiht werden. Aussendrum ist eine Tabelle mit zwei Zellen, links das grosse Bild, rechts die Thumbnails, also ein Photoviewer.
nimm keine Tabelle sondern floate das große Bild. Begrenze ggf. den Platz durch ein gruppierendes Element.
Matthias
Hmmm das habe ich jetzt leider nicht verstanden... Kannst Du bitte genauer drauf eingehen Matthias? Danke Dir. Achso hier ist der Code:
<!-- Grosses Bild -->
<div id="jea-gallery-preview" >
<a class="jea_modal" href="<?php echo $this->main_image['url'] ?>" >
<img src="<?php echo $this->main_image['preview_url'] ?>"
id="jea-preview-img"
alt="<?php echo $this->main_image['title'] ?>"
title="<?php echo $this->main_image['description'] ?>" /></a>
</div><!-- Thumbnails -->
<?php if( !empty($this->secondaries_images)): ?>
<div id="jea-gallery-scroll" >
<?php foreach($this->secondaries_images as $image) : ?>
<a class="jea_modal" href="<?php echo $image['url'] ?>" >
<img src="<?php echo $image['min_url'] ?>"
alt="<?php echo $image['title'] ?>"
title="<?php echo $image['description'] ?>" /></a>
<?php endforeach ?>
</div>
<?php endif ?>-
Om nah hoo pez nyeetz, Khan Cross!
nimm keine Tabelle sondern floate das große Bild. Begrenze ggf. den Platz durch ein gruppierendes Element.
Hmmm das habe ich jetzt leider nicht verstanden... Kannst Du bitte genauer drauf eingehen Matthias? Danke Dir. Achso hier ist der Code:
Ich sehe in deinem Code nichts, was Einfluss auf die Gestaltung hat, der serverseitige Code ist irrelevant.
Beispiel
<div> <!-- Breite von bspweise 500px --> <img> <!-- float: left; Breite vielleicht 400px; --> <img> <!-- float: left; viele kleine Bilder, Breite vielleicht 80 px --> <img> </div>ergibt etwa sowas
+-----------------+ +--+
| | | |
| | +--+
| | +--+
| | | |
| | +--+
| | +--+
| | | |
+-----------------+ +--+
+--+ +--+ +--+ +--+ +--+
| | | | | | | | | |
+--+ +--+ +--+ +--+ +--+Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias Apsel!
<div> <!-- Breite von bspweise 500px -->
<img> <!-- float: left; Breite vielleicht 400px; -->
<img> <!-- float: left; viele kleine Bilder, Breite vielleicht 80 px -->
<img>
</div>Immer diese Div-Suppe! ~~~html <ul> <li> ... </ul>Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
<div> <!-- Breite von bspweise 500px -->
<img> <!-- float: left; Breite vielleicht 400px; -->
<img> <!-- float: left; viele kleine Bilder, Breite vielleicht 80 px -->
<img>
</div>> Immer diese Div-Suppe! Bei einem einzigen Div kann von Suppe keine Rede sein! Ein allgemeines Containerelement ist hier sehr gut geeignet und ermöglicht minimalistischeres Markup als die meiner Meinung nach überflüssige Liste, die die Bilder in Listenelemente, für die es überhaupt keine Notwendigkeit gibt, zwängt. Die Standarddarstellung ist hier doch genau das, was der OP haben will. Die Standarddarstellung von Listen ist fast genau das Gegenteil von dem, was der OP haben will. Ich finde das Markup daher wirklich gelungen! Zuviel des Guten: ~~~html <ul> <li><img></li> <li><img></li> <li><img></li> ... </ul>display-inline, list-style-type, padding und margin von ul und li zu beachten, mehr Markup - wozu?
<div><img><img> ... </div>erledigt das ganz von selbst :-)Es kann nur das nicht passende CSS sein, das an der nicht gewünschten Darstellung schuld ist. Die ids halten nicht, was sie versprechen ...
Freundliche Grüße
Vinzenz
-
Hey Leuts danke für Eure Antworten. Ist überhaupt verstanden was gewünscht ist?
Hier ist mal ein Bildchen was ich versuche zu erreichen:
-
Om nah hoo pez nyeetz, Khan Cross!
Hey Leuts danke für Eure Antworten. Ist überhaupt verstanden was gewünscht ist?
Ist schon mal versucht worden, meinen Vorschlag umzusetzen?
Hier ist mal ein Bildchen was ich versuche zu erreichen:
er leistet mit entsprechenden Abwandlungen das Gewünschte.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Khan Cross!
Hey Leuts danke für Eure Antworten. Ist überhaupt verstanden was gewünscht ist?
Ist schon mal versucht worden, meinen Vorschlag umzusetzen?
Hier ist mal ein Bildchen was ich versuche zu erreichen:
er leistet mit entsprechenden Abwandlungen das Gewünschte.
Matthias
Hi Matthias, ich bin mit deinem Vorschlag nicht zurecht gekommen, hab etwas experimentiert, war mir aber nicht sicher an der richtigen Stelle operiert zu haben.
-
Hier mal ein Screenshot! Hat echt wunderbar geklappt danke nochmal.
Ich habe zu letzt noch ein Problem mit dem JavaScript, es funktionert zwar aber nicht ganz.Kann mir jemand bei dem helfen?
Es geht darum das bei langsamer oder nicht stabiler Internetverbindung die Grossansicht Bilder in einem neuen Fenster geöffnet werden und nicht wie auf dem Screenshot in dem DIV Container. Sofern die Webseite aber komplett geladen wurde funktionert wiederrum alles. Das JavaScript benötigt eine Art Preloader, also erst den Code vollstaendig laden, danach alle Bilder und dann erst freigeben. Damit kenne ich mich nicht aus.
-
-
-
Hallo,
Hey Leuts danke für Eure Antworten. Ist überhaupt verstanden was gewünscht ist?
ja, selbstverständlich.
wie ich bereits schrieb, sollte dies mit dem generierten HTML problemlos möglich sein:
a) ein Containerelement für das Preview-Bild
b) ein Containerelement für die Thumbnails<div id="preview"> <img src="path/to/preview/image" alt="Voransicht"> </div> <div id="thumbnails"> <img src="path/to/tumbnail/1" alt=""> <img src="path/to/tumbnail/2" alt=""> <img src="path/to/tumbnail/3" alt=""> <img src="path/to/tumbnail/4" alt=""> <img src="path/to/tumbnail/5" alt=""> <!-- und noch viele mehr --> </div>Nun nehmen wir ein wenig CSS zur Hand, um die gewünschte Darstellung zu bekommen:
#preview { width: 480px; /* meine Bilder sind 480 Pixel breit */ height: 360px; /* und 360 Pixel hoch */ padding: 10px; /* etwas Luft schadet nie, optional */ float: left; /* damit die Thumbnails links davon bleiben */ } #thumbnails { width: 270px; /* meine Thumbnails sind 80 Pixel breit, so passen mit Scrollbalken drei nebeneinander. */ height: 380px; /* so hoch wie der Preview-Bereich plus Padding */ overflow-y: scroll; /* damit man die Thumbnails scrollen kann, wenn es mehr werden, als gleichzeitig angezeigt werden können. */ }Wie ich bereits anmerkte, wird das HTML bereits ganz ähnlich erzeugt. Es kann somit nur noch am CSS liegen, wenn die Darstellung nicht so ist, wie gewünscht.
Freundliche Grüße
Vinzenz
-
Danke für deine ausführliche Erklaerung, es ist alles klar soweit. Jedoch hat das bei mir gar keine Auswirkung, kann dort eingeben was ich will, die Werte werden anscheinend vom Browser nicht gelesen.
Was ich gemacht habe in der PHP Datei:
<?php if(!empty($this->main_image['preview_url'])) : ?>
<div id="jea-gallery-preview">
<img src="<?php echo $this->main_image['preview_url'] ?>"
id="jea-preview-img" width="600" height="450" />
</div>
<?php endif ?><?php if( !empty($this->secondaries_images)): ?>
<div id="jea-gallery-scroll" >
<?php foreach($this->secondaries_images as $image) : ?>
<a class="jea-thumbnails" href="<?php echo $image['preview_url'] ?>" >
<img src="<?php echo $image['min_url'] ?>" /></a>
<?php endforeach ?>
</div>
<?php endif ?>______________________________________
In der CSS:
#jea-gallery-preview {
float:left;
width:600px;
height:450px;
}#jea-gallery-scroll {
float:right;
width: 250px;
height:450px;
overflow-y: scroll;
} -
Ich habs jetzt, bei so vielen CSS Dateien die irgendwie miteinander verknüpft sind verliert man den Überblick.
Danke dein Tip hat geholfen! Ich teste weiter!!!
-
-
-
-
-
-
-
