3 Kolonnen Bilder mit Link

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
Ich suche ein erprobtes Script was auf einer Webseite eine beliebige Anzahl von Bildern mit link anzeigt (gleichgrosse Bilder, die hintereinader angezeigt werden bis die Seitenbreite voll ist und dann geht es in der nächsten Zeile weiter.... so wie ein Text, der wenn die Zeile voll ist in der nächsten Zeile weitergeht.

ooo
ooo
o

Im responsiven Modus wird das dann zu:
oo
oo
oo
o

bzw (je nach bildschirmbreite zu:

o
o
o
o
o
o

Ich hätte das gerne, ohne JS, nur mit CSS aber ich habe bis jetzt nichts passendes gefunden.

Danke,

brainstuff.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Wenn dich die Antworten bei HTML-Seminar nicht weiter gebracht haben, dann versuche dies:
CSS:
        #container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        #container>figure {
            margin: 0;
            flex: 0 0 28%;
        }

        #container>figure>img {
            width: 100%;
        }

        @media screen and (max-width: 600px) {
            #container>figure {
                margin: 0;
                flex: 0 0 90%;
            }
        }
HTML:
    <div id="container">
        <figure>
            <img src="images/dia0.jpg">
        </figure>
        <figure>
            <img src="images/dia1.jpg">
        </figure>
        <figure>
            <img src="images/dia2.jpg">
        </figure>
        <figure>
            <img src="images/dia3.jpg">
        </figure>
        <figure>
            <img src="images/dia4.jpg">
        </figure>
        <figure>
            <img src="images/dia5.jpg">
        </figure>
        <figure>
            <img src="images/dia0.jpg">
        </figure>
    </div>
Die Mediaqueries kannst Du leicht erweitern um die zweispaltige Anordnung.
 

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
Danke Sempervivum Du hast mir gezeigt, dass das eigentlich ganz einfach ist nd dass es kein kompliziertes erproptes Script braucht. Ich habe befürchtet, dass es da ein kompliziertes Script braucht, was man problemlos in responsive Seiten einbinden kann ...

Ich habe jetzt etwas mit Deinem Script und flex herumgebastelt und habe jetzt ein ganz tolles script, was mir jetzt beliebig viele Bilder auf den screen legt .. das läuft jetzt sogar perfekt auf Smartphones. Auf dem PC Screen hat es 3 Kolonnen, auf dem Landscape Smartphone nur noch 2 und auf dem Portrait Format vom Smartphone nur noch eine Kolonne ...

Aber ich habe es noch nicht geschafft, da einen Link auf die Bilder zu legen ... und es wäre eigentlich besser wenn jedes Bild eine html Seite wäre, die aus einem Bild besteht, was man anklicken kann.

Ich brauche dieses Script an mehreren Plätzen der Seite. Es wird zum Beispiel eine ziemlich grosse Kollektion von e-Books haben, die dann hinter jedem Bild sind und die die Nutzer öffnen können. An einer anderen Stelle wird es eine Liste von Foren haben (auch je Forum ein Bild).

Der Inhalt von jedem "Bild" (= die html Seite, die in dem Bild angezeigt wird), hat dann in dem Script einen Standard namen, den man ziemlich problemlos ändern kann: content/eb1/01.html. ...... content/eb1/99.html . Wenn man dann im html eb1 in eb2 umwandelt, wird einen andere Serie von content angezeigt. Bei dieser Methode kann man auch ganz einfach den Namen von den Unterverzeichniss an den im html verwendeten Namen anpassen, dann braucht man nichts im html ändern, trotzdem kommt dann eine andere Serie von Inhalten.

Ich mache das auf der betroffenen Seite schon mit Slide-Shows wo man die Slide Show durch einfaches ändern vom Namen des Unterverzeichnisses ändern kann.

