jquery Bastelei, Photogallerie

Triggertrix · 13.08.2012

Hallo,

ich möchte meine Homepage umbauen und stehe etwas verwundert da. Ich habe jetzt intensiv das Netz abgesucht und da gibt es ja schon ganz viel, aber das was ich gerne hätte offenbar nicht.

Ich beschreibe mal und vielleicht was ja jemand was.

1. ca. 8 Galerien sollen erreichbar sein (via HTML oder eine ist schon per Default offen……)
2. Es liegen alle Bilder der jeweiligen Galerie, als Thumbnails auf dem "Tisch"
3. klickt man auf eines der Thumbnails, wird das Bild vergrößert (am besten Einstellbar bzw. nahezu Browserfüllend) bzw. mit einem Effekt versehen (s.h. blättergalerie, funktioniert aber nur schön in Webkit-Browsern, ist aber das beste was ich bisher finden konnte)

Das sind doch keine all zu hohen Anforderungen, oder? Wenn ich sehe was da so rum schiesst, erscheint mir das als eher simpel.
Hat jemand eine Idee wie ich das hinbekomme, oder / und das angeführte Plugin auch in nicht-Webkit-Browsern schön läuft?

EDIT: Hab da was gefunden, was bis auf Einschränkungen ziemlich genau das macht was ich suche:

Dank & Gruss

Myhar · 13.08.2012

AW: jquery Bastelei, Photogallerie

Was passt dir an der eigentlichen Lightbox nicht?

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

Gute Frage…
kannte ich noch nicht, so wie Du es sagst, scheint es "DER Klassiker" zu sein ;o)

Ich weiss noch nicht genau wie ich das Konfigurieren kann, bzw. muss um das so hin zu bekommen, wie ich das gerne hätte, hoffe das ist aber für normal sterbliche machbar.
Ggf. würde ich noch einen kleinen Text (Bildername o.ä.) dazu setzen wollen wenn es gross ist.
Ansonsten erst mal ziemlich genau das.

Gibt es irgendwo einfach verständliche Tutorial bzw. ne Dokumentation dazu?

Gruss & Dank

leveler · 13.08.2012

AW: jquery Bastelei, Photogallerie

Gibt es irgendwo einfach verständliche Tutorial bzw. ne Dokumentation dazu?

Ja, so etwas findet sich durchaus im www. Muss man halt nur einen klenien Augenblick nach suchen.

Myhar · 13.08.2012

AW: jquery Bastelei, Photogallerie

Triggertrix schrieb:
Ggf. würde ich noch einen kleinen Text (Bildername o.ä.) dazu setzen wollen wenn es gross ist.

Hast du dir die verlinkte Seite genau angesehen? Das erste Bild ist ein Beispiel ohne Bildunterschrift und das zweite Bild ein Beispiel mit Bildunterschrift. Das dritte Beispiel ist eine Galerie, welche deine Wünsche eigentlich abdeckt.
Scrollt man ein wenig hinunter, hat man sogar eine ausreichende Dokumentation, um all deine Wünsche abzudecken. Man muss mehr machen, als nur auf das erste Bild klicken. Und englisch muss man selbstverständlicherweise auch können

All deine Fragen werden also auf der von mir verlinkten Seite beantwortet.

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

ja doch, ja doch ;o)

ist heute nicht mein Tach……

Abschlussfrage, wenn ich generell "Lightbox" lese, geht das auf die lightbox zurück?
Also sind die anderen nur Abwandlungen jener "Mutter-Lightbox" oder ist das eher ein Feststehender Begriff für diese Art der Bildpräsentation?

Myhar · 13.08.2012

AW: jquery Bastelei, Photogallerie

Meines Wissens nach war das Lightbox script das erste Script, welches die Funktionalität angeboten hat. Den Begriff haben dann andere Scripte weiterverwendet und so ist es zu dem Überbegriff gekommen. Kann mich aber auch irren

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

Ah, ok…
Das heisst ich kann eben nicht einfach nach Lightbox googeln und alles was dann kommt kann ich darauf runter brechen (zumindest nicht mit meinen Javascript-Fähigkeiten ;o) )

Ok, dann danke euch vielmals, ich fang dann mal an zu basteln, lesen, basteln, lesen und spätestens dann wieder hier fragen ;o)

