Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind, loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

[Tutorial] Javascript-Slider / Slideshow

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Javascript-Slider / Slideshow

Beitrag von Günther am Sa 17 Nov 2012 - 12:09

[alle Versionen] Javascript-Slider/Slideshow einsetzen

Hallo,

ihr würdet gerne einen eleganten Javascript-Slider in euer Forum einsetzen? Sofern ihr HTML-Grundkenntnisse mitbringt, ist das leicht möglich. Smile 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) Module HTML und JAVASCRIPT HTML-Seiten-Verwaltung
Über einen Klick auf erstellen wir eine neue HTML-Seite mit folgenden Einstellungen:


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: HTML-EDIT
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. Wink
Ein angepasstes Schema würde z.B. so aussehen:
Code:
<a href="http://google.de" title="Herzlich willkommen" target="_blank"><img src="http://illiweb.com/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:


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:


Du hast den Code korrekt angepasst, dennoch ist dein Slider fehlerhaft und sieht z.B. so aus?


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 zahnrad, 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! Very Happy

Liebe Grüße
Günther

Dieses Tutorial stammt von Günther.
Das Tutorial unterliegt dem Copyright von hilfe.forumieren.com.
Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!
avatar
Günther
Admin a.D.
Admin a.D.

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

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