Danke,
brainstuff
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Aber ich habe es noch nicht geschafft, da einen Link auf die Bilder zu legen
Das wäre sehr einfach, Du brauchst nur das figure-Tag durch ein a-href-Tag mit dem richtigen Link zu ersetzen.
und es wäre eigentlich besser wenn jedes Bild eine html Seite wäre, die aus einem Bild besteht, was man anklicken kann.
Wenn ich mich an deinen anderen Thread erinnere, so schriebst Du dort von iFrames. Wenn die angezeigte HTML-Seite nur aus einem Bild besteht, wäre es aber doch einfacher, dieses direkt anzuzeigen?
 

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
@Sempervivum

es ist so, dass die html Seite die angezeigt werden soll aus einem Bild mit einem Link besteht. Die Idee dahinter ist eigentlich ziemlich interessant: man könnte dann diese Bilder-kästen als "Werbefläche" anbieten in der, die Anbieter den Inhalt selbst bestimmen können, oder es wird eine Seite angezeigt, die man ausserhalb der Seite bearbeiten kann in der sie angezeigt wird. Da bleibt die Seite. Du kannst auf der Seite die ich zur Zeit aufbaue (pxoxd.com) sehen was ich meine. Da hat es nach dem Accordeon eine Slide-Show, die kann man durch einfaches Umbenennen des Verzeichnisses in dem die Bilder liegen gegen andere Bilder ersetzen.

Aber das ist noch nicht so wie ich das will, Auch das soll ein Inline-Frame sein, in dem man nicht nur eine Slideshow anzeigen kann, deren Bilder man durch das Umbenennen von einem Unterverzeichnis auswechseln kann.

Weiter unten hat es dann diese Flex Bilder, die zu "inline-Frames" werden sollen, in denen dann ein beliebiger Inhalt angezeigt werden kann. Der Inhalt dieser kästen ist immer eine html Seite, die dann einen beliebigen Inhalt haben kann (ein annimiertes Gif mit einem Link, eine Slide-Show,.eine kleines Bild von einer Webseite, ... die sich dann in einen neuen Tab öffnet, wenn man auf sie klickt.

In der End-Stufe kann dann zum Beispiel eine Seite, wie html.de eine Seite anbieten die zum Beispiel ein "News-Ticker" ist, wo angezeigt wird, das gerade für Fragen im Forum gestellt werden.

Danke,
brainstuff
.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Na, auf pxoxd.com ist aber von responsivem Verhalten nichts mehr zu entdecken, weil Du feste Breiten verwendest. :-(
Nur die Umschaltung zwischen 1, 2, 3 Spalten.
Aber egal, hier ist ein Layout mit iFrames. Diese sind responsiv, d. h. sie ändern die Größe wenn man die Breite des Browserfensters ändert, und das Seitenverhältnis bleibt dabei erhalten. Hier habe ich es quadratisch eingestellt, Du kannst natürlich auch ein anderes Seitenverhältnis nehmen. Ich habe dazu die betr. Zeilen im CSS kommentiert:
Code:
    <style>
        #container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
        }
        #container>.c-iframe {
            margin: 0;
            /* 28% ist die Breite des iFrames: */
            flex: 0 0 28%;
            height: 0;
            /* die Hoehe des iFrames, hier
            gleich der Breite, daher quadratisch */
            padding-bottom: 28%;
            position: relative;
        }
        #container>.c-iframe>iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
        }
        @media screen and (max-width: 800px) {
            #container>.c-iframe {
                flex: 0 0 45%;
                padding-bottom: 45%;
            }
        }
        @media screen and (max-width: 400px) {
            #container>.c-iframe {
                flex: 0 0 90%;
                padding-bottom: 90%;
            }
        }
    </style>
    <div id="container">
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
        <div class="c-iframe">
            <iframe src="thread196-layout.html">
            </iframe>
        </div>
    </div>
 
Zuletzt bearbeitet:

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
@Sempervivum Danke für das script ... das ist so wie ich das brauche.

Das mit dem Responsive war so gemeint, dass die Seite sich jetzt an alle Bildschirmbreiten anpasst. Aber ich weiss, das das noch nicht wirklich richtig ist:Auf normalen Bildschirmen ist das Accordion unnütz breit.

Ich will eigentlich, dass das die Bildershow, auf breiten Bildschirmen rechts von dem Accordion kommt.

Im Augenblick ist die Bildershow sowieso nur ein Platzhalter: der Inhalt ist so zwecklos. Da muss ein Inhalt rein, der einen Sinn macht.

Ich bin dabei zu überlegen, ob ich das nicht ganz einfach mit Deinem Script bewältigen kann ... ich lege einfach das Accordion und die Bilderschow in 2 solche i-frames und dann ist das erreicht, was ich will: O O auf dem Pc Bildschirm und wenn es schmaler wird, rutscht der 2. I-Frame nach unten. .

Ich muss auch noch die Grösse vom Logo besser steuern, aber das Logo ist auch noch nicht ganz so wie, ich das eigentlich will ... die Idee, die hinter dem Logo und dem Namen steht ist eigentlich genial: der Name ist ein "Funktionsmodell", von einem Produkt was wir anbieten werden. Ein Freund (er ist Grafiker) ist dabei das zu verbessern und ich habe da eine ganz neue Idee für ein interaktives Logo, die schon in einer primitif Version bei mir läuft.

Danke,
brainstuff
 

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
@m.scatello Du hast recht, das ist nicht wirklich eine gute Lösung.

ich habe das mal versucht, mit einem CSS, was 3x den Container von Sempervivum hat (container container1 container3 )

Da ist dann der Container1 das Accordion, der container2 das annimierte gif Bild ... Da kommen dann aber, auch auf dem PC Bildschirm, Container1 und container2 einzeln links hintereinander statt nebeneinander (Toll ist aber, dass das Accordion sich schön der Breite des i-Frames angleicht).