Danke erst mal bis dahin!

Myhar · 13.08.2012

AW: jquery Bastelei, Photogallerie

sicher kannst du nach lightbox googlen, dann bekommst du verschiedene Variationen angeboten. Warum du das nicht einfach ausprobiert hast, ist mir allerdings ein Rätsel.

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

Warum du das nicht einfach ausprobiert hast, ist mir allerdings ein Rätsel.

Ich habe nie gesagt das ich das nicht getan hätte…… abgesehen davon, habe ich gesucht wie ein grosser…… nur wenn man von etwas kaum bis keine Ahnung hat, ist es häufig schwer den Kontext zu erfassen und dann entsprechend zu agieren, daher -um das zu ändern- hab ich hier doofe Fragen gestellt, die sich sicher so anhören als hätte ich nicht gesucht…… ich hab nur nix gefunden ;o)

So, aber wie angedroht frag ich weiter ;o)
Ich habe jetzt schon einiges hin bekommen, was ich aber nicht herausfinde ist, wo ich:

openMethod / closeMethod / nextMethod / prevMethod

hin schreiben kann.
Bin jetzt bei der "Fancybox" gelandet. s.h. http://fancyapps.com/fancybox/#examples
Und bei den Beispielen wird man hierhin verwiesen, wo man Übergangseffekte verändern kann, was ich gerne möchte.

Aber egal wo ich o.g. Attribute einsetze (notiert wie in dem JS-Fiddle Dingend), läuft das JS nicht mehr……

Kann mir jemand sagen wo ich das einsetzen kann?

Duddle · 13.08.2012

AW: jquery Bastelei, Photogallerie

Die Optionen für {open,close,next,prev}Method werden ganz normal als Optionen beim Initialisieren übergeben. Dein verlinktes Beispiel macht das auch:

HTML:

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        openMethod : 'dropIn',
        openSpeed : 250,

        closeMethod : 'dropOut',
        closeSpeed : 150,
        
        nextMethod : 'slideIn',
        nextSpeed : 250,
        
        prevMethod : 'slideOut',
        prevSpeed : 250
    });

Die Optionen werden als ein Objekt übergeben. Du könntest genauso schreiben

HTML:

var myOptions = {openMethod:'dropIn', openSpeed: 250, ...... };
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox(myOptions);

Die als Übergang eingesetzte Methode wird hier als einfacher String gesetzt. Intern versucht er dann, eine Funktion namens Inhalt der Variable openMethod aufzurufen. In dem Beispiel im jsfiddle werden die Funktionen vorher definiert und [STRIKE]ihr Übergangsalgorithmus[/STRIKE] Edit: die Attribute der Animation beschrieben. Das ist aber eher für fortgeschrittene Nutzer mit Sonderwünschen gedacht.

OffTopic:

Meines Wissens nach war das Lightbox script das erste Script, welches die Funktionalität angeboten hat. Den Begriff haben dann andere Scripte weiterverwendet und so ist es zu dem Überbegriff gekommen. Kann mich aber auch irren

Der Begriff wurde sehr wahrscheinlich aus der Photographie übernommen. Dort gibt es lightboxes (dt. Wiki-Artikel zu Leuchttisch), die einen ähnlichen Effekt haben (ein Bild zentriert, beleuchtet).

Duddle

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

Hm…… ich würde gerne etwas dazu sagen was weniger intelligenzvermindert klingt, aber…… hähhhh? ;o)

Also, ich habe jetzt schon mal rausgefunden, wie ich zu den Effekten komme, die ich gerne hätte.
Oben im JS ist das:

Code:

// Change title type, overlay opening speed and opacity
			$(".fancybox-effects-a").fancybox({
				padding: 0,
				openEffect : 'elastic',
				openSpeed  : 150,

				closeEffect : 'elastic',
				closeSpeed  : 150,

				closeClick : true,

				helpers: {
					title : {
						type : 'outside'
					},
					overlay : {
						speedIn : 500,
						opacity : 0.95
					}
				}
			});

Im HTML berufe ich mich dann so darauf:

Code:

<a class="fancybox-effects-a" data-fancybox-group="media-gallery" href="image-1.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><img src="thumb-1.jpg" alt="" /></a>

