Lexi Help
Partner
www.forumieren.com

[phpBB2] Slideshow nicht richtig angezeigt

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Slideshow nicht richtig angezeigt

Beitrag von Rush_Hour am 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://illiweb.com/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://illiweb.com/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

Rush_Hour
Neuling
Neuling

Weiblich Beiträge : 21
Anmeldedatum : 06.04.11

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Slideshow nicht richtig angezeigt

Beitrag von Günther am 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="http://illiweb.com/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="http://illiweb.com/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

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Slideshow nicht richtig angezeigt

Beitrag von Rush_Hour am 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

Rush_Hour
Neuling
Neuling

Weiblich Beiträge : 21
Anmeldedatum : 06.04.11

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Slideshow nicht richtig angezeigt

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

Bitte. Smile

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-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten