ansprechende Miniaturgalerie mit Bildvorschau

-2

Ich möchte fragen, wie diese Art von Fotogalerie zu machen (durch fcalderan),ansprechende Miniaturgalerie mit Bildvorschau

codepen.io/anon/pen/OPMeXM

reagieren. Der Grund, warum ich es reaktionsfähig machen wollte, ist so, dass, wenn ich ein anderes Element in der Galerie hinzufügen muss, es mit den restlichen Thumbs ausgerichtet würde oder gestapelt würde, wenn das Ansichtsfenster zu schmal wird. Ich kann das nicht alleine schaffen, danke an alle, die Zeit haben, um zu helfen!

Update: Ich brauche vielleicht nicht die Zoom-/Fenstervorschau, um reaktionsfähig zu sein, sondern die gesamte Galerie ansprechbar zu machen, wenn es um die Breite geht. Beim Hinzufügen von Bildern würde der Daumen stapeln und darunter platziert werden.

Unten ist der Link zu dem Bild, das helfen kann zu visualisieren, was ich erreichen möchte.

https://drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/view?usp=drivesdk

Ich bin sehr traurig Jungs dank Seiko85

Quelle

2016-05-19 Mint Mitch

Der einfachste Weg ist eine zusätzliche Bibliothek wie Bootstrap verwenden, um in der Lage sein, ein ansprechendes Raster zu verwenden. Auf diese Weise fügen Sie den dom-Elementen die entsprechenden Klassen hinzu, und sie sollten sich anordnen. Für weitere Hilfe stellen Sie bitte eine Fiedel mit dem, was Sie bereits versucht haben. Dies ist keine Seite, auf der die volle Arbeit für Sie erledigt wird, aber wir helfen Ihnen gerne, wenn Sie nicht weiterkommen. – Seika85

@ Seika85, danke für die Antwort, ich hatte gehofft, es einfach mit css alleine zu machen, weil ich neu Bootstrap bin und immer einige Probleme mit bootstraps Medienabfragen hatte. Ich habe es mit nur divs gemacht und habe es nicht geschafft, den Code, den ich gemacht habe, zu ändern, war viel zu unordentlich, anders als die Proportionsanordnung von calderas, die die Beschreibungsliste benutzt. Es tut mir leid, dass ich keine Probleme habe, aber ich werde später versuchen, ein Layout zu erstellen. Danke für die Antwort :) –

Bootstrap kann viel Overhead für das, was Sie versuchen. Aber ich wollte Ihnen eine bekannte reaktionsschnelle Grid-Bibliothek zeigen. Aber da Sie uns ziemlich wenige Informationen zur Verfügung gestellt haben, wollte ich Ihnen nur Hinweise geben, wo Sie weitermachen können. – Seika85

ich verwenden, um Ihr codepen Beispiel und hinzugefügt sowie jeweilige Klassen Bootstrap.

Siehe hier: https://jsfiddle.net/hdqgeuqg/

Ich habe class="container" zum <dl id="simple-gallery"> und class="col-md-3" alle <dt> Elementen.

Dann werden einige CSS Anpassungen erforderlich gemacht werden, wie:

dl.container { 
    /*height: 488px;*/ 
    padding: 360px 5px 5px; 
    /* ... */ 
} 
dl.container:before { /* ... */ } 
dt { 
    /*height: 100px;*/ 
    /* ... */ 
}

Eine verfeinerte/reaktions Geige: https://jsfiddle.net/hdqgeuqg/3/

Quelle

2016-05-19 13:10:54 Seika85

@ seiko85 danke für die schnelle Antwort, während wir Thumbnails hinzufügen können, ist es möglich, dass der obere/obere Teil reaktionsfähig sein kann, so dass es automatisch auf dem rechten Teil der Galerie ausgerichtet wird? Entschuldigung für die späte Antwort. Ich schätze Ihre Hilfe! :) –

Können Sie mehr erklären, was Sie erreichen möchten? Du kannst mit meiner Geige herumspielen und sie aktualisieren, damit ich sehen kann, was du versucht hast und wo du stecken geblieben bist. – Seika85

Vielen Dank, hier ist ein kurzes Bild von dem, was ich erreichen muss: https://drive.google.com/file/d/0B1FMADgebxAyQkszbkpuVk1PRjQ/view?usp=drivesdk. –

ansprechende Miniaturgalerie mit Bildvorschau

Antwort

Verwandte Themen