[phpBB2] Slideshow nicht richtig angezeigt

von Rush_Hour So 4 Aug 2013 - 19:37

Hallo, ich bins mal wieder.

Ich probiere gerade ein bisschen in meinem Probeforum herum: http://probe-dustcity.forumieren.com/
Nachdem die Sache mit den Tabs jetzt funktioniert hat wollte ich mich mal an der Slideshow versuchen. Ich habe mich nach dem (sehr hilfreichen) Tutorial (für das ich sehr dankbar war) durch alles durch gehangelt, zwei Testbilder eingesetzt und den vorgegebenen Code in die Nachricht eingefügt.

Der sieht so aus:

Code:: <iframe src="http://probe-dustcity.forumieren.com/h2-slideshow" width="99%" height="350" frameborder="0" scrolling="no"></iframe>

Der fertige Code in meiner html-Seite sieht so aus:

Code:: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <style type="text/css"> /* Resets defualt browser settings reset.css */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } a:active { outline:none; } body { line-height:1; color:black; background:white; } ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption,th,td { text-align:left; font-weight:normal; } blockquote:before,blockquote:after,q:before,q:after { content:""; } blockquote,q { quotes:"" ""; } /* Page style */ body { background-color: transparent; font:normal 62.5%/1.5 Helvetica, Arial, sans-serif; letter-spacing:0; color:#434343; top center; position:relative; text-shadow:0 1px 0 rgba(255,255,255,.<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />; -webkit-font-smoothing: subpixel-antialiased; } #container { width:580px; padding:10px; margin:0 auto; position:relative; z-index:0; } #example { width:600px; height:350px; position:relative; } #frame { position:absolute; z-index:0; width:739px; height:341px; top:-3px; left:-80px; } /* Slideshow */ #slides { position:absolute; top:15px; left:4px; z-index:100; } /* Slides container Important: Set the width of your slides container Set to display none, prevents content flash */ .slides_container { width:570px; overflow:hidden; position:relative; display:none; } /* Each slide Important: Set the width of your slides If height not specified height will be set by the slide content Set to display block */ .slides_container a { width:570px; height:270px; display:block; } .slides_container a img { display:block; } /* Next/prev buttons */ #slides .next,#slides .prev { position:absolute; top:107px; left:-39px; width:24px; height:43px; display:block; z-index:101; } #slides .next { left:585px; } /* Pagination */ .pagination { margin:26px auto 0; width:100px; } .pagination li { float:left; margin:0 1px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url("http://i43.servimg.com/u/f43/17/63/75/60/pagina10.png"); background-position:0 0; float:left; overflow:hidden; } .pagination li.current a { background-position:0 -12px; } /* Footer */ #footer { text-align:center; width:580px; margin-top:9px; padding:4.5px 0 18px; border-top:1px solid #dfdfdf; } #footer p { margin:4.5px 0; font-size:1.0em; } /* Anchors */ a:link,a:visited { color:#599100; text-decoration:none; } a:hover,a:active { color:#599100; text-decoration:underline; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script type="text/javascript"> (function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block"}),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0}),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u))<img src="http://2img.net/i/fa/i/smiles/icon_mad.gif" alt="Mad" longdesc="8" />()}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.container,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slidesLoaded()})})}else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.children().css({cursor:"pointer"}),d.children().click(function(){return w("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function(){y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a("."+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function(){return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(function(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){var f=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery) </script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'http://i43.servimg.com/u/f43/17/63/75/60/loadin10.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script> </head> <body> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <a href="http://img3.fotos-hochladen.net/uploads/slideshow1ixs104z6bp.png" title="Zebras" target="_blank"><img src="http://img3.fotos-hochladen.net/uploads/slideshow1ixs104z6bp.png" width="570" height="270"></a> <a href="http://img3.fotos-hochladen.net/uploads/slideshow2c4zar15y6n.png" title="Straße" target="_blank"><img src="http://img3.fotos-hochladen.net/uploads/slideshow2c4zar15y6n.png" width="570" height="270"></a> </div> <a href="#" class="prev"><img src="http://i43.servimg.com/u/f43/17/63/75/60/arrow-10.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://i43.servimg.com/u/f43/17/63/75/60/arrow-11.png" width="24" height="43" alt="Arrow Next"></a> </div> <img src="http://i43.servimg.com/u/f43/17/63/75/60/exampl10.png" width="739" height="341" alt="Example Frame" id="frame"> </div> </div> </body> </html>

Allerdings kommt nur dieses Ergebnis hier zustande:

Screenshot:

Ich habe auch schon versucht den Kram in einem eigenen Modul in einem Portal einzufügen, hatte aber genau das selbe Ergebnis. Auch den Code habe ich schon mehrmals abgespeichert, abgeschickt und nochmal kontrolliert. Ich weiß nicht woran die falsche Umsetzung liegt.
Falls sich kurz jemand Zeit nehmen würde wäre ich wirklich sehr dankbar. Ansonsten bin ich auch geduldig =)

