Background eine Klasse zuweisen

[Triggertrix]

Hallo, ich mal wieder ;o)

also aus Gründen wird auf meiner Seite nur das erste Bild eines Albums angezeigt, so weit alles fein und gewollt.
Jetzt hätte ich aber gerne den Hintergrund jenes angezeigten Bildes bearbeitet und müsste den dafür separieren, da ja sonst auch dieses Bild versteckt würde.

Also müsste ich so etwas notieren können wie

.album img background {
background:url(blabla/back.png)
transform:rotate(5deg);

oder so……
sprich den Background extra ansprechen können um ihm Styles zuzuweisen.
Gehen tut das sicher (denke ich), ich weiss aber nicht wonach ich noch suchen soll und habe schon alle Optionen durch die mir einfallen.

Kann mir jemand nen Tip geben wonach ich da suchen muss um das zu lösen oder kann mir das jemand einfach so aus dem Stegreif erzählen?

Dank & Gruss

[patrick_l]

Entweder verstehe ich deine Frage falsch oder kann es nicht so ganz nachvollziehen. Du verpasst der Klasse einen Background und der Grafik selbst. Oder du arbeitest mit unterschiedlichen Divs und arbeitest mit dem z-index. Dürfte wenn ich dich richtig verstehe hiermit getan sein:

.album {
background:url(blabla/back.png);
transform:rotate(5deg);}

.album img {
background:url(blabla/back.png);
transform:rotate(5deg);}

Grüße Patrick

[Triggertrix]

Ja, nee… ;o)

genau das geht ja eben nicht sondern ich müsste hinten noch Background anhängen können.

Also den Background als separate Klasse definieren. Oder besser bzw. einfacher hier die URL.

http://triggertrix.com/nextgen/
und da soll das dazu:
http://designshack.net/articles/css/...tack-illusion/
Aber die Bilder (bis auf das erste) werden ja durch das JS versteckt…

Ergo ich muss einen anderen Weg finden das zu realisieren und am einfachsten scheint mir der Background…

[leveler]

also willste das so haben wie in dem 2.Link?

pS.: spendier Deinen Bildern in der Galerie doch evt mal ein cursor:pointer, dann weiss der User auch, dass man es anklicken kann.

[mindraper]

hi

pack' dein erstes bild in .kasten in ein div. sofern nicht für das (sehr hackelig funktionierende) plugin (dessen bedienelemente bei mir nicht korrekt angezeigt werden und das ganze dadurch fast unsichtbar/unbedienbar wird) benötigt, schmeiß' alle anderen bild raus. die bleiben sowieso durchgehend auf "display: none" gesetzt. dann verpasst du dem erwähnten div ein entsprechendes background-image.

[Wellenbrecher1963]

kann man hier nicht mit z-index arbeiten und so die Divs mit den Bildern alle übereinander legen und dann per JS die z-index Werte verändern und so immer nach vorn holen?

Oder kann ich immer noch nicht nachvollziehen was Du eigentlich machen willst?

Ich könnte mir vorstellen, dass es sogar JQuery Plugins gibt, die besser arbeiten als das beschriebene Plugin im Link, denn bei mir (MAC) hat er auch Probleme alles anzuzeigen.

Wenn es Dir um das Layout im zweiten Link geht (Fotostapel) da gibt es definitiv gute JQ Plugins, die alles schon mitbringen - Stapel, Rahmen, verdrehen des Bildes um ein paar Pixel

v.G. Sylvio

[Triggertrix]

also willste das so haben wie in dem 2.Link?

Jep, das ist das Ziel

dessen bedienelemente bei mir nicht korrekt angezeigt werden

Ja da hab ich irgendwas versaut, das wollte ich mir aber für später aufheben ;o)

schmeiß' alle anderen bild raus. die bleiben sowieso durchgehend auf "display: none"

Entweder ich verstehe Dich nicht oder Du nicht die Funktion der Seite…… das sollen "Fotoalben" sein, also beim klick auf ein Thumbnail, geht dann der Gallery-Effekt los……
würde ich alle Bilder raus schmeissen, hätte ich ja keinen Effekt mehr, oder meinst Du etwas das ich gerade nicht verstehe?

Dank & Gruss

Wenn es Dir um das Layout im zweiten Link geht (Fotostapel) da gibt es definitiv gute JQ Plugins, die alles schon mitbringen - Stapel, Rahmen, verdrehen des Bildes um ein paar Pixel

Ähm…… wenn so viele nachfragen müssen drücke ich mich heute Abend irgendwie ziemlich doof aus……

Also die erste angeführte Seite, IST meine Seite die ich gerade versuche aufzubauen.
Da sind im Moment in einem grossen Div, 9 kleine Kästchen, darin sind je eine Überschrift + Beschreibungstext. Dazu noch ein Thumbnail was das dahinter liegende Fotoalbum repräsentiert und durch onclick wird ein Javascript ausgelöst, das einen sog. Photostack Effekt ausführt.
Ich möchte jetzt das Thumnail so verändern das ich bereits an dieser Stelle dem Nutzer den optischen Eindruck eines Fotostapels vermittele, wie im zweiten Link gezeigt.
Das Javascript hat bis auf das erste Bild des Albums alle anderen auf "hide" gesetzt. Sprich ich müsste, so wie ich denke, mit Background arbeiten, da ja das "Bild", das ich für die Layer brauche die im Hintergrund liegen sollen, ansonsten ebenfalls versteckt würden.

Ich verstehe allerdings nicht warum der Effekt bei euch so hakelig ist.
Also ich habe null Ahnung von JS, daher hat mir da jemand den Gefallen getan und mir das Script umgeschrieben. Hat das ggf. was mit den Bildgrössen und der Übertragungsgeschwindigkeit zu tun? Müsste da noch ein Preloader rein? Oder was ist da das Problem?

Dank & Gruss

edit by simonpicos: Bitte in Zukunft den Editierbutton benutzen um Doppelposts zu vermeiden. Danke.

[randacek_pro]

Kurz gesagt, du willst einen verkleinerten Fotostapel schon in der Thumbnail-Ansicht?
Über den Background geht das nicht, bzw. das hat damit nichts zu tun.
Du hast also die Wahl, entweder ein "Icon" zu erstellen, also ein Thumbnail in Form deines Bildstapels als Vorschau auf den Photostack, der bei Klick gestartet wird, oder du bastelst aus den vorhandenen Bildern auch einen Stapel (dynamisch mit JS, oder fest nur mit CSS).
Ich fände jetzt die Variante, ein kleines Vorschaubild in Form eines Bilderstapels zu erstellen, fast am Geeignetsten.
Aber du kannst dir das natürlich auch mit CSS erstellen.
Dazu könntest du dir kleine Thumbnails der Bilder erstellen (in einem Ordner ablegen, oder mit Suffix "_tn" versehen, als Beispiel), oder du verkleinerst die Bilder dafür per CSS auf einen festen Wert... was natürlich Nachteile hat...
Ich gebe zu, mir ist es jetzt etwas zu spät, um am JS und CSS-Code rum zu basteln - vielleicht hole ich das nach dem Sonnenaufgang nach
Aber evtl. können wir so schon mal klären, ob es das ist, was du suchst?

Viele Grüße

[Triggertrix]

Kurz gesagt, du willst einen verkleinerten Fotostapel schon in der Thumbnail-Ansicht?

Yes Sir! ;o) Das ist es genau was ich versucht habe mit vielen Worten zu erklären.

