Slideshow

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.

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

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

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

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

Genau.

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?

von Traiceheart Do 13 Dez 2012 - 23:47

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

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

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

Danke.

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-

	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	

Slideshow

Slideshow

Re: Slideshow

Re: Slideshow

Re: Slideshow

Re: Slideshow

Re: Slideshow