Teammitglieder online
Support-Box
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
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
( 2 )


» Beitrag von Joost in Entdeckt die neue Option Servimg Premium
( 2 )


» Beitrag von T.G. in Zugangsdaten vergessen/verloren
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


» Beitrag von Skouliki in PN's werden nicht mehr rot eingefärbt
( 1 )


[Tutorial] Javascript-Slider / Slideshow

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Javascript-Slider / Slideshow Empty [Tutorial] Javascript-Slider / Slideshow

Beitrag von Günther 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) [Tutorial] Javascript-Slider / Slideshow Arrow10 Module [Tutorial] Javascript-Slider / Slideshow Arrow10 HTML und JAVASCRIPT [Tutorial] Javascript-Slider / Slideshow Arrow10 HTML-Seiten-Verwaltung
Über einen Klick auf [Tutorial] Javascript-Slider / Slideshow Button10 erstellen wir eine neue HTML-Seite mit folgenden Einstellungen:
[Tutorial] Javascript-Slider / Slideshow Tuto_s10

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

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

Du hast den Code korrekt angepasst, dennoch ist dein Slider fehlerhaft und sieht z.B. so aus?
[Tutorial] Javascript-Slider / Slideshow Tuto_s10

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!
[Tutorial] Javascript-Slider / Slideshow Helpmo10
Günther
Günther
Admin a.D.
Admin a.D.

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

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten