Slider ins Forum/Portal einbauen

von Bix08 Do 6 Sep 2012 - 19:30

Hey ho, jaaa ich schon wieder Smile

Ich hab heute schon erfragt, dass es möglich ist einen Slider ins Forum einzubeziehen.
Gleich darauf hab ich mich natürlich auf die Suche gemacht
und versucht es selbst zu versuchen...

Nach dem Durchlesen von versch. Tut´s stecke ich jedes mal beim gleichen Teil,
der entweder nicht möglich ist oder ich bin einfach zu blöd um diesen richtig zu verstehen -.-

Ich darf hier einfach mal den Teil zitieren:

Einbau in den ||Template||-Ordner

Zuerst das entsprechende ||Zip||-File downloaden und lokal entpacken. Dann wird der Ordner "easyslider" in den Templateordner integriert. Das kann auf unterschiedliche Weise geschehen. Entweder man lädt den Ordner mit einem entsprechenden ||FTP-Server|| in das entsprechende Template-Verzeichnis (wenn die eingestellten Rechte und Eigentümer es erlauben), man lädt die Datei mit dem ||Addon File Editor|| (AFE) in sein Template oder man schiebt den Ordner lokal in sein Template, ||zip||pt das Template und lädt es dann über das WebsiteBaker Backend hoch.

Funktioniert das überaupt? Ich habe die dazu benötigte Möglichkeit nicht gefunden oder falsch verstanden..

Ich hoffe es kann mir hier jemand weiterhelfen..
Sry wenn ich immer so nervige sachen frage -.-

Danke schon mal und schönen Abend noch
Mfg Bix08

von Günther Do 6 Sep 2012 - 19:37

Hallo Bix08,

dann melde ich mich doch nochmal dazu. Wink

Offenbar hast du einen Slider gefunden, der auf eine Ordnerstruktur aufgebaut ist. Solche Codes sind nur geeignet, wenn eigener Webspace verwendet wird. Stattdessen solltest du einen Slider verwenden, dessen Codes einfacher eingesetzt werden können. Eine Möglichkeit habe ich dir im anderen Thread bereits genannt, eine andere wäre, den gesamten Code in eine HTML-Seite einzusetzen und diese als iFrame im Forum einzubinden.

Warte bitte mal einen Moment, dann suche ich kurz nach geeigneten Slidercodes. Wink

Liebe Grüße
Günther

von Bix08 Do 6 Sep 2012 - 19:41

Ich sags ja nicht umsonst: Slider ins Forum/Portal einbauen Held01

von Günther Do 6 Sep 2012 - 20:39

Aber gerne doch. Very Happy

Es war tatsächlich nicht ganz leicht, einen passenden Slider zu finden, der hohe Ansprüche erfüllt und zudem relativ einfach in ein Forumieren-Forum eingesetzt werden kann. Ich habe jetzt einen sehr schönen Slider gefunden: http://slidesjs.com/examples/standard/
Er hat mich überzeugt, weil er von selbst die Bilder wechselt, das aber auch manuell über Pfeilbuttons geschehen kann und sich unter den Bildern eine Statusleiste befindet, an welcher Position sich das gerade angezeigte Bild innerhalb des Sliders befindet. Von allen Modellen, die ich mir angesehen habe, hat mich dieses am meisten überzeugt.

Der Code ist zur freien Verwendung freigegeben. Ich musste ihn allerdings noch etwas anpassen, damit er für unsere Zwecke geeignet ist. Bei der Umsetzung habe ich mich dafür entschieden, den gesamten Code als HTML-Seite abzuspeichern und dann als iFrame in z.B. die Startseitennachricht einzubinden.

Der Code der HTML-Seite ist folgender:

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; } #ribbon { position:absolute; top:-3px; left:-15px; z-index:500; } #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://slidesjs.com/examples/standard/img/pagination.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: 'img/loading.gif', play: 5000, pause: 2500, hoverPause: true }); }); </script> </head> <body> <div id="container"> <div id="example"> <img src="http://slidesjs.com/examples/standard/img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon"> <div id="slides"> <div class="slides_container"> <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a> <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a> <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a> <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a> <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a> <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a> <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a> </div> <a href="#" class="prev"><img src="http://slidesjs.com/examples/standard/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://slidesjs.com/examples/standard/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div> <img src="http://slidesjs.com/examples/standard/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div> </div> </body> </html>