Dazu könntest du dir kleine Thumbnails der Bilder erstellen (in einem Ordner ablegen, oder mit Suffix "_tn" versehen

Das verstehe ich nicht… Was ist _tn für ein Format?

Also im Moment ist es ja so, das ich die "echten" Bilder einfach in verkleinerten Ansichten darstelle.

Prinzipiell wären mir beide Optionen gleich recht, ich habe nur zwei Einschränkungen. Zum einen möchte ich über die Seite maximale Kontrolle behalten wollen um eben auch selbst Ausnahmen und Änderungen bebasteln zu können. (s. z.B. der letzte Kasten "About") Zum anderen erscheint mir die Seite im Moment beim Aufruf schon sehr träge und lahm, das möchte ich nicht noch verschlimmre (oder besser das würde ich gerne verbessern wollen hab aber keine Ahnung wo ich da ansetzen muss).

Von meinem Verständnis her, würde ich doch mit zusätzlichen Thumbs noch mehr reinladen müssen, oder? Also würde das die Seite nicht noch mehr bremsen? Wie gesagt ich habe da nur ein rudimentäres Verständnis…

Gruss & Dank

[TECFreddy]

Ich denke _tn ist kein Format sondern einfach zur Unterscheidung der Thumbnails und der normalen Bilder.

[randacek_pro]

Hallo,

ja, das "_tn" sollte wirklich nur als Unterscheidung zu den Galeriebildern dienen, die groß angezeigt werden - wenn man sie also nicht klein skaliert, sondern neue, kleine thumbnails anlegt.

Dass deine Seite so "träge" ist, hängt auch damit zusammen, dass du gleich am Anfang schon alle Bilder reinlädst, also die kompletten Alben inklusive aller Bilder, denn wie du ja selbst schreibst, sind die Bilder in der Vorschau nur per CSS klein skaliert worden.
Wenn man mal Javascript ausschaltet und deine Seite lädt, sieht man das sehr genau; die einzelnen Alben werden je in einer Spalte untereinander mit allen Bildern dargestellt - erst das JS verändert das Layout und versteckt die Bilder des Stapels, so dass nur ein oben liegendes als Vorschau bleibt.
Und das ist halt ein Problem - die Bilder sind in voller Größe (KB) schon geladen und daher bremst es anfangs etwas aus. Deswegen meinte ich auch, u.A, dass das mit dem Skalieren in CSS Nachteile hat, da deine Bilder ja nur in der Darstellung verkleinert werden, Dateigrößen-mäßig aber gleich groß bleiben.

Außerdem arbeitet das JS-Script, was du für den Galerie-Stapel verwendest, auch nicht ganz ressourcenschonend Daher bremst es dann noch mal.

Von daher unbedingt den Tipp von mindraper beachten! Eigentlich kannst du so auf alle anderen Bilder, außer dem "Deckblatt" verzichten, also verzichten darauf, sie gleich beim Aufruf der Seite zu laden.
Dann geht die Seite schneller auf. Gut wäre es, wenn du die Bilder erst aufrufst, wenn sie, bzw. das Album, auch wirklich dran sind/ist.
Dazu müsstest du dann aber ein anderes JS-Script verwenden, oder auf ein jQuery-Plugin setzen. Für solche Photostacks gibts da ja bestimmt was Passendes.
Was auch geht, wäre einen Bilderstapel zu bauen, der nur aus Thumbnails besteht (die etwas größer sind, so dass man das Bild dann schon jeweils "erkennen" kann).
Dieser Bilderstapel wird navigierbar gemacht und animiert, ähnlich dem, was dein Script jetzt macht, aber ohne Overlay. Und wenn du dann auf das jeweils aktuell oben liegende Bild klickst, geht eine Großansicht (zb. in Lightbox, einem jQuery-Plugin) auf, wodurch die volle Größe erst beim wirklichen Abruf geladen wird und du keine AJAX-Funktion benötigst, obwohl AJAX schon auch ne sehr gute Variante hier wäre, um die Ladezeit zu verkürzen.
Ich habe mal, ist bestimmt schon 2 Jahre her, so einen Fotostapel gemacht, der nur kleine Vorschaubildchen enthielt, die man aber animiert durchblättern konnte und eben nur bei Klick auf's Bild kam die Großansicht.
Ich muss mich da erst mal durch mein Archiv "fräsen" denn wie gesagt, ist bestimmt 2 Jahre her, da muss ich erst suchen.
Aber soweit ich meine Bookmarks noch erinnere ging es in diese Richtung, mit ein paar Änderungen.
Vielleicht sind aber AJAX-Aufrufe insgesamt noch flexibler...
Mein Vorschlag ist nur einer unter vielen Möglichkeiten.

Lieber Gruß

[Triggertrix]

Ich habe mal, ist bestimmt schon 2 Jahre her, so einen Fotostapel gemacht, der nur kleine Vorschaubildchen enthielt, die man aber animiert durchblättern konnte und eben nur bei Klick auf's Bild kam die Großansicht.

Hm…… es war ein weiter Weg bis hierher, aber das war genau das was ich eigentlich von Anfang an wollte.
Hier der ursprüngliche Thread, der mich bis hierher gebracht hat.

Wenn wir soweit zurück gehen, erzähle ich vielleicht noch mal
Meine Seite so wie sie im Moment ist s.h. http://triggertrix.com finde ich prinzipiell schon ganz gut. Allerdings hätte ich gerne bei Klick auf die Thumbnails, das dann der o.g. Stack-Effekt los geht.
Sprich es könnte ganz gut sein das wir ähnliches meinen…
Was eben unabdingbar ist, das die Fotos recht gross gezeigt werden also so etwas wie 80% des Bildschirms des Betrachters (20% damit man noch was vom Effekt sieht ;o) )

So wie ich Dich im Moment verstehe, scheinst Du das was ich eigentlich gerne hätte schon mal gebaut zu haben, wenn Du mir das zur Verfügung stellen und mir erklären könntest wie ich das für mich anpassen kann, wäre ich Dir überaus dankbar.

EDIT:

Von daher unbedingt den Tipp von mindraper beachten! Eigentlich kannst du so auf alle anderen Bilder, außer dem "Deckblatt" verzichten, also verzichten darauf, sie gleich beim Aufruf der Seite zu laden.

Ich habe jetzt mal testweise das was Mindraper vorgeschlagen hat (soweit ich das verstehen konnte) umgesetzt, Ergebnis, keines…… ich habe ein Extra Div um das erste Bild gelegt und da als einziges Attribut den Background angelegt mit einem Testbilchen…… sehe ich aber nix von auf der Seite…… den Javascript Code habe ich versucht zu verändern, weil das onclick Element muss ja sein, hab versucht das auf Kasten zu verändern, dann komen aber keine Bilder mehr oh Mann…… ich bekomme gerade echt mal gar nichts hin… ;o(

Dank & Gruss

[Triggertrix]

Ich weiß das gibt schon wieder ein Doppelpost und für die Frage bin ich wohl auch im falschen Thread.
Aber:

 $(document).ready(function () {
		    $ps_albums = $("#alle");
		    $ps_albums.children(".kasten").find('img:not(:first)').hide();

		    var $ps_container = $('#ps_container');
		    var $ps_overlay = $('#ps_overlay');
		    var $ps_close = $('#ps_close');
		    $(".album").bind('click', function () {

hier muss sich (so denke ich) alles abspielen.
Kann mir den jemand sagen, wo ich was änedrn muss, das der Kasten auf onclick den Effekt auslöst und ich die Bilder alle, bis auf die Thumbnails, die ich dann in einem extra Div da rein mogle (mit Backgroun img), verstecken kann?
Ich habe jetzt wirklich alle Div mal im JS ein- und ausgetragen und da kommt immer nur Käse raus.
Alle die in diesem Thread geantwortet haben, scheinen doch zu wissen wie ich das lösen kann, wenn mir das jemand normal verständlich kurz sagt, wäre ich sicher Lichtjahre weiter…

Dank & Gruss

[mindraper]

hi.

Zitat von Triggertrix

Entweder ich verstehe Dich nicht oder Du nicht die Funktion der Seite…… das sollen "Fotoalben" sein, also beim klick auf ein Thumbnail, geht dann der Gallery-Effekt los……
würde ich alle Bilder raus schmeissen, hätte ich ja keinen Effekt mehr, oder meinst Du etwas das ich gerade nicht verstehe?

mir ist klar, dass es sich um fotoalben handeln soll. in deiner "thumbnail"-ansicht sind aber jede menge bilder, die dort für mein verständnis nicht benötigt werden (außer evtl. für das plugin, dass den foto-stack erzeugt und anzeigt. falls dem so ist, ist es ein ziemlich schlechtes plugin). diese sind alle auf "display:none" gesetzt. daran ändert sich auch nie etwas, sprich: wird der stack aufgerufen (deine gallerie/fotostapel), bleiben die bilder innerhalb der "thumbnails" (entschuldigung wg. der anführungszeichen, thumbnails waren für mich bis dato immer recht klein ) auf "display:none", werden also niemals angezeigt.

mein vorschlag war eigentlich simpel: innerhalb der div-container, die die angesprochenen vorschaubilder enthalten, setzt du um das erste vorschaubild einen weiteren div-container. in diesen kannst du dann via "background-image: url()" ein hintergrundbild setzen, dass es so ausschauen lässt, als würde auch das vorschaubild ganz oben auf einem fotostapel liegen – was genau der effekt ist, den du erzielen wolltest. und das, ohne großartig an irgendwelchen javascript-plugins zu basteln oder übermäßig viel arbeit in diesen eigentlich simplen effekt stecken zu müssen. wieso randacek_pro behauptet, dass das nicht möglich wäre ist mir ein rätsel. letzten endes wird der stack ja erst durch das plugin zusammengesetzt und in das DOM eingebaut – mit den vorschaubildern solltest du demnach machen können was immer du willst.

der vorschlag, bilder zu entfernen, bezog sich auf die vielen nicht (und niemals) sichtbaren bilder, die innerhalb deiner div-container mit der klasse "kasten" sitzen und auf "display:none" gesetzt sind. zur verdeutlichung:

momentaner quelltext im livebetrieb

<div class="kasten">
	<div class="album">
		<h3 class="unterschrift">Ma Belle</h3>   
		<div class="back">
			<img src="galerie1/01.jpg"/>
		</div>
		<p class="beschreibung">Lorem ipsum ad qui amet dolore...</p>
	   	<img src="galerie1/02.jpg" style="display: none;" />
		<img src="galerie1/03.jpg" style="display: none;" />
		<img src="galerie1/04.jpg" style="display: none;" />
	    <img src="galerie1/05.jpg" style="display: none;" />
		<img src="galerie1/06.jpg" style="display: none;" />
		<img src="galerie1/07.jpg" style="display: none;" />
		<img src="galerie1/08.jpg" style="display: none;" />
	    <img src="galerie1/09.jpg" style="display: none;" />
	    <img src="galerie1/10.jpg" style="display: none;" />
	    <img src="galerie1/11.jpg" style="display: none;" />
	    <img src="galerie1/12.jpg" style="display: none;" />
	    <img src="galerie1/13.jpg" style="display: none;" />
	</div>
</div>

quelltext nach meinem vorschlag [auszug]

<div class="kasten">
	<div class="album">
		<h3 class="unterschrift">Ma Belle</h3>   
		<div class="back"> <!-- Wozu? Hat im Live-Betrieb eine Höhe von 0px und mach (scheinbar zumindest) nichts. -->
			<div class="stack-illusion"> <!-- Darauf das Background-Image -->
				<img src="galerie1/01.jpg"/>
			</div><!-- /end stack-illusion -->
		</div>
		<p class="beschreibung">Lorem ipsum ad qui amet dolore...</p>
	</div>
</div>

dann noch eine ergänzung im css

.stack-illusion {
	padding: 10px;
	background-color: transparent;
	background-image: url(PFAD/ZUM/HINTERGRUNDBILD);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

un ferdisch is die laube

gruß

EDIT: noch eine sache. der <div>-container mit der klasse "back" hat deshalb eine höhe von 0px, weil das darin liegende <img>-element gefloatet ist. wieso floatest du nicht den <div>-container? ODER du gibst ihm im css ein "overflow:hidden" mit, dann darfst du aber keine höhen und breiten angaben setzen, die kleiner als das bild bzw. zu klein wären.

[Triggertrix]

außer evtl. für das plugin, dass den foto-stack erzeugt und anzeigt)

ausschliesslich dafür ;o)

innerhalb der div-container, die die angesprochenen vorschaubilder enthalten, setzt du um das erste vorschaubild einen weiteren div-container. in diesen kannst du dann via "background-image: url()" ein hintergrundbild setzen, dass es so ausschauen lässt, als würde auch das vorschaubild ganz oben auf einem fotostapel liegen – was genau der effekt ist, den du erzielen wolltest.

Exacto Mundo !
Und genau das (nachdem ich Deinen Post fünf mal gelesen habe um zu verstehen ob Du tatsächlich das tatsächlich meins) hatte ich schon mehrfach versucht.

Wie gesagt schriftliches Webdesign ist ziemlich neu für mich, ich hatte das was Du mir empfohlen hast, schon vorher versucht, ohne Erfolg. Also noch mal gemacht und gaaaaaanz genau geschaut das ich das auch so mache.
Ergebnis, same Game…… ;o(

Von HTML & CSS hab ich wirklich nur rudimetär Ahnung, aber Javascript "is just Pain in the Ass", daher rate ich mal was das tut und gehe davon aus, das alle (bis auf das erste) Bild versteckt werden (ebenfalls dann das Background img)…… Das zu umgehen um genau jenen benannten Effekt zu haben, also verstecke alle bis auf das erste und die Thumbnails, oder noch besser extra Thumbnails machen und da die Hintergrundbilder dazu, ist gerade mein Ziel. Oh und wo ihr alle sagtet dass das Script mies läuft, würde ich auch noch schauen wollen wie ich das beseitigen kann…

P.S. Wenn Du nomma auf´Seiten schaun magst, da ist das jetzt so notiert wie besprochen. Der Container heisst "back".


Dank & Gruss