Vielen Dank schonmal,
lg

Edit 05.08.13: So, ich habe jetzt schon mehrere Slideshowvarianten aus mehreren Quellen, unter anderem selfhtml ausprobiert. Auch mit einem ganz simplen Überblendungseffekt kommt die Show nicht zustande. Ich bin langsam mit meiner Philosophie am Ende. Wahrscheinlich ist es nur eine ganz simple Einstellung, die nicht mit dem Code übereinstimmt.
Ich würde mich wirklich sehr über Hilfe freuen. Liebe Grüße

von Günther Fr 9 Aug 2013 - 3:15

Hallo,

das Problem kommt daher, dass du den Code offensichtlich im Beitragseditor bearbeitet hast, mit dem man in Forumieren-Foren Beiträge postet.
HTML-Codes darfst du aber nicht in einem Beitragseditor bearbeiten, sondern ausschließlich in richtigen Codeeditoren/HTML-Editoren.
Empfehlen kann ich dir dazu entweder den Standard-"Editor" von Windows oder die Freeware PSPad:
http://www.chip.de/downloads/PSPad_22393723.html

Du hast den HTML-Code allerdings im Beitragseditor bearbeitet und dann abgesendet bzw. in die Vorschau gebracht. Anschließend hast du den Code kopiert und in die HTML-Seite eingesetzt. Dadurch ist Folgendes passiert: Der Editor hat zwei Codestellen, die zufälligerweise Smileycodes in Forumieren-Foren darstellen, durch den entsprechenden HTML-Code für die Smileys ersetzt. Deshalb befinden sich im Code, den du kopiert hast, zwei fehlerhafte Stellen.

Einmal wurde

Code:: 8)

ersetzt:

body {
background-color: transparent;
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
top center;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-webkit-font-smoothing: subpixel-antialiased;
}

zu:

body {
background-color: transparent;
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
top center;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;
-webkit-font-smoothing: subpixel-antialiased;
}

Und einmal wurde

Code:: :x

ersetzt:

{b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x()}

zu:

{b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeout(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u))<img src="https://2img.net/i/fa/i/smiles/icon_mad.gif" alt="Mad" longdesc="8" />()}

Wenn du diese beiden Stellen in deinem Code suchst und mit dem Originalcode aus dem Tuto vergleichst, siehst du das selbst.

Die Lösung ist also: Bearbeite den Code aus dem Tutorial in einem richtigen Editor (und nicht im Beitragseditor) und er wird seine Wirkung zeigen.

Liebe Grüße
Günther

von Rush_Hour Fr 9 Aug 2013 - 12:17

Tausend Dank! Das macht alles Sinn. Ich hätte dran denken sollen. Dabei arbeite ich schon mit Webpcton Scriptly. Ich werde so schnell wie möglich den Code neu bearbeiten und ausprobieren. Sollte ich noch Probleme haben melde ich mich.

Nochmal vielen Dank!
Liebe Grüße

von Günther Fr 9 Aug 2013 - 18:53

Bitte.

Da du dich nicht mehr gemeldet hast, gehe ich davon aus, dass es keine Probleme mehr gibt und ich hier schließen kann. Sollten wider Erwarten dennoch Probleme auftreten, gehe bitte so vor, wie es in der roten Hinweisbox unter dem Thread erklärt wird (letzter Absatz).
-closed-

	Neue Beiträge seit dem letzten Besuch.	
	Textbausteine des MODERATIONSTOOL	
	AB > PFAD > GENERATOR	
	FORUM > PFAD > GENERATOR	
	Unterstützung Lösungs-Probleme	
	Auffällige User	
	Der Runde Tisch	
	HÄUFIG GESTELLTE FRAGEN	

[phpBB2] Slideshow nicht richtig angezeigt

[phpBB2] Slideshow nicht richtig angezeigt

Re: [phpBB2] Slideshow nicht richtig angezeigt

Re: [phpBB2] Slideshow nicht richtig angezeigt

Re: [phpBB2] Slideshow nicht richtig angezeigt