Background eine Klasse zuweisen

Triggertrix · 21.08.2012

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

Code:

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

AW: Background eine Klasse zuweisen

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:

Code:

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

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

Grüße Patrick

Triggertrix · 21.08.2012

AW: Background eine Klasse zuweisen

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.

und da soll das dazu:
http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-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 · 21.08.2012

AW: Background eine Klasse zuweisen

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

pS.: spendier Deinen Bildern in der Galerie doch evt mal ein cursor

ointer, dann weiss der User auch, dass man es anklicken kann.

mindraper · 21.08.2012

AW: Background eine Klasse zuweisen

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 · 21.08.2012

AW: Background eine Klasse zuweisen

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 · 21.08.2012

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 · 22.08.2012

AW: Background eine Klasse zuweisen

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 · 22.08.2012

AW: Background eine Klasse zuweisen

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 · 22.08.2012

AW: Background eine Klasse zuweisen

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

randacek_pro · 22.08.2012

AW: Background eine Klasse zuweisen

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 · 22.08.2012

AW: Background eine Klasse zuweisen

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 , 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. 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 · 23.08.2012

AW: Background eine Klasse zuweisen

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

Code:

 $(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 · 23.08.2012

AW: Background eine Klasse zuweisen

hi.

Triggertrix schrieb:
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

HTML:

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

HTML:

<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

Code:

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

AW: Background eine Klasse zuweisen

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

mindraper · 24.08.2012

AW: Background eine Klasse zuweisen

hi

mist, zu spät geändert

siehe oben.

"javascript is a pain in the ass" – ähem, nö. javascript ist – de facto – "the wrrrrrrrrrlds most misunderstood language" und für meinen geschmack die angenehmste sprache, in der ich je code geschrieben habe. coffeescript ist für leute, die kein javascript können. php ist zu inkonsistent und zu verfloht. perl ist nicht so mein fall, python auch nicht. c/c++/objective-c zu komplex, java und actionscript zu strikt. sprachen wie brainf_uck (ohne underscore) oder ook! sehen "interessant" aus, aber debuggen ist die hölle.

naja, das ist natürlich alles mein persönliches empfinden. andere sehen das vielleicht anders. obwohl ich bei coffeescript wohl nicht vom gegenteil überzeugt werden kann.

gruß

p.s.: okay, ich bin abgeschweift. das div mit der klasse "back" kann dann natürlich raus bzw. genutzt werden anstatt dem mit der klasse "stack-illusion".

Triggertrix · 24.08.2012

AW: Background eine Klasse zuweisen

Ah…… jetzt verstehe ich das Missverständnis, Du siehst nur das was das JS am Ende rausschmeisst……

Moment mal

Also hier HTML (Original):

Code:

<body>
	<div id="container">
	<div id="head"></div>
	<div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
	<a id="ps_close" class="ps_close" style="display:none;"></a>
	<div id="ps_container" class="ps_container" style="display:none;">
	<a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a></div>
	<div id="alle">
    <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, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at. Feugait imperdiet ius an, no quis facer lucilius vis. Aliquam saperet contentiones ex pro.</p>
                <img src="galerie1/02.jpg"/>
			    <img src="galerie1/03.jpg"/>
			    <img src="galerie1/04.jpg"/>
                <img src="galerie1/05.jpg"/>
			    <img src="galerie1/06.jpg"/>
			    <img src="galerie1/07.jpg"/>
			    <img src="galerie1/08.jpg"/>
                <img src="galerie1/09.jpg"/>
                <img src="galerie1/10.jpg"/>
                <img src="galerie1/11.jpg"/>
                <img src="galerie1/12.jpg"/>
                <img src="galerie1/13.jpg"/>
		</div>
		</div>

usw. usf.

Hier das JS dass das dann zum Effekt macht (und die Bilder auf Hide setzt)

Code:

	<script type="text/javascript" language="javascript" charset="utf-8">
	    $(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 () {
			    var $albumb = $(this);

			    $ps_container.find('img').remove();
			    $(this).children('img').each(function () {
				    $img = $(this).*****();
				    var src = $img.attr('src');
				    resizeCenterImage($img);
				    $ps_container.append($img);
				    var r = Math.floor(Math.random() * 41) - 20;
				    $img.css({
					    '-moz-transform': 'rotate(' + r + 'deg)',
					    '-webkit-transform': 'rotate(' + r + 'deg)',
					    'transform': 'rotate(' + r + 'deg)'
				    });
				    $img.show();
			    });
			    $ps_container.find('img').last().css({
				    '-moz-transform': 'rotate(0deg)',
				    '-webkit-transform': 'rotate(0deg)',
				    'transform': 'rotate(0deg)'
			    });
			    $ps_container.show();
			    $ps_close.show();
			    $ps_overlay.show();
		    });
		    $ps_container.live('mouseenter', function () {
			    $('#ps_next_photo').show();
		    }).live('mouseleave', function () {
			    $('#ps_next_photo').hide();
		    });
		    $('#ps_next_photo').bind('click', function () {
			    var $current = $ps_container.find('img:last');
			    var r = Math.floor(Math.random() * 41) - 20;

			    var currentPositions = {
				    marginLeft: $current.css('margin-left'),
				    marginTop: $current.css('margin-top')
			    }
			    var $new_current = $current.prev();

			    $current.animate({
				    'marginLeft': '250px',
				    'marginTop': '-385px'
			    }, 250, function () {
				    $(this).insertBefore($ps_container.find('img:first')).css({
					    '-moz-transform': 'rotate(' + r + 'deg)',
					    '-webkit-transform': 'rotate(' + r + 'deg)',
					    'transform': 'rotate(' + r + 'deg)'
				    }).animate({
					    'marginLeft': currentPositions.marginLeft,
					    'marginTop': currentPositions.marginTop
				    }, 250, function () {
					    $new_current.css({
						    '-moz-transform': 'rotate(0deg)',
						    '-webkit-transform': 'rotate(0deg)',
						    'transform': 'rotate(0deg)'
					    });
				    });
			    });
		    });
		    $('#ps_close').bind('click', function () {
			    $ps_container.hide();
			    $ps_close.hide();
			    $ps_overlay.fadeOut(400);
		    });
	    });

	    function resizeCenterImage($image) {
		    var theImage = new Image();
		    theImage.src = $image.attr("src");
		    var imgwidth = theImage.width;
		    var imgheight = theImage.height;
		    var containerwidth = 700;
		    var containerheight = 510;

		    if (imgwidth > containerwidth) {
			    var newwidth = containerwidth;
			    var ratio = imgwidth / containerwidth;
			    var newheight = imgheight / ratio;
			    if (newheight > containerheight) {
				    var newnewheight = containerheight;
				    var newratio = newheight / containerheight;
				    var newnewwidth = newwidth / newratio;
				    theImage.width = newnewwidth;
				    theImage.height = newnewheight;
			    } else {
				    theImage.width = newwidth;
				    theImage.height = newheight;
			    }
		    } else if (imgheight > containerheight) {
			    var newheight = containerheight;
			    var ratio = imgheight / containerheight;
			    var newwidth = imgwidth / ratio;
			    if (newwidth > containerwidth) {
				    var newnewwidth = containerwidth;
				    var newratio = newwidth / containerwidth;
				    var newnewheight = newheight / newratio;
				    theImage.height = newnewheight;
				    theImage.width = newnewwidth;
			    } else {
				    theImage.width = newwidth;
				    theImage.height = newheight;
			    }
		    }
		    $image.css({
			    'width': theImage.width,
			    'height': theImage.height,
			    'margin-top': -(theImage.height / 2) - 10 + 'px',
			    'margin-left': -(theImage.width / 2) - 10 + 'px'
		    });
	    }
	    
        </script>

Der Punkt ist wir gesagt, sobald ich die anderen Bilder raus nehme, habe ich kein Fotoalbum mehr, sprich der Effekt oder besser JS kann nix mehr greifen und daraus machen, das hiesse, irgendjemand (so würde ich es mir wünschen) könnte mir sagen was ich wo ändern muss (sofern das so einfach geht) das ich die Bilder aus dem HTML rausnehmen kann, echte Thumbnails reinsetzen und die original Bilder vom JS aus einem Ordner wo die dann alle (wieder in Unterordnern Galery1-2-3- usw.) drinnen liegen.

Und zu:

für meinen geschmack die angenehmste sprache

glaube ich bestimmt, ist aber für einen Noob wie mich einfach nur eine Überforderung, da alles was man anfasst wirre Dinge macht und es sich eher nach Massaker in Babylon als elegantes und einfaches Funktionen auslösen anfühlt.
Aber vielleicht verstehe ich auch dieses Mysterium eines Tages etwas und finde einen Zugangspunkt mich auch damit ein wenig auseinander setzten zu können. Interessant und funktional ist es definitiv.

Dank & Gruss

mindraper · 24.08.2012

AW: Background eine Klasse zuweisen

hi

naja, ich kann schon auch einfach rechte maustaste --> quelltext anzeigen klicken

aber relevanter ist meiner meinung nach, was der webinspector anzeigt, nachdem alle scripte abgefeuert wurden

ansonsten wäre es ja so, als ob ein autohersteller eine testfahrt veranstalten will, ohne den motor einzubauen

dein javascript-schnipsel kann tatsächlich an sehr vielen stellen optimiert werden. das hat vor allem damit zu tun, dass es ständig das DOM hoch und runter läuft um bilder ein- und auszublenden bzw. deren css-attribute zu ändern. letzteres hat zur folge, dass der browser die seite ständig neu zeichnen muss. die animationen sind auch rein via javascript gebastelt, werden also nicht (wie z. b. css3-animationen/-transitions) von der grafikkarte, sondern ausschließlich von der cpu berechnet. diese ist aber eigentlich nicht dafür gedacht, grafikberechnungen anzustellen, sondern das betriebssystem bzw. die laufenden programme zu berechnen/verarbeiten.

ich könnte dir jetzt ein script zusammen schreiben, dass viele dieser probleme löst. allerdings ist es mir dafür jetzt schon ein wenig zu spät. sollte sich das problem bis sonntag nicht gelöst haben (sorry, bin am we nicht zuhause ergo beschäftigt), können wir über ein neues script nochmal "verhandeln" (ehrlich: einen teil von sowas hab ich schon als wirkliches plugin geschrieben mit entsprechenden css3-lösungen und dem ganzen zeug, ist aber noch nicht fertig)

ich hoffe, dass das soweit ok für dich ist.

gruß

Triggertrix · 24.08.2012

AW: Background eine Klasse zuweisen

naja, ich kann schon auch einfach rechte maustaste --> quelltext anzeigen klicken

Oh, ups, ach so ;o)

sollte sich das problem bis sonntag nicht gelöst haben, können wir über ein neues script nochmal "verhandeln"

Klar, falls sich nix getan hat wäre ich für Deine Unterstützung sehr dankbar, also auch wenn sich was tut ;o)

ich hoffe, dass das soweit ok für dich ist.

Umbedingt und absolut!

Dank & Gruss