| Autor |
Nachricht |
deborre
Threadersteller
Dabei seit: 06.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 25.02.2011 22:01
Titel anpassung von ajax slideshow |
  |
|
Guten Tag,
Benutze momentan ein script mit dem ich posts aus wordpress als keyvisual anzeigen lassen und diese dann manuel als slideshow durchzuschauen sind. Nun hätte ich es aber gerne, dass diese posts sich auch zeitgesteuert durchschalten unabhängig davon ob jemand weiter drückt oder nicht.
Könnte mir bitte jemand helfen wie ich das schaffe? bin was Java etc angeht nicht sehr gut.
Geht um die Seite http://deborre.net ... besagte slideshow liegt über der navigation.
der Code den ich momentan benutze sieht so aus:
| Code: | function ShowHide(d){
jQuery(d).animate({"height": "toggle"}, { duration: 400 });
}
$(function() {
function slidePanel( newPanel, direction ) {
var offsetLeft = $slider.offset().left;
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
$slider.children('.slide-panel.active').animate({
left: currPos
}, 400, function() {
$(this).removeClass('active');
});
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({
left: 0
}, 400 );
}
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
var currPanel = 0;
$navLeft.click(function() {
currPanel--;
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
slidePanel(currPanel, 'right');
});
$navRight.click(function() {
currPanel++;
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
slidePanel(currPanel, 'left');
});
}); |
Wär super falls jemand Ahnung davon hat, vielen Dank schonmal!
Auch der Rest der Seite ist momentan noch Baustelle, bin also über sämtliche Verbesserungsvorschläge und Anregungen dankbar.
|
|
| |
  |
 |
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 25.02.2011 23:23
Titel
|
|
|
Tachchen.
Ich kann auf der Seite zwar keinen Slider entdecken, aber ich würde folgendende quick&dirty-Lösung anbieten:
Schätze mal die Slideshow lässt sich über die Divs #full-slider-nav-left & #full-slider-nav-left steuern.
Es gibt die wunderschöne jQuery-Funktion trigger(). Damit lassen sich Events an Elementen auslösen. Beispielsweise ein Klick. In Kombination mit einem Javascript Interval könnte des Rätsels Lösung wie folgt ausfallen:
| Code: | var triggerInterval = window.setInterval("triggerRight()", 1000);
function triggerRight() {
$('#full-slider-nav-right').trigger('click');
} |
Alle 1000 Millisecs wird die Funktion triggerRight() aufgerufen, wodurch ein Klick auf #full-slider-nav-right simuliert wird.
Viel Erfolg damit 
*edit* Ach die Slideshow ist im Header! Die links/rechts-Pfeile sind wirklich unauffällig, habe sie erst jetzt gesehen.
Zuletzt bearbeitet von trashmaster am Fr 25.02.2011 23:25, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
deborre
Threadersteller
Dabei seit: 06.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 25.02.2011 23:43
Titel
|
|
|
Hey Hey,
Super, vielen Dank das funktioniert einwandfrei!
Ja die pfeile sind ein bisschen versteckt, möchte hauptsächlich dass das ding da langsam durchläuft, die reihenfolge wird auch noch zufällig ..
gäbe es noch ne mäglichkeit das ganze anzuhalten wenn jemand es liest, also zB bei nem hover oder so? oder ist das sehr viel komplizierter?
|
|
| |
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.02.2011 00:02
Titel
|
|
|
Yor.. wir können den Interval bei Hover mit clearInterval() löschen und ihn wieder setzen, wenn die Maus den Header wieder verlässt:
| Code: | $("#full-slider").hover(function() {
window.clearInterval( triggerInterval );
}, function() {
triggerInterval = window.setInterval("triggerRight()", 1000);
}); |
Zuletzt bearbeitet von trashmaster am Sa 26.02.2011 00:03, insgesamt 2-mal bearbeitet
|
|
| |
|
|
deborre
Threadersteller
Dabei seit: 06.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.02.2011 01:55
Titel
|
|
|
hm ich fürchte das kreige ich irgendwie nicht so zum laufen. Muss ich jetzt nur den code nehmen oder auch den von vorher? .. wenn ich beide habe läuft es einfach immer weiter, wenn ich nur den neuen habe tut es gar nicht .. und wenn ich sie versuche zu kombinieren hab ich keine ahnung was ich eigentlich mache  .
Vielen Dank aber schon einmal! Hast du ne Ahnung was das Problem sein könnte?
|
|
| |
|
|
trashmaster
Dabei seit: 20.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 26.02.2011 13:09
Titel
|
|
|
Achso, ja den davor brauchst du auch noch. Einerseits ist dort diese Trigger-Funktion drin, andererseits wird dort der erste Aufruf des Intervals gemacht, der ja direkt ohne Interaktion starten soll.
Der neue Code-Block muss auf jeden Fall innerhalb dieses $(function() { });-Blocks, da wir hier auf jQuery-Events zugreifen. Versuch's mal so:
| Code: | var triggerInterval = window.setInterval("triggerRight()", 1000);
function triggerRight() {
$('#full-slider-nav-right').trigger('click');
}
function ShowHide(d){
jQuery(d).animate({"height": "toggle"}, { duration: 400 });
}
$(function() {
function slidePanel( newPanel, direction ) {
var offsetLeft = $slider.offset().left;
var hideLeft = -1 * ( offsetLeft + $slider.width() );
var hideRight = $(window).width() - offsetLeft;
if ( direction == 'left' ) {
currPos = hideLeft;
nextPos = hideRight;
}
else {
currPos = hideRight;
nextPos = hideLeft;
}
$slider.children('.slide-panel.active').animate({
left: currPos
}, 400, function() {
$(this).removeClass('active');
});
$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({
left: 0
}, 400 );
}
var $slider = $('#full-slider');
var $sliderPanels = $slider.children('.slide-panel');
var $navWrap = $('<div id="full-slider-nav"></div>').appendTo( $slider );
var $navLeft = $('<div id="full-slider-nav-left"></div>').appendTo( $navWrap );
var $navRight = $('<div id="full-slider-nav-right"></div>').appendTo( $navWrap );
var currPanel = 0;
$navLeft.click(function() {
currPanel--;
if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;
slidePanel(currPanel, 'right');
});
$navRight.click(function() {
currPanel++;
if ( currPanel >= $sliderPanels.length ) currPanel = 0;
slidePanel(currPanel, 'left');
});
$("#full-slider").hover(function() {
window.clearInterval( triggerInterval );
}, function() {
triggerInterval = window.setInterval("triggerRight()", 1000);
});
}); |
Zuletzt bearbeitet von trashmaster am Sa 26.02.2011 13:13, insgesamt 2-mal bearbeitet
|
|
| |
|
|
deborre
Threadersteller
Dabei seit: 06.11.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 27.02.2011 15:48
Titel
|
|
|
Hey Hey,
Vielen Dank! Das funktioniert jetzt genau so wie ich mir das vorgestellt habe! Danke und noch ein schönes restliches Wochenende!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Foto Slideshow evtl Ajax?
[Ajax] Prototype Funktion Ajax.Updater - Brauche Hilfe
[jQuery Cycle] Slideshow in Slideshow wechseln zusammen
Anpassung von myspace-seite
Dynamische Div Anpassung anhand Content
Rahmen um Website mit Anpassung an Browserfenster
|
|
Willkommen auf dem Portal für Mediengestalter