Am ehesten dachte ich, ich setze einfach die Attribute "openMethod", vor "openEffect : 'elastic'," ein. Das ergibt aber nur, dass das Script nicht mehr läuft.

Vielleicht kannst Du das noch mal auf das umsetzen, wie ich es jetzt habe, weil ich den Transfer von dem vorher verlinkten Beispiel zu meinem adaptierten Script (noch) nicht leisten kann.

Dank & Gruß

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

Ok, ich merke gerade etwas wichtiges… ich drücke mich wieder fürchterlich kompliziert für eine einfache Sache aus.

Ich möchte einfach nur den Part finden in dem ich bestimmen kann, wie der Übergang stattfindet.
Vielleicht geht das ja auch einfacher.

Ich möchte kein hoch, oder runter oder links oder rechts, ich möchte einfach nur dass das unscharf ein- und ausblendet. Schätze mal der Effekte hiesse Blur oder so…
Dachte ich sag es noch mal runtergebrochen auf das eigentliche Ziel.

Duddle · 13.08.2012

AW: jquery Bastelei, Photogallerie

Von der Idee musst du dich wohl verabschieden. Es gibt zwar Unschärfe-Effekte für JavaScript, aber die sind a) nicht browserübergreifend nutzbar (weil jeder irgendwo Feature-Lücken hat) und b) nicht besonders schnell. Die Unschärfe zu animieren wird wohl also mit reinem JS sehr schwierig.

Du könntest also zu Flash/Silverlight greifen (aber bist dann wieder auf diese PlugIns angewiesen) oder HTML5 und sein Canvas nutzen - aber auch das kann nicht unbedingt jeder Browser.

Ein- und Ausblenden hingegen ist kein Problem, aber das kann jede andere Lightbox genauso (und vorallendingen nutzerfreundlicher). Du hast dir eine Version rausgesucht, die einem Profi mehr Möglichkeiten gibt aber dafür weniger einsteigergeeignet ist.

Edit: jetzt hab ich mir den kompletten Thread mal genauer durchgelesen und merke dass du auf die Fancybox wahrscheinlich als Ergebnis einer Suche nach "jquery lightbox" gekommen bist. Mein Vorschlag: lass sie fallen und greif zur Go-To-Variante die als erstes erwähnt wurde, "Lightbox 2". Die ist sauber geschrieben, gut dokumentiert und macht alles was du willst.

Duddle

Triggertrix · 13.08.2012

AW: jquery Bastelei, Photogallerie

du auf die Fancybox wahrscheinlich als Ergebnis einer Suche nach "jquery lightbox" gekommen bist

Jep, gut kombiniert ;o)

Dachte das wäre eine gute Idee…

Mein Vorschlag: lass sie fallen und greif zur Go-To-Variante die als erstes erwähnt wurde, "Lightbox 2"

Hatte gerade angesetzt nach einem Tip zu bitten, welche denn besser wäre, aber so, perfekt. Dann widme ich mich dem.

Mit ein- und ausblenden meinst Du einen "Fade" Effekt? Falls ja, käme das dem was ich meine schon ziemlich nahe und würde sicher auch reichen.

Danke soweit

Triggertrix · 15.08.2012

AW: jquery Bastelei, Photogallerie

So, es geht weiter mit der nervigen Fragerei…… sorry.

Der Reihe nach, es wurde gefragt:

Was passt dir an der eigentlichen Lightbox nicht?

