Hallo,
ihr würdet gerne einen eleganten Javascript-Slider in euer Forum einsetzen? Sofern ihr HTML-Grundkenntnisse mitbringt, ist das leicht möglich.  Ich möchte euch hier helfen, folgenden Slider in euer Forum einzusetzen: http://slidesjs.com/examples/standard/
Dabei handelt es sich um ein Modell, welches von selbst regelmäßig neue Bilder anzeigt, aber auch ein manuelles Wechseln über Pfeilgrafiken und Statusbuttons zulässt.
Dazu betreten wir den Administrationsbereich:
Administrations-Bereich (erweitert) ![[Tutorial] Javascript-Slider / Slideshow Arrow10](https://i.servimg.com/u/f62/09/02/12/09/arrow10.gif) Module HTML und JAVASCRIPT HTML-Seiten-Verwaltung |
Über einen Klick auf ![[Tutorial] Javascript-Slider / Slideshow Button10](https://i.servimg.com/u/f43/17/63/75/60/button10.png) erstellen wir eine neue HTML-Seite mit folgenden Einstellungen:
![[Tutorial] Javascript-Slider / Slideshow Tuto_s10](https://i.servimg.com/u/f43/17/63/75/60/tuto_s10.png)
In das Eingabefenster HTML-Code fügen wir diesen Code ein:
- 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://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)):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="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a>
<a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a>
<a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" 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>
Dabei muss darauf geachtet werden, dass folgendes Symbol über dem Eingabefenster zu sehen ist: 
Sollte das Symbol :nohtml: angezeigt werden, wechseln wir über einen Klick darauf zum richtigen Eingabemodus.
Personalisierung des Sliders:
Bevor wir absenden und den Slider verwenden, müssen noch die gewünschten Bilder eingesetzt werden.
Dazu suchst du im HTML-Code folgenden Bereich:
<div class="slides_container"> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a> <a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a> </div>
Im Beispielcode habe ich drei verlinkte Grafiken eingesetzt. Folgendes Schema ist nötig und muss nun von uns angepasst werden:
<a href="URL-VERLINKUNG" title="BILDTITEL" target="_blank"><img src="BILDURL" width="570" height="270"></a>
- URL-Verlinkung: Dort setzen wir die URL ein, zu der ein Klick auf das Sliderbild verweisen soll, z.B. eine externe Website oder ein Thema innderhalb deines Forums.
- Bildtitel: Dort setzen wir jenen Text ein, der beim Hovern des Sliderbilds als Tooltip angezeigt werden soll.
- Bildurl: Dort setzen wir die URL der Grafik ein, die angezeigt werden soll. Zu beachten ist, dass die verwendeten Grafiken auf eine Größe von 570x270 px skaliert werden und deshalb passende Längen-/Breitenverhältnisse besitzen sollten.
Ein angepasstes Schema würde z.B. so aussehen:
- Code:
<a href="http://google.de" title="Herzlich willkommen" target="_blank"><img src="http://2img.net/i/bl/logo.png" width="570" height="270"></a>
Für zusätzliche Sliderbilder setzen wir dieses Schema einfach weitere Male an dieser Stelle im HTML-Code ein.
Nachdem wir den Code vollständig angepasst haben, klicken wir unter dem Eingabefenster auf den Button "Bestätigen".
Slider einsetzen:
Zunächst kopieren wir uns die URL der HTML-Seite, die wir soeben erstellt haben:
![[Tutorial] Javascript-Slider / Slideshow Tuto_s11](https://i.servimg.com/u/f43/17/63/75/60/tuto_s11.png)
Diese URL setzen wir nun in folgenden Code ein:
- Code:
<iframe src="HIER URL EINSETZEN" width="99%" height="350" frameborder="0" scrolling="no"></iframe>
Diesen Code können wir jetzt an allen Stellen des Forums einsetzen, an denen HTML erlaubt und ausreichender Platz vorhanden ist. Geeignet sind vor allem:
- Administrations-Bereich -> Anzeige -> Startseite -> Allgemeines -> Nachricht auf der Startseite
- ein persönliches Portalmodul der mittleren Spalte (Anleitung z.B. hier)
- Beiträge, wenn HTML aktiviert ist
Ergebnis:
Über folgendes Ergebnis dürfen wir uns schlussendlich freuen:
![[Tutorial] Javascript-Slider / Slideshow Tuto_s10](https://i.servimg.com/u/f43/17/63/75/60/tuto_s10.jpg)
Du hast den Code korrekt angepasst, dennoch ist dein Slider fehlerhaft und sieht z.B. so aus?
![[Tutorial] Javascript-Slider / Slideshow Tuto_s10](https://i.servimg.com/u/f49/13/29/54/75/tuto_s10.png)
Leider kann es vorkommen, dass beim Erstellen einer HTML-Seite die Scripts verändert und dadurch funktionsunfähig werden.
Sollte das auch bei dir der Fall sein, gehe bitte erneut zur HTML-Seiten-Verwaltung, bearbeite die HTML-Seite des Sliders über einen Klick auf  , lösche den gesamten Code aus dem Eingabefenster und folge erneut dem Tutorial. Nach dem erneuten Einsetzen und "Bestätigen" sollte der Code korrekt übernommen werden. |
Viel Spaß mit eurem Slider! 
Liebe Grüße
Günther
|
Startseite
![[Tutorial] Javascript-Slider / Slideshow Empty](https://2img.net/i/empty.gif)
[Tutorial] Javascript-Slider / Slideshow
von Günther Sa 17 Nov 2012 - 12:09![[Tutorial] Javascript-Slider / Slideshow Helpmo10](https://i.servimg.com/u/f43/17/63/75/60/helpmo10.png)
Beiträge : 15349
