Responsive Bildergalerie (keinen Slider) in Bootstrap 3 einbauen

Ich suche Hilfe, um so etwas ähnliches nachzubauen. Kennt ihr zufällig Besipielseiten, wo ich mir das anschauen kann? Oder habt ihr eine Idee, wie man so etwas nachbauen könnte? Für WordPress und andere CMS habe ich schon genügend gefunden.

jQuery ist ja im Bootstrap 3 Design bereits eingebaut, so dass man eventuell darauf aufbauen könnte.

Beispiellinks:

1. Beispiel - In dem Fall denke ich mal wird's schwierig, die verschiedenen Formate zu beachten.
2. Beispiel - Auch sehr schick.
3. Beispiel - Auch spitze.
4. Beispiel - Nur zur Anschauung. Das wird bestimmt ein Kaufskript sein.

Wenn ihr Ideen habt oder Skripte empfehlen könnt, vielleicht auch eine Software zum Erstellen, bedanke ich mich jetzt schon. Wichtig ist eben, dass es responsiv bleibt, da ich mit Bordmitteln von Siquando nichts finde.

Hallo Klaus

Vor langer Zeit hatte ich mal so was ähnliches als Beispiel zu einer Diskussion in Paulemann's Forum gemacht. Da Paulemann sein Forum gelöscht hat, weiss ich allerdings die Ausgangsdiskussion nicht mehr...

Aber Du wolltest ja lediglich sehen, dass man so was auch in W2D/Siquando machen kann, deshalb mein

Beispiel hier

Wenn ich mich richtig erinnere, dann war auch dies ein jquery-Script, das eigentlich für Wordpress zur Verfügung stand und das ich mir für W2S/Siquando zurecht gebogen hatte.

Wenn Du Tante Google bemühst, dann wirst Du tausende Scripts finden (die meisten davon auch "responsive" und sogar kostenlos) aus denen Du aussuchen kannst was immer Dir auch gefällt...!

Mit den Suchbegriffen "jquery picture grid" oder "jquery picture gallery grid" wirst sicher auch Du fündig. Die Crux an solchen Lösungen mit externen Scripts ist einfach immer der Einbau in W2D/Siquando, da braucht's schon gute Kenntnisse und oft auch eine Portion Phantasie, und zu diesen Punkten kenne ich Deine Fitness nicht...

Danke für den Tipp.

Zu deinen Beispiel: Die Collage ist aber nicht responsive oder übersehe da was?

Zu meiner Fitness: Wenn ich an mein Ziel kommen will, muss ich die unbedingt steigern. 

...doch, ist sie schon (wie auch das Beispiel "ohne Sidebar" zeigt), aber mein im Beispiel verwendetes Design ist es nicht...

Bin immer noch beim tüfteln, wie ich eine einigermaßen schöne Bildergalerie in Siquando intergiert. Stolpere dabei immer wieder über Wordpress. Da ist bei fast jedem template ein "jquery" Galerie eingebaut.

Habe mir jetzt auf meiner Testseite mal mit Genehmigung einen Quelltext von einer Seite eingebaut. Will mal mit meinen Kenntnissen weiter versuchen, den Code/template zu integrieren.

Testseite

Falls jemand eine Idee hat mir das suchen zu erleichtern, paar Tipps zu geben, würde ich mich freuen. 

Hast du schon einmal bei Jalbum geschaut?

http://jalbum.net/de/skins/new

Danke für den Tipp. Muss mir das mal anschauen, wie ich dann das Album einbinden kann. Wahrscheinlich nur per iframe?

Moin Klaus,

ich hatte es vor einiger Zeit mal eingebaut mittels iframe - dann aber wegen des responsiven Designs wieder rausgeschmissen.

Inzwischen ist die Software nicht nur kostenpflichtig geworden, es gibt auch responsive skins dafür wie ich gesehen habe.

Die Verwaltung der Alben war sehr einfach - auf dem server einen Ordner "Alben" anlegen, darin dann jeweils die einzelnen Alben nach z.B. "Hochzeit_Karin" usw. packen, den iframe dann direkt dorthin legen.

Da ich weniger Bilder zeige habe ich mich für die slideshow variante vom Bootstrap Design entschieden.

VG

Michael

Ich wills heut mal mit einen responsiven Design/Skin probieren. Habe mir heute die Testversion geladen. Wollte vorhin auf die schnelle testen, das ging daneben.

Da ich auch Bilder verkaufen will, ist JAlbum vielleicht eine gute Sache. Vor allem kann ich die Bildergalerien einfacher erstellen.

Ich melde mich wieder. Wenn jemand noch einen Tipp hat, dann her damit. 

Ich nutze Jalbum für mich und auch Kunden schon recht lange

Die Einbindung geht mit iframe ganz einfach und viel Skins können recht gut an die Seite (Farbe, Größe, etc.) angepasst werden.

