PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

mindraper · 24.08.2012, 00:57

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, 01:09

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:

Zitat:

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, 01:51

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, 11:18

Zitat:

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

Oh, ups, ach so ;o)

Zitat:

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)

Zitat:

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

Umbedingt und absolut!

Dank & Gruss

24.08.2012, 00:57	#16
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	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". __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

24.08.2012, 01:51	#18
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	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ß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Soll ich eine Klasse je Nachrichtenmodul, Benutzermodul, etc.. schreiben?	ap1	PHP und andere Scriptsprachen	5	08.01.2010 22:48
Button eine Aktion zuweisen	Lonka	Flash - ActionScript	38	02.07.2009 14:45
Pfad eine Kontur zuweisen	Gronsen	Photoshop	3	04.06.2009 19:43
Über Javascript einem Objekt eine Klasse zuweisen	NickS	PHP und andere Scriptsprachen	1	15.07.2008 22:08

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige