Das Forum der Foren
Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.
Das Forum der Foren

Slideshow

2 verfasser

Das Forum der Foren :: Hilfe und Unterstützung (Support-Bereich) :: Das Aussehen eines Forums anpassen

Nach unten

Erledigt Slideshow

Beitrag von Traiceheart Do 13 Dez 2012 - 23:12

Hallo =)

Also ich weiß ja nicht ob ich das talent habe dinge falsch zu kopieren aber i-wie funktioniert meine Slideshow nicht.

Ich habe diesen Code als neue HTML Seite angegeben:
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,.8);
  -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://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.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)):x()}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://magicofwolves.ohmyforum.net/t93-neuer-style" title="Neuer Style?" target="_blank"><img src="http://www.abload.de/img/neuerstyle8vjhz.png" width="570" height="270"></a>
          <a href="http://magicofwolves.ohmyforum.net/" title="Spiel" target="_blank"><img src="http://www.abload.de/img/spielxxjen.png
          <a href="http://magicofwolves.ohmyforum.net/" title="Überraschung!" target="_blank"><img src="http://www.abload.de/img/berraschungj2jfe.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>

und dann diesen code in meine Startseitenbeschreibung eingefügt:
Code:
<iframe src="http://magicofwolves.ohmyforum.net/h4-slider" width="99%" height="350" frameborder="0" scrolling="no"></iframe>

dies habe ich sehr oft wiederholt (wie im tutorial gesagt)aber immer wieder tritt ein leeres feld in meine augenwinkel...

Bräuchte mal hilfe D:

Lg

EDIT!!!!!!: Ich habe ausversehen einiges mehr aus meiner startseitenbeschreibung mit rein kopiert,habe es nun rausgeschnitten.


Zuletzt von Traiceheart am Do 13 Dez 2012 - 23:47 bearbeitet; insgesamt 2-mal bearbeitet
Traiceheart
Traiceheart
Stammgast
Stammgast

Weiblich Anzahl der Beiträge : 274
Browser : Chrome
Anmeldedatum : 30.04.12

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther Do 13 Dez 2012 - 23:20

Hallo,

ich habe den Code in mein Testforum eingesetzt, wo er einwandfrei funktioniert. Wink
Der Slider in deiner HTML-Seite sieht jedoch genau so aus, wie es nach dem 1. Einsetzen des Codes leider der Fall ist, da unser System beim Erstellen einer HTML-Seite manchmal jQuery-Teile verändert und damit funktionsunfähig macht: http://magicofwolves.ohmyforum.net/h4-slider
Essenziell ist, dass du nicht jedes Mal eine neue HTML-Seite erstellst, sondern die bestehende Seite über zahnrad bearbeitest, den gesamten Code entfernst, sofort darauf den Code aus deinem obigen Beitrag ein 2. Mal einsetzt und die HTML-Seite direkt wieder absendest. Dann sollte auch jQuery richtig übernommen werden.

Als zweiter Punkt kommt noch dazu, dass der Code der Startseitennachricht fehlerhaft ist:
<iframe src="http://magicofwolves.ohmyforum.net/h4-slider" width="99%" height="350" frameborder="0" scrolling="no"></iframe>style="margin:auto;text-align:center;width:86%">
Wie bist du denn auf den rot markierten Bereich gekommen?
Dieser ist fehlerhaft und muss ebenfalls entfernt werden.

Edit: Okay, dann musst du nur den 1. Teil meines Beitrags beachten. Wink

Liebe Grüße
Günther
Günther
Günther
Administrator
Administrator

Männlich Anzahl der Beiträge : 15068
Browser : Firefox
Anmeldedatum : 16.07.08

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Traiceheart Do 13 Dez 2012 - 23:34

Günther schrieb:Wie bist du denn auf den rot markierten Bereich gekommen?
Meine Antwort wo du warhscheinlich gerade auf Absenden gedrückt hast x3:
Traiceheart schrieb:EDIT!!!!!!: Ich habe ausversehen einiges mehr aus meiner startseitenbeschreibung mit rein kopiert,habe es nun rausgeschnitten.

So ich habe nun das gemacht was du gesagt hast und mir ist ebenfals nochmal beim durchschauen ein kleiner Fehler aufgefallen:

<div class="slides_container">
<a href="http://magicofwolves.ohmyforum.net/t93-neuer-style" title="Neuer Style?" target="_blank"><img src="http://www.abload.de/img/neuerstyle8vjhz.png" width="570" height="270"></a>
<a href="http://magicofwolves.ohmyforum.net/" title="Spiel" target="_blank"><img src="http://www.abload.de/img/spielxxjen.png
<a href="http://magicofwolves.ohmyforum.net/" title="Überraschung!" target="_blank"><img src="http://www.abload.de/img/berraschungj2jfe.png" width="570" height="270"></a>
</div>

Bei mir müsste eig. stehen:
<div class="slides_container">
<a href="http://magicofwolves.ohmyforum.net/t93-neuer-style" title="Neuer Style?" target="_blank"><img src="http://www.abload.de/img/neuerstyle8vjhz.png" width="570" height="270"></a>
<a href="http://magicofwolves.ohmyforum.net/" title="Spiel" target="_blank"><img src="http://www.abload.de/img/spielxxjen.png" width="570" height="270"></a>
<a href="http://magicofwolves.ohmyforum.net/" title="Überraschung!" target="_blank"><img src="http://www.abload.de/img/berraschungj2jfe.png" width="570" height="270"></a>
</div>

Jdenfals wenn du jetzt mal in mein Forum schaust sieht man einen erheblichen fehler! Crying or Very sad Shocked

Traiceheart
Traiceheart
Stammgast
Stammgast

Weiblich Anzahl der Beiträge : 274
Browser : Chrome
Anmeldedatum : 30.04.12

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther Do 13 Dez 2012 - 23:38

Günther schrieb:Edit: Okay, dann musst du nur den 1. Teil meines Beitrags beachten. Wink
Genau. Wink

Wie gesagt hatte ich mir deinen Code nicht angesehen, sondern nur testweise eingesetzt - und er wurde problemlos ausgeführt.
Dass du den genannten Fehler gefunden hast, ist aber natürlich dennoch gut, obwohl der Code sogar trotzdem ausgeführt wurde.

Woher dein erheblicher Fehler kommt, kann ich dir auch sagen. Smile
Sieh dir doch nochmal den Screenshot aus meinem Tutorial an und vergleiche die Einstellungen:
Slideshow Tuto_s10
Fällt dir etwas auf?
Günther
Günther
Administrator
Administrator

Männlich Anzahl der Beiträge : 15068
Browser : Firefox
Anmeldedatum : 16.07.08

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Traiceheart Do 13 Dez 2012 - 23:47

Günther schrieb: (nur hast du jetzt wiederum ein Anführungszeichen zu viel eingesetzt Wink).

Ja das habe ich noch schnell weggemacht bevor du gepostet hast xD

Jedenfals: Vielen dank!!!!!!!-Jetzt ist alles so wie es sein soll! <3

Danke danke danke!

Schönen Tageswandel wünsch ich dir wenn du so lange noch wach bleibst Wink
Lg
Traice
Traiceheart
Traiceheart
Stammgast
Stammgast

Weiblich Anzahl der Beiträge : 274
Browser : Chrome
Anmeldedatum : 30.04.12

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther Do 13 Dez 2012 - 23:50

Traiceheart schrieb:Ja das habe ich noch schnell weggemacht bevor du gepostet hast xD
Das habe wiederum ich bemerkt und deshalb diese Klammer aus meinem Beitrag entfernt. So läuft das. Very Happy

Traiceheart schrieb:Jedenfals: Vielen dank!!!!!!!-Jetzt ist alles so wie es sein soll! <3
Danke danke danke!
Freut mich, dass ich dir helfen konnte. Bitteschön. Smile

Traiceheart schrieb:Schönen Tageswandel wünsch ich dir wenn du so lange noch wach bleibst Wink
Danke. Very Happy
Und damit ich dir den ebenfalls wünschen kann, ist es jetzt auch für dich eindeutig an der Zeit, schlafen zu gehen. Wink

Gute Nacht! Sleep
-done-
Günther
Günther
Administrator
Administrator

Männlich Anzahl der Beiträge : 15068
Browser : Firefox
Anmeldedatum : 16.07.08

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Gesponserte Inhalte


Gesponserte Inhalte


Nach oben Nach unten

Nach oben

- Ähnliche Themen

Das Forum der Foren :: Hilfe und Unterstützung (Support-Bereich) :: Das Aussehen eines Forums anpassen

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