Ausserdem haben Beide einen weissen Rand ...Ich habe erst gedacht, dass der weisse Rand von den HTML Seiten, die ich in die i-Frames genommen habe stammt, aber die haben den gleichen Hintergrund wie die Hauptseite (Ich habe einfach die ursprüngliche Seite kopiert und in einer nur das Accordion und in der anderen das GIF gelassen.Beide haben den schwarzen Hintergrund von der ursprünglichen Seite.

Daher kommt der weisse (dünne) Rand also nicht ... aber ich finde nicht heraus wo der herkommt.

Danke,
brainstuff
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Wenn es um solche Einzelheiten, weiße Ränder etc., geht, ist es am besten, wenn man die Seite im Zusammenhang sieht. Ich nehme an, das ist noch die selbe Seite, die Du hier gepostet hast? Hast Du die Änderungen, die Du beschrieben hast, schon eingebaut?
 

brainstuff

Neues Mitglied
24 Januar 2012
18
0
1
@Sempervivum Ich habe das nur lokal ausprobiert. Ich habe die die Flex Bilder durch Deine Container ersetzt und getestet, das geht bis auf kleine Details (die weissen Rahmen, leere Zonen zwischen den vertikalen i-Frames) ganz toll ...die Test-Seiten, die ich da als Ziel angegeben habe kommen sogar responsive.

Und dann bin ich hingegangen und habe Dein CSS 3 x hintereinander gehängt (Container ... Container1 ... Container2) und habe dann das Accordion und das annimierte GIF jeweils als eigene HTML Seite abgespeichert und diese Seiten habe ich dann als i-Frame mit Container1 und Container2 in eine Kopie der Hauptseite eingebunden. Ich habe da 2 extra Container fabriziert, weil die Anzeigehöhe von dem Accordion höher ist, wie die vom Bild. Das wird dann aber vertikal untereinander angezeigt. Desswege hat das so keinen Wert.

Auf der PC Seite muss der Container mit dem Accordion so ca 1/3 von der Bildschirmbreite einnehmen und das Bild 2/3 Auf dem Smartphone im Landscape Modus muss das dann ähnlich (aber kleiner) sein. Auf dem Smartphone im Portrait-Modus müsste das Bild , statt neben dem Accordion darunter stehen .. das würde mit Deinem CSS gut laufen .. aber eben nur auf dem Smartphone.

Ich habe mal ein Flex-Script gehabt, was Kästen in beliebiger Breite nebeneinander anreihen kann, wie Dein i-frame Container-Css ... aber das wäre auf dieser Seite nur interessant, für die beiden ersten Elemente (Accordion / GIF) die anderen Inline Frames müssen eine Standard Grösse haben .. wie das Dein CSS macht.

Auf der fertigen Seite werden die I-Frames eine Standard Zieladresse haben .. im Stil von http://xxx.com/links/00/01.html (bis 99.html). im Verzeichnis links/00/ hat es dann 1-99 html Dateien die dann angezeigt werden. Wenn man dann im Verzeichnis links/00/ die Dateien gegen andere austauscht, wird die Seite aktualisiert, ohne dass man da noch etwas ändern muss. Man kann auch ganz problemlos neue Zielseiten in das Verzeichnis kopieren. die werden dann problemlos hinten dran angezeigt.

Die Seite wird auf vielen Unterseiten mit diesem System laufen. Es wird zum Beispiel eine Seite geben, auf der in den Frames Seiten mit Links zu Foren, zu Programmen, zu Projekten, zu Lieferanten, .... gelistet werden. Da das immer eine Ergänzung zum Seiten-Inhalt ist, macht es nichts, dass das alles am Seitenende angezeigt wird.

Ich wollte das am Anfang mit einem Verzeichnisbaum realisieren, aber das kommt, besonderst auf dem Smartphone nicht sehr gut.

Für das Akkordion suche ich auch noch eine bessere Idee ... das "Täschchen-auf-Täschchen-zu" ist mir eigentlich zu fummellig. Das Projekt was hinter der Seite steht, wird den Mitgliedern viel Zeit sparen und desshalb muss auch die Seite zeigen, dass sie schnell zu rationellen Lösungen führt.


danke,

brainstuff
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.470
294
83
66
Und dann bin ich hingegangen und habe Dein CSS 3 x hintereinander gehängt (Container ... Container1 ... Container2) und habe dann das Accordion und das annimierte GIF jeweils als eigene HTML Seite abgespeichert und diese Seiten habe ich dann als i-Frame mit Container1 und Container2 in eine Kopie der Hauptseite eingebunden. Ich habe da 2 extra Container fabriziert, weil die Anzeigehöhe von dem Accordion höher ist, wie die vom Bild. Das wird dann aber vertikal untereinander angezeigt. Desswege hat das so keinen Wert.
Das würde vollkommen problemlos ohne iFrames gehen: Accordion und anim. GIF in einen Container packen und diesem display: flex; geben, dann werden beide nebeneinander angezeigt.
Auf der PC Seite muss der Container mit dem Accordion so ca 1/3 von der Bildschirmbreite einnehmen und das Bild 2/3 Auf dem Smartphone im Landscape Modus muss das dann ähnlich (aber kleiner) sein.
Auch kein Problem: Mit der Eigenschaft flex für das Flexitem kannst Du die relative Breite steuern, d. h. flex: 1; für das Accordion und flex: 2; für das Bild.
Auf dem Smartphone im Portrait-Modus müsste das Bild , statt neben dem Accordion darunter stehen .. das würde mit Deinem CSS gut laufen .. aber eben nur auf dem Smartphone.
Du kannst mit einer Mediaquery problemlos zwischen der Anordnung nebeneinander und untereinander umschalten.

Alles was Du da beschreibst, kannst Du sehr einfach mit Flexlayout realisieren. Informiere dich hier:
 
Werbung: