#1

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Volker W.« (05.06.2016, 13:50)
#2

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·    Nachricht senden
 http://www.webchaot.ch

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...

 

 


Gruss

Walti

#3

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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. smile_winking_16.png


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#4

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·    Nachricht senden
 http://www.webchaot.ch

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


Gruss

Walti

#5

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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. smile_16.png


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#6

Cactus

Eroberer  (95 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.arthouze.de

#7

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Volker W.« (10.05.2016, 18:00)
#8

inselpirat

Routinier  (437 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

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

#9

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.smile_16.png

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. smile_16.png


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#10

Cactus

Eroberer  (95 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.arthouze.de

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.


Mit freundlichen Grüßen

Walter

www.berthold-brackel.de -  www.arthouze.de - www.bueroservice-berthold.de

#11

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Volker W.« (10.05.2016, 18:01)
#12

Cactus

Eroberer  (95 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.arthouze.de

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


Mit freundlichen Grüßen

Walter

www.berthold-brackel.de -  www.arthouze.de - www.bueroservice-berthold.de

#13

Volker W.

Administrator  (6587 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   VolkerWarmers  ·   volkerw68

@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! ;-)


Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Google+  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

#14

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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? 


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#15

Cactus

Eroberer  (95 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.arthouze.de

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


Mit freundlichen Grüßen

Walter

www.berthold-brackel.de -  www.arthouze.de - www.bueroservice-berthold.de

#16

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#17

Paulemann

Hero  (746 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.webdesign-bf.de

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.

Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Paulemann« (11.05.2016, 13:17)
#18

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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

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


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Merlin2504« (11.05.2016, 14:33)
#19

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

in die Style.css eingefügt.

.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?


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 4 mal bearbeitet, zuletzt von »Merlin2504« (14.06.2016, 22:10)
#20

Thomas

Co-Admin  (1856 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://siquando-designs.de

#21

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (20.05.2016, 12:40)
#22

Thomas

Co-Admin  (1856 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://siquando-designs.de

#23

Paulemann

Hero  (746 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.webdesign-bf.de

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.


Gruß

Paulemann

Webdesign-BF - Projektbetreuung und ein wenig mehr...

#24

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Danke für den Tipp.

Werde mir jetzt kommende Woche mit einem Kumpel, der etwas mehr Erfahrung smile_16.png 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?


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#25

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Zitat von: Paulemann

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?

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. smile_16.png Und wenn ich erstmal um den Wald herumlaufe und dann reingehe.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#26

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Merlin2504« (14.06.2016, 22:22)
#27

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·    Nachricht senden
 http://www.webchaot.ch

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...


Gruss

Walti

#28

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Merlin2504« (02.06.2016, 07:55)
#29

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·    Nachricht senden
 http://www.webchaot.ch

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...


Gruss

Walti

#30

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

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.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 4 mal bearbeitet, zuletzt von »Merlin2504« (02.06.2016, 23:14)
5917 Aufrufe | 88 Beiträge