Du musst natürlich einige Kenntnisse mitbringen, um den Code zu personalisieren, aber das dürfte bei dir der Fall sein. Am einfachsten wird es sein, den Code so zu belassen und nur die Bildurls gegen eigene auszutauschen. Das kannst du am Ende des Code in diesem Bereich machen:

Code:: <div class="slides_container">

Möchtest du auch Text hinzufügen, ist es am unkompliziertesten, diesen mithilfe eines Grafikprogramms einfach in die Bilder zu integrieren.

Anschließend kannst du den Slider mithilfe eines iFrames in deine Startseitennachricht einsetzen:

Code:: <iframe src="HTML-URL" width="90%" height="350" style="border: none; overflow: hidden;"></iframe>

Ich hoffe, du bist damit so zufrieden wie ich. Smile

von Bix08 Do 6 Sep 2012 - 20:47

WOW !!!!

Ich danke dir von ganzem Herzen!!

Ich werd mir das mal in Ruhe anschaun, bitte dich jedoch den Thread noch ein wenig offen zu lassen, falls es doch Schwierigkeiten gibt...

Ich meld mich spätestens morgen wieder und geb bescheid ob ich mich auskenne und es hinhaut oder ob ich´s doch nicht ganz hinbekomme!

Ich sage auf alle Fälle DANKE, DANKE, DANKE für deine Mühe und Hilfe!
Und wünsch dir, falls wir uns heute nicht mehr hören sollten einen schönen Abend Wink

von Günther Do 6 Sep 2012 - 20:50

Freut mich, dass ich dir damit weiterhelfen konnte. Gerne. Smile

Alles klar, du meldest dich einfach wieder, ob es dir gelungen ist oder es noch Probleme gibt. Wink

Dir auch noch einen angenehmen Abend.

von Bix08 Fr 7 Sep 2012 - 9:02

Einen wunderschönen guten Morgen wünsche ich Wink

Hab mich doch erst heute damit befasst, war gestern dann zu müde..
Ich hab jetzt eigentlich alles laut Anleitung gemacht.. HTML Seite hinzugefügt mit dem Code, persönliches Modul erstellt fürs Portal und als iframe eingebunden..

An und für sich seh ich den Rahmen und das grüne "New" band an der linken, oberen Ecke, aber die Bilder nicht.

Ich muss auch dazu sagen, dass ich noch keine eigenen Bilder eingefügt hab, mit der Begründung, dass diese erst ertsellt werden müssen.. Daran kanns aber im Normalfall auch nicht liegen..

Weißt du woran es liegen kann?

EDIT: Ich hab keine Ahnung was ich jetzt anders gemacht hab, aber es haut hin ^^
Ich muss zwar noch ein wenig mit der Breite herumspielen, da man jetzt die Pfeile links und rechts nicht sieht, aber da es eh automatisch weiter geht, ist es eine Überlegung wert es vielleicht so zu lassen.. mal schaun..

Ich danke dir noch einmal von ganzen Herzen Wink

von Günther Fr 7 Sep 2012 - 10:01

Soweit ich es sehen kann, hat alles perfekt geklappt:

Slider ins Forum/Portal einbauen 07_0910

Das Problem mit der Bilderbreite verstehe ich nicht ganz. Wenn ich z.B. an Position 1 ein eigenes Bild einsetze:

Code:: <div class="slides_container"> <a href="FORENURL" title="BILD1" target="_blank"><img src="BILDURL" width="570" height="270" alt="Slide 1"></a>

Dann siehst du, dass die Größenverhältnisse bereits im Bildelement definiert sind, damit das Bild so skaliert wird, dass es genau in den Sliderinnenraum passt. Wenn du daran nichts veränderst, wird auch nichts überdeckt. Wink

Ich habe z.B. einen wesentlich größeren Screenshot eingefügt und das klappt einwandfrei:

Slider ins Forum/Portal einbauen 07_09110

Freut mich, dass ich dir helfen konnte. Das habe ich gern gemacht. Smile

-done-

von Bix08 Fr 7 Sep 2012 - 10:03

Ich meinte nicht die Breite des eingefügten Bildes,
sondern vom ganzen Slider..
Hab ich aber schon hinbekommen Wink

von Günther Fr 7 Sep 2012 - 10:05

Okay, alles klar. Wenn ich mir jetzt in deinem Forum das Ergebnis ansehe, ist alles bestens. top

Dann wünsche ich dir noch einen schönen Tag. Smile

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

Slider ins Forum/Portal einbauen

Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen

Re: Slider ins Forum/Portal einbauen