Mittlerweile gibt es auch einige responsive Skins, ich experimentiere auch gerade damit.

Und das schöne ist, man kann das Album erweitern oder ändern, ohne W2D/Siq zu bemühen.

Kann ich mir das bei dir schon responsiv anschauen? Das mit dem Erweitern ist eine ganz tolle Sache, die ich dann auch vereinsmäßig nutzen will. Bisher hatte ich immer den BreezeBrowser. Aber der ist eben nicht responsiv.

Muss mal schauen, ob es machbar ist einen iframe responsiv einzusetzen.

Klaus,

Ich habe bisher noch keine offiziellen responsiven Designs im Einsatz, wir arbeiten noch am CMS System dazu.

Aber im Testbetrieb funktioniert das schon und ich baue mal heute Abend eines zusammen und schicke dir den Link

@Klaus (Off-Topic):

Normalerweise weise ich seit langer Zeit nicht mehr darauf hin, da sich User dadurch manchmal persönlich angegriffen fühlen (was auch Du in diesem Fall definitiv nicht sein mußt).

Aber heute möchte ich auch Dich mal um folgendes bitten: Bitte verzichte zukünftig auf vollständige Zitate direkt vorheriger Beiträge (siehe Forenregeln § 2 Abs. 6).

Dieser Beitrag braucht bzw. soll auch nicht beantwortet werden. Bitte einfach nur zukünftig dran denken.

Danke Dir!

Habe jetzt mal mit Jalbum getestet.

Testgalerie

1. Die Erstellung der Galerien geht einfach.

2. Das integrieren per iframe gefällt mir derzeit noch nicht. Bei iFrame muss ide Höhe direkt bestimmt werden? Das sieht es noch nicht unbedingt schön aus. Das scrollen und die Balken sehen icht schön aus.

1
2

<iframe src="http://www.jahnfoto.de/Test%20Responsiv/" height="800" width="100%" frameborder="0" scrolling="auto">
</iframe>

3. Die Testgalerie per jquery sieht da eleganter aus, vor allem die Grossansicht. (Könnte aber auch an der Erstellung in jAlbum liegen.)

4. Noch eine Frage zum Bootstrap 3: Ist das mit Bordmitteln möglich solche Galerien über die Gesamtbreite wie den Eyecatcher darzustellen? 

Da gebe ich dir recht, die Scrollbalken vom iframe sehen nicht gut aus.

Man kann aber bei vielen Skins die Thumbs auch auf verschiedene Seiten verteilen (Pagination)

Dann bleibt das Fenster gleich groß und es kommen durch weitere Bilder nur neue Seiten hinzu.

Dann gibts keine Scrollbalken

Ist das bei iframe (responsiv) generell so, da man die Höhe bestimmen muss?

Ich nutze zum Beispiel für Maps eine gesonderte Klasse und weise dies per CSS hinzu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}
 
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 

 Das heißt, alles per HTML Absatz und der iframe wird so eingebettet:

1
2
3
4
5
6

<div class="responsiveContainer">
 
Zeile des iframe
 
 
</div>

 Vergessen:

scrolling="auto"

sollte auf "0" stehen.

Es ist ja bekannt das meine html Kenntnisse nicht unbedingt die besten sind. 

Muss ich da ein CSS mit dem Namen "responsiveContainer"  erstellen? Oder in welche CSS muss ich den Code integrieren?

Bei der ProVersion scheint es die Datei css.tpl zu sein, wo ich den Code reinschreiben müsste.

Das habe ich jetzt noch gefunden.  Man kann iframe mittels jquery einbinden? Link

.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}
 
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 HTML Absatz

<div class="responsiveContainer">
<iframe src="//www.jahnfoto.de/Test%20Responsiv" allowfullscreen></iframe>
</div>

Es wird immer noch die Höhe im iFrame angezeigt?

Was für einen Fehler könnte ich noch gemacht haben?

Auf w3schools.com findest du sicherlich ein passendes Attribut mit dem die Höhe (height) des iframe's eingestellt werden kann.

Die Höhe vom iframe möchte ich nicht fest einstellen, wie es derzeit nur geht, sondern das diese sich automatisch an den Bereich anpasst. Und da finde ich auch bei w3schools.com nichts Neues.

Schade das es so ein Plugin, wie Bildmatrix bei den Web/Shop Versionen gibt. Wie schon geschrieben, ich versuchte den Code-Schnipsel in die Style.css einzufügen. Aber es verändert sich da nichts.

Für das automatische Setzen der iFrame Höhe gibt es beispielsweise das PlugIn iFrameAutoHeight

Klaus, ich frage mich ernsthaft, was Du hast. Irgendwo muß der Inhalt doch hin oder sollen nur noch "Stecknadelköpfe" angezeigt werden? Hatten wir das Thema bei den Tabellen nicht schon einmal?

Hast Du Dir das ganze mal auf verschiedenen Geräten/Auflösungen angeschaut?!

Das Einzigste, was unpassend ist, ist der Border.

Danke für den Tipp.

Werde mir jetzt kommende Woche mit einem Kumpel, der etwas mehr Erfahrung  hat mal verschiedene jQuery Galerien anschauen. Da ja in dem Design schon jquery genutzt wird, denke ich mal "mit meinen Wissen", das dies die einfachere Geschichte ist, so etwas wie hier Link einzubauen. Das WE komme ich nicht dazu, da ich auf verschiedenen Hochzeiten zum fotografieren bin.

Habe ja auf meiner Testseite schon mal verschiedene Codes von einer anderen Seite kopiert. Das würde ich händisch umbauen. Die Bildergalerie muss zwar dann etwas komplizierter erstellt werden, da ich alle Bilder vorher bearbeiten muss. Aber das ist meine Strecke die ich auf jeden Fall besser kann. Und die Galerie soll dann ja nicht ständig gewechselt werden.

Dazu mal noch eine Frage: Den kompletten Bereich wie im Eyecatcher zu nutzen, wäre dies in dem Design auch möglich?

Hallo Bernd,

wir haben uns gerade bei den Antworten überschnitten. Wie gesagt, es gibt beim iframe ja die Möglichkeit das die Höhe automatisch erzeugt wird. Ich hab es bloss noch mit meinem Wissen es nicht geschafft den richtigen Code in die richtige css zu schreiben. Die Bilder habe ich mir in verschiedenen Auflösungen angeschaut und es passt. Dadurch das alles responsiv wird, sehen die Bilder auch in klein gut aus. Die Bildergalieren in diesen Auflösungen darzustellen machen ja hunderte Fotografen. Nur das diese fast alle mit Wordexpress arbeiten und in den templates standardmäßig solche Galerien integegriert sind.

Irgendwie komme ich noch zum meinen Ziel.  Und wenn ich erstmal um den Wald herumlaufe und dann reingehe.

Habe mich inzwischen entschieden mit der Lightbox 2 meine Galerien zu erstellen. Bin heute schon einen Schritt weitergekommen.

Könnt ihr mir einen Tipp geben, wie ich die Abstände zwischen den thumbnail einstellen kann? Vertikal ist ein Abstand vorhanden, nur horizontal nicht. Wo wird so etwas eingestellt? In der lightbox.css ?

Gruß Klaus

Da fällt mir spontan nur die Bibel, Lukas 23:34 ein...

Wieso baust Du denn nochmals eine Lightbox ein? Ich hab' zwar Thomas' Design nicht, aus der Beschreibung geht aber hervor, dass die Lighbox ja schon integriert ist...?

Egal, in der lightbox.css wirst Du nicht fündig werden, denn dort sind ja nur die Gegebenheiten der Lightbox selbst geregelt, also wie sich die Lightbox darstellen soll, aber nicht Deine Bilder...!

Ich gehe mal davon aus, dass Du da irgend einen Codefetzen irgendwoher kopiert hast ohne zu wissen, was Du überhaupt machst...?

In Deinem Codefetzen werden die Bilder als class="example-image" definiert (wie der Name ja schon so schön sagt "Beispielbild"), aber diese Klasse hast Du ja nirgendwo definiert...!!??

Definiere sie also und gib ihr für oben und/oder unten Abstandswerte und schon wird's funktionieren...

Danke für deine Antwort.

Ich habe folgendes gefunden und zum testen eingebaut. http://lokeshdhakar.com/projects/lightbox2/

Ich muss ertsmal dahinterkommeh, wie so etwas fuktioniert. Der Tipp das die Lightbox schon eingebaut ist, schaue ich mir heute auch nochmal an. Vielleicht kann ich ja dann die gleich verknüpfen.

Ja, das hab' ich aus dem Quellcode ja schon gesehen, ich weiss nur nicht warum, da Du ja bereits eine Lightbox im Design hast...

Aus dem Code der Bilder sehe ich auch, dass Du diesen Codefetzen irgendwoher kopiert hast und die Bilder nicht "ganz normal" in W2D erstellen lässt. Es gibt in Bootstrap nämlich keine Klasse "example-image" und ich gehe auch nicht davon aus, dass die von Thomas stammt, denn der hätte sie sicher sinnvoller getauft...

Definiere also diese Klasse und gib ihr wie bereits geschrieben oben und/oder unten Abstandswerte...

Die Lightbox ist wie ich gerade nochmal nachgelesen habe eingebaut. Aber wie soll ich die Bilder von W2D erstellen lassen, so dass es wie hier dann aussieht und auch responsiv ist? Dafür finde ich bisher keine interne Lösung. 

Auch scheue ich mich weiterhin Bilder von W2D erstellen zu lassen, da diese nicht in einer optimalen Qualität dargestellt werden. Das Thema haben wir schon seit Data Becker.