Nach dem letzten Austausch mit euch, hatte ich mich ja der eigentlichen Lightbox gewidmet, dabei aber bemerkt, das ich damit unzufrieden bin und mich gerne optisch etwas absetzen möchte (so ich denn kann…).
Daher komme ich zu dem Ursprünglichen Post zurück. Sprich ich bin wieder bei dem ursprünglichen Effekt gelandet (s.h. Fotos blättern

Das ganze schaffe ich aber, mit meinem bisherigen Wissen, nicht aufzuknacken. Also es geht um die Präsentation.
S. Link in meiner Signatur, ist das so schon ziemlich in Ordnung, ich hätte nur gerne für jede Galerie, wenn ich auf den Galerienamen klicke, jeweils den Fotostapel zum blättern, noch schöner wäre natürlich wenn alle Thumbnails wie jetzt da liegen und beim anklicken der Effekt startet.

Vielleicht reicht es mir aber schon wenn mir jemand sagt, was das für ein merkwürdiges (warsch. irgendein Standard den ich nicht kenne und der ganz toll ist, ich nur nicht raffe) Layout ist. Und vor allem wie ich das auflösen kann um es in Div´s zu setzen, so das ich ein Header, Footer und Navi daneben setzen kann, denn genau das schaffe ich nicht und bin (mal wieder) schier am verzweifeln.

Dank & Gruß

Duddle · 15.08.2012

AW: jquery Bastelei, Photogallerie

Wieder scheinst du dir eines der schwierigsten Beispiele für deine Anforderungen rausgesucht zu haben. Wieder ist mein erster Ansatz: schauen wir mal nach Alternativen.

Eine Suche nach "photo stack jquery" (weil das so in deinem Tutorial genannt wird) bringt mich zu mehreren Ergebnissen. Ignoriere ich dabei die auf dein verlinktes Beispiel referenzierten Einträge, sowie das nicht kostenlose PlugIn, finde ich schonmal folgendes:

Von unten beginnend:
Nummer 4 hat einen etwas anderen Effekt, aber sieht auch ganz nett aus. Auf den ersten Blick sieht es einsteigerfreundlich aus.

Nummer 3 ist auch nur verwandt, aber vielleicht genau das was du eigentlich suchst. Der Quellcode sieht recht kompliziert aus, weil er nicht in eine extra Datei ausgelagert wurde, aber das mit dem eigenen Content zu verbinden sieht einfach aus.

Nummer 2 ist der erste "echte" Photo Stack, es hat aber keine tollen Animationen (zumindest in meinem etwas alten Browser). Der Code selbst ist simpel und sollte fix an die eigenen Bilder anpassbar sein.

Nummer 1 gefällt mir auf den ersten Blick am besten. Es hat alle Features, die ich mir von einem PlugIn dieser Art wünsche, es hat nette Effekte (die in meinem Browser funktionieren) und es ist ein simples jQuery-PlugIn, dem man nur ein paar Optionen mitgeben muss und schon funktioniert es.
Edit: dieses PlugIn scheint nicht korrekt mit unterschiedlich großen Bildern umgehen zu können. Darauf habe ich keines der anderen getestet. Musst du mal schauen, was da möglich ist.

Wahrscheinlich würde ich noch mehr Tutorials und andere Implementationen finden, wenn ich auf Seite 2 der Suchergebnisse gehen - oder die Beschränkung auf jQuery ignorieren - würde. Aber die oben gezeigten reichen sicher für einen ersten Vergleich.

Schau dir alle Links an und probier die Demos aus. Falls dir eines der Beispiele gefällt, schau dir dessen HTML-Quellcode an und versuch zu verstehen was du davon ändern müsstest um es an deine Bilder anzupassen bzw. lies die Anleitung. In der Regel ist das nicht viel.

Duddle

Triggertrix · 15.08.2012

AW: jquery Bastelei, Photogallerie

Wieder scheinst du dir eines der schwierigsten Beispiele für deine Anforderungen rausgesucht zu haben.

Entweder hab ich da ein nicht nutzbares Talent oder schlicht Pech…
Die von Dir verlinkten Beispiele scheinen tatsächlich wesentlich einfacher zu sein.

Ich fang mal umgekehrt an und schliesse aus:

#4: Das wäre genau das was ich als Basis bräuchte, also alle Thumbs liegen offen da und beim Klick, rutschen dann zum Stapel zusammen.
Sprich das wäre (in der optimalen Erfüllung meiner Anforderungen) der erste Teil.

#3: Das wäre tatsächlich genau das was ich bräuchte, bis auf das Fotodesk-Feature. Ich würde das unter den Punkt werfen, wirklich schöne Spielerei, aber für den Nutzer eher verwirrend als einfach / intuitiv bedienbar, wie ich es für eine Fotoseite brauche.

#2: Das ist für mich das beste der vier, ich kann Bilder in Hoch- und Querformat darstellen, im aktuellen Safari läuft das sehr gut, im FF läufts auch, allerdings ohne Animation… nicht hübsch aber ginge.

#1: Gefällt mir von der Animation am besten, hat aber zwei gravierende Nachteile.
Zum einen werden die Bilder als Quadrate dargestellt, was gar nicht geht, wie gesagt gemischt Hoch- und Querformatige Bilder müssten da rein. Zum anderen ist da keine Dokumentation oder Hilfe zu finden. (Wobei ich mich da, so wie die Demo-Dateien aussehen, noch eher durchwurschteln könnte, als in meinem Problembeispiel.)

Das heisst aber im Resümee, #2 läuft einfach aber in (?) vielen Browsern nur ohne Animation, besser wäre #1 was aber Bilder nur quadratisch darstellt…… also Cholera oder Pest ;o)

EDIT: Ich hatte mich schon ein wenig gewundert, das Du so schnell, so gute Ergebnisse bekommst… hatte das jetzt einfach mal mit Deiner wesentlich höheren Kompetenz zu erkennen was da eher simpel & nützlich und was nicht ist. Dann habe ich jetzt selbst mal mit exakt den Angegebenen Suchwörtern gesucht und siehe da, ich finde schon mal auf den ersten beiden Seiten, nicht einen Deiner Ergebnisse (bis auf den Fototisch, bei "the 150best Sliders& Gallery Plugins"), also hasst mich einfach Google und ich bin doch nicht zu doof ;o)

Langsam reagiert meine Galle……
an akzeptablen Alternativen, habe ich die hier gefunden:
http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/

http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/

Beide sehr hübsch und würden gut zu dem wo ich hin möchte passen (zwar anders aber absolut akzeptabel), aber sind wohl beide wieder richtig fies, oder täusche ich mich?

Duddle · 15.08.2012

AW: jquery Bastelei, Photogallerie

Du scheinst immer auf Tutorials zu stoßen. Die sind in der Regel dafür gedacht, dass der Nutzer es nachvollziehen kann - ergo ist viel Code zu lesen und zu verstehen, plus werden viele Optimierungen und browserübergreifende Maßnahmen oft nicht beachtet.

Suche lieber nach fertigen PlugIns. Gerade für jQuery gibt es uuuuunglaublich viele Effekte und Spielereien, darunter etliche Gallerien und Slideshows. Du bist ja selbst schon auf diese typischen "42 Amazing jQuery Gallery PlugIns"-Listen gestoßen. Da sind zwar nicht immer alle Einträge hochaktuell, aber die sind meistens ein guter Einstiegspunkt.

Wie gesagt, konzentriere dich auf kompakte Erweiterungen. Auf den individuellen Seiten gibt es in der Regel einen Usage- oder Documentation-Link. Wenn dort nicht mehr als 5 Zeilen für die Einbindung benötigt werden (abgesehen von Optionen usw.), kannst du das als einsteigerfreundlich werten.

Zu den von mir im vorigen Beitrag verlinkten Seiten: ein paar davon habe ich mir nochmal im Chrome angesehen. Da funktioniert #1 auch mit unterschiedlich großen Bildern und Formaten, #2 hat dann auch Animationen (klar, ist ja auch ein Webkit-Browser).

Wahrscheinlich ist es nicht besonders schwer, #2 um nicht-Webkit-basierte Animationen zu erweitern. Die PlugIns sind auch schon recht alt. Vielleicht ist das dann die allerbeste Möglichkeit für deinen Fall, dann lernst du gleichzeitig noch JavaScript-Programmierung

Off-Topic:
Google bringt für google.de und google.com unterschiedliche Ergebnisse und leitet in der Regel auf deine Sprache um. Wenn du bei ersterem nach englischsprachigen Inhalten suchst, bekommst du oft einen Mischmasch aus deutschen und englischen/internationalen Seiten. Verhindern kannst du das, indem du zu www.google.com/ncr gehst. Das ncr steht für "no country redirect" und lässt dich bei google.com dessen englischsprachige Seiten finden.

Duddle

Triggertrix · 16.08.2012

AW: jquery Bastelei, Photogallerie

Ok, habe Deinen Rat befolgt und das hier versucht einzubauen… http://3.s3.envato.com/files/155280/index.html

Nach allem was ich bisher weiss, sollte ich alles richtig gemacht haben und es müsste laufen, tut es aber nicht…
Im Ordner ist alles benötigte drin und es ist entsprechend verlinkt…s.h.

Hab einfach mal eine schlampige Probeseite, als Basis um zu testen

Weiss jemand was das soll, dass das nicht läuft?

Dank & Gruss