Nextbutton beim Slider ändern
Topo
- javascript
Hallo Leute,
mein Problem besteht darin, dass ich die Textbuttons gegen Bilder ersetzen möchte. Leider sind sie im Javascript integriert, dessen ich kaum mächtig bin.
Also Next und Prev sollen durch Pfeilgrafiken via CSS ersetzt werden.
Würde mich freuen, wenn mir da jemand weiterhelfen kann. Habe im Netz leider nichts passendes gefunden.
<div id="slider">
<ul>
<li><a href="bild_1.html"><img src="images/bild1.jpg" alt="Bild eins" /></a></li>
<li><a href="bild_2.html"><img src="images/bild2.jpg" alt="Bild zwei" /></a></li>
</ul>
</div>
und hier das Javascript:
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
orientation: '', // 'vertical' is optional;
speed: 800
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var s = $("li", obj).length;
var w = obj.width();
var h = obj.height();
var ts = s-1;
var t = 0;
var vertical = (options.orientation == 'vertical');
$("ul", obj).css('width',s*w);
if(!vertical) $("li", obj).css('float','left');
$(obj).after('<span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span> <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>');
$("a","#"+options.prevId).hide();
$("a","#"+options.nextId).hide();
$("a","#"+options.nextId).click(function(){
animate("next");
if (t>=ts) $(this).fadeOut();
$("a","#"+options.prevId).fadeIn();
});
$("a","#"+options.prevId).click(function(){
animate("prev");
if (t<=0) $(this).fadeOut();
$("a","#"+options.nextId).fadeIn();
});
function animate(dir){
if(dir == "next"){
t = (t>=ts) ? ts : t+1;
} else {
t = (t<=0) ? 0 : t-1;
};
if(!vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
options.speed
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
options.speed
);
}
};
if(s>1) $("a","#"+options.nextId).fadeIn();
});
};
})(jQuery);
Vielen Dank schon mal für alle Tipps!
Leider sind sie im Javascript integriert, dessen ich kaum mächtig bin.
Ein bisschen Hausverstand würde hier schon helfen - das ist von jedem, der etwas in Richtung "programmieren" unternehmen will auch zu erwarten.
und hier das Javascript:
prevId: 'prevBtn',
nextId: 'nextBtn',
Selbsterklärend.
Vielen Dank schon mal für alle Tipps!
Gern geschehen.
Sorry, leider ist da noch ein zweites Script mit eingebunden.
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){$.K.V=5(d){3 e={8:\'U\',v:\'M\',4:\'J\',A:\'E\',B:\'\',j:T};3 d=$.R(e,d);Q f.L(5(){2=$(f);3 s=$("n",2).I;3 w=2.k();3 h=2.D();3 b=s-1;3 t=0;3 c=(d.B==\'S\');$("i",2).z(\'k\',s*w);6(!c)$("n",2).z(\'P\',\'O\');$(2).N(\'<9 u="\'+d.8+\'"><a r=\\"m:q(0);\\">\'+d.v+\'</a></9> <9 u="\'+d.4+\'"><a r=\\"m:q(0);\\">\'+d.A+\'</a></9>\');$("a","#"+d.8).o();$("a","#"+d.4).o();$("a","#"+d.4).y(5(){7("l");6(t>=b)$(f).x();$("a","#"+d.8).g()});$("a","#"+d.8).y(5(){7("H");6(t<=0)$(f).x();$("a","#"+d.4).g()});5 7(a){6(a=="l"){t=(t>=b)?b:t+1}C{t=(t<=0)?0:t-1};6(!c){p=(t*w*-1);$("i",2).7({G:p},d.j)}C{p=(t*h*-1);$("i",2).7({F:p},d.j)}};6(s>1)$("a","#"+d.4).g()})}})(W);',59,59,'||obj|var|nextId|function|if|animate|prevId|span||||||this|fadeIn||ul|speed|width|next|javascript|li|hide||void|href|||id|prevText||fadeOut|click|css|nextText|orientation|else|height|Next|marginTop|marginLeft|prev|length|nextBtn|fn|each|Previous|after|left|float|return|extend|vertical|800|prevBtn|easySlider|jQuery'.split('|'),0,{}))
Muss ich hier nur Next und Previus entfernen?
Mahlzeit Topo,
Sorry, leider ist da noch ein zweites Script mit eingebunden.
Sorry, dann musst Du halt mit für Dich nicht brauchbaren Hilfeversuchen leben, wenn Du wichtige Informationen verschweigst.
Muss ich hier nur Next und Previus entfernen?
Warum fragst Du nicht den Autor des Skripts (das im Übrigen eigentlich wegen aktuer Grausamkeit und vorsätzlicher Verstöße gegen die Haager Landkriegsordnung zu 10.000 Jahren Teletubby-Gucken verurteilt werden sollte)?
MfG,
EKKi
Wenn ich #nextBtn und #prevBtn ein Hintergrundbild per CSS zuweise bleibt aber immer noch der Text "Next" und "Previous" darüber stehen. Wie kann ich ihn entfernen? Habe es im zweiten Script versucht, dann werden aber auch die Bilder von #nextBtn und #prevBtn nicht mehr dargestellt.
Wenn ich #nextBtn und #prevBtn ein Hintergrundbild per CSS zuweise bleibt aber immer noch der Text "Next" und "Previous" darüber stehen. Wie kann ich ihn entfernen?
Mit einer gewöhnlichen Image-Replacement-Technik - wie z.B. der Phark-Methode.
Habe es im zweiten Script versucht, dann werden aber auch die Bilder von #nextBtn und #prevBtn nicht mehr dargestellt.
Du musst in keinem Script irgendwas verändern.
Besten Dank für den Hinweis! Werde mich über die Feiertage damit beschäftigen.
Topo