Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Triggertrix" data-source="post: 2029186" data-attributes="member: 306764">AW: Background eine Klasse zuweisenAh…… jetzt verstehe ich das Missverständnis, Du siehst nur das was das JS am Ende rausschmeisst……Moment malAlso hier HTML (Original):[CODE]&lt;body&gt;&nbsp; &nbsp; &lt;div id=&quot;container&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;head&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;ps_overlay&quot; class=&quot;ps_overlay&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;a id=&quot;ps_close&quot; class=&quot;ps_close&quot; style=&quot;display:none;&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;div id=&quot;ps_container&quot; class=&quot;ps_container&quot; style=&quot;display:none;&quot;&gt;&nbsp; &nbsp; &lt;a id=&quot;ps_next_photo&quot; class=&quot;ps_next_photo&quot; style=&quot;display:none;&quot;&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;alle&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;kasten&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;album&quot;&gt;&nbsp; &nbsp; &lt;h3 class=&quot;unterschrift&quot;&gt;Ma Belle&lt;/h3&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;back&quot;&gt;&lt;img src=&quot;galerie1/01.jpg&quot;/&gt; &lt;/div&gt;&nbsp; &nbsp; &lt;p class=&quot;beschreibung&quot;&gt;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.&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/02.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/03.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/04.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/05.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/06.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/07.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/08.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/09.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/10.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/11.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/12.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;galerie1/13.jpg&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;[/CODE] usw. usf.Hier das JS dass das dann zum Effekt macht (und die Bilder auf Hide setzt)[CODE]&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; charset=&quot;utf-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_albums = $(&quot;#alle&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_albums.children(&quot;.kasten&quot;).find(&#039;img:not(:first)&#039;).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $ps_container = $(&#039;#ps_container&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $ps_overlay = $(&#039;#ps_overlay&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $ps_close = $(&#039;#ps_close&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&quot;.album&quot;).bind(&#039;click&#039;, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $albumb = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.find(&#039;img&#039;).remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).children(&#039;img&#039;).each(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $img = $(this).*****();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var src = $img.attr(&#039;src&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resizeCenterImage($img);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.append($img);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var r = Math.floor(Math.random() * 41) - 20;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $img.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-moz-transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-webkit-transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $img.show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.find(&#039;img&#039;).last().css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-moz-transform&#039;: &#039;rotate(0deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-webkit-transform&#039;: &#039;rotate(0deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;transform&#039;: &#039;rotate(0deg)&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_close.show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_overlay.show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.live(&#039;mouseenter&#039;, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#ps_next_photo&#039;).show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).live(&#039;mouseleave&#039;, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#ps_next_photo&#039;).hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#ps_next_photo&#039;).bind(&#039;click&#039;, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $current = $ps_container.find(&#039;img:last&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var r = Math.floor(Math.random() * 41) - 20;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var currentPositions = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginLeft: $current.css(&#039;margin-left&#039;),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; marginTop: $current.css(&#039;margin-top&#039;)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var $new_current = $current.prev();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $current.animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;marginLeft&#039;: &#039;250px&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;marginTop&#039;: &#039;-385px&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 250, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).insertBefore($ps_container.find(&#039;img:first&#039;)).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-moz-transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-webkit-transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;transform&#039;: &#039;rotate(&#039; + r + &#039;deg)&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).animate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;marginLeft&#039;: currentPositions.marginLeft,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;marginTop&#039;: currentPositions.marginTop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 250, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $new_current.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-moz-transform&#039;: &#039;rotate(0deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;-webkit-transform&#039;: &#039;rotate(0deg)&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;transform&#039;: &#039;rotate(0deg)&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#ps_close&#039;).bind(&#039;click&#039;, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_container.hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_close.hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ps_overlay.fadeOut(400);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function resizeCenterImage($image) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var theImage = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.src = $image.attr(&quot;src&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imgwidth = theImage.width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imgheight = theImage.height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var containerwidth = 700;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var containerheight = 510;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (imgwidth &gt; containerwidth) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newwidth = containerwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ratio = imgwidth / containerwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newheight = imgheight / ratio;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (newheight &gt; containerheight) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newnewheight = containerheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newratio = newheight / containerheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newnewwidth = newwidth / newratio;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.width = newnewwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.height = newnewheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.width = newwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.height = newheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if (imgheight &gt; containerheight) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newheight = containerheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ratio = imgheight / containerheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newwidth = imgwidth / ratio;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (newwidth &gt; containerwidth) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newnewwidth = containerwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newratio = newwidth / containerwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newnewheight = newheight / newratio;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.height = newnewheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.width = newnewwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.width = newwidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theImage.height = newheight;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;width&#039;: theImage.width,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;height&#039;: theImage.height,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;margin-top&#039;: -(theImage.height / 2) - 10 + &#039;px&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;margin-left&#039;: -(theImage.width / 2) - 10 + &#039;px&#039;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;[/CODE]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: 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 &amp; Gruss</blockquote>

[QUOTE="Triggertrix, post: 2029186, member: 306764"] [b]AW: Background eine Klasse zuweisen[/b] 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> 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. <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>[/CODE] 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>[/CODE] 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: 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 [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?