[Homepage] Images Slider

[Mystic-Royal]

Willkommen auf meinem ersten richtigen Tut.
Hier wird genau erklärt wie ihr einen "Slider" in eurer Homepage einbaut.
Das ist eine Box wo Bidler gezeigt werden. (Je 10 Sekunden wechseln sie sich.)
Das gibt es auch in der Elitepvpers Startseite.
Viel spass!

1. Neue Javasript Datei namens "slider.js" erstellen

2. Js Datei öffnen und folgendes reinschreiben

 Spoiler

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 4000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play); //REMOVE IF YOU DON'T WANT IT TO STOP ON HOVERING THE SWITCHER.
}, function() {
rotateSwitch();
});


$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});

3. Ihr habt sicher eine Startseite dort kommt folgendes rein:

 Spoiler

div class="window">
<div class="image_reel">
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/1.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/2.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/3.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/4.jpg" alt="" border="0" /></a>
</div>
</div>
<div class="paging">
<a rel="1">1</a>
<a rel="2">2</a>
<a rel="3">3</a>
<a rel="4">4</a>
</div>
</div>
<hr>

4.Irgendwo bei index.php oder home.php folgendes reinschreiben

 Spoiler

<script type="text/javascript" src="slider.js"></script>

5.Neue Ordner erstellen (Images►Slider)

6. "1.jpg-4.jpg" rein ziehen
Fertig!

Support gibt es gerne.
MFG
Royal

[Achileus]

Hmm eigl recht gut erklärt nur hat das was mit flyff zu tuhen?

Die leute können auch mal google benutzen da steht das sogar 2x mal so gut .Naja und ein richtiges tut isses auch nicht weil es nicht malst erklärt ist was es ist.

Sry aber kein Thanks!

[Mystic-Royal]

1. Ich verlange keine Thanks.
2. Das hat mit der Homepage von Flyff P-Servern zu tuhen^^
3. Ein richtiges Tut = Ein TuT das funtioniert eventuell mit Schritten.
4. Wie soll man es googeln, wenn man nicht auf die Idee kommt
und was das überhaupt heißt?
5. Ich werde es verbessern

[Meikbrosoft]

Hier einmal paar Fakten:
1. Es hat nichtsmals 1 % mit Flyff zu tun! Sondern mit Gestaltung einer Homepage (oder Scripten ), wie es auch dein Titel sagt: [Homepage] Images Slider
2. Das ist eine sehr knappe und kurze "Tutorial"
__________________________________________________ __________________

Erkläre doch ein bisschen! Und gestalte doch besser, es ist nicht so übersichtlich, du kannst ja die Texte die man einfügen muss in einen Zitat oder PHP Code wiedergeben zum Beispiel so:

Als erstes fügt ihr folgendes in der jr Datei ein:

 Spoiler

PHP Code:

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 4000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play); //REMOVE IF YOU DON'T WANT IT TO STOP ON HOVERING THE SWITCHER.
}, function() {
rotateSwitch();
});


$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
}); 


Und bin für #moverequest Grund: Falsche Sektion!

[Mystic-Royal]

Manchen hilft`s doch...
hast du noch was zu ergänzen???