Lexi Help
Partner
www.forumieren.com

Slideshow

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Slideshow

Beitrag von Traiceheart am 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
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther am 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
Admin a.D.
Admin a.D.

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

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Traiceheart am 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
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther am 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:

Fällt dir etwas auf?

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: Slideshow

Beitrag von Traiceheart am 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
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Slideshow

Beitrag von Günther am 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
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