Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Easy Slider Buttons verschieben“

Foos

Member

Hey, ich denke mal die meisten von euch kenen ja diesen Easy jquery Slider von CSSGLOBE

Ja ich habe es gestern auch endlich mal hinbekommen, ihn auf meiner Seite zu integrieren!

Nach etlichen Problemen läuft er nun. Nur ein Problem gibt es:
Ich find einfach keine Möglichkeit die "Next" und "Previous" Buttons zu verschieben oder durch ein Bild zu ersetzen!

Hier mal das Javascript:
PHP:
/*
 *     Easy Slider - jQuery plugin
 *    written by Alen Grakalic    
 *    http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
 *
 *    Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *    Dual licensed under the MIT (MIT-LICENSE.txt)
 *    and GPL (GPL-LICENSE.txt) licenses.
 *
 *    Built for jQuery library
 *    http://jquery.com
 *
 */
 
/*
 *    markup example for $("#images").easySlider();
 *    
 *     <div id="images">
 *        <ul>
 *            <li><img src="images/01.jpg" alt="" /></li>
 *            <li><img src="images/02.jpg" alt="" /></li>
 *            <li><img src="images/03.jpg" alt="" /></li>
 *            <li><img src="images/04.jpg" alt="" /></li>
 *            <li><img src="images/05.jpg" alt="" /></li>
 *        </ul>
 *    </div>
 *
 */

(function($) {

    $.fn.easySlider = function(options){
      
        // default configuration properties
                var defaults = {
            prevId:         'prevBtn',
            prevText:         '<img src="images/left.jpg">',
            nextId:         'nextBtn',    
            nextText:         '<img src="images/right.jpg">',
            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);
 

sokie

Mod | Web

AW: Easy Slider Buttons verschieben

Wie im Tutorial beschrieben erstellt das script die "Buttons" automatisch. Das geschieht hier:
Code:
[COLOR=#000000][COLOR=#007700]$([/COLOR][COLOR=#0000bb]obj[/COLOR][COLOR=#007700]).[/COLOR][COLOR=#0000bb]after[/COLOR][COLOR=#007700]([/COLOR][COLOR=#dd0000]'<span id="'[/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#0000bb]options[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]prevId [/COLOR][COLOR=#007700]+[/COLOR][COLOR=#dd0000]'"><a href=\"javascript:void(0);\">'[/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#0000bb]options[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]prevText [/COLOR][COLOR=#007700]+[/COLOR][COLOR=#dd0000]'</a></span> <span id="'[/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#0000bb]options[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]nextId [/COLOR][COLOR=#007700]+[/COLOR][COLOR=#dd0000]'"><a href=\"javascript:void(0);\">'[/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#0000bb]options[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000bb]nextText [/COLOR][COLOR=#007700]+[/COLOR][COLOR=#dd0000]'</a></span>'[/COLOR][COLOR=#007700]);[/COLOR][/COLOR]
hier hast du eine Reihe von Möglichkeiten.
Eine die ohne Änderung des Scriptcodes funktioniert ist zB die IDs 'prevBtn' und 'nextBtn' einfach per css nach Bedarf zu formatieren und positionieren.

im Script könnte man alternativ dazu, die entsprechende Zeile editieren.
 

stroyer

Aktives Mitglied

AW: Easy Slider Buttons verschieben

Aber das ist ja zum Teil schon erfolgt. Das heißt wenigstens die Bilder müssten angezeigt werden.
 

sokie

Mod | Web

AW: Easy Slider Buttons verschieben

werden sie auch, wenn die Pfade stimmen. vielleicht wäre ein link zur Seite hilfreich.
 

Foos

Member

AW: Easy Slider Buttons verschieben

ok also hier wäre einmal die seite:

DOMDESIGN| Dominik Geisler | Mediendesign | Portfolio

PHP:
(function($) {

    $.fn.easySlider = function(options){
      
        // default configuration properties
                var defaults = {
            prevId:         'prevBtn',
            prevText:         '<img src="http://www.psd-tutorials.de/modules/Forum/images/left.jpg">',
            nextId:         'nextBtn',    
            nextText:         '<img src="http://www.psd-tutorials.de/modules/Forum/images/right.jpg">',
            orientation:    '', //  'vertical' is optional;
            speed:             800    
        };
Die Pfade stimmen doch so?

Warum funktioniert denn der Slider im Safari nich?
 
Zuletzt bearbeitet:

sokie

Mod | Web

AW: Easy Slider Buttons verschieben

die schon...
aber dein verwendetes script ist dieses :
<script type="text/javascript" src="js/easySlider.packed.js"></script>

vielleicht solltest du das anpasen.
 

sokie

Mod | Web

AW: Easy Slider Buttons verschieben

nun, der Code den Du uns gepostet hast ist aus der domdesignonline.de/js/easySlider.js
verlinkt in deinem Dokument ist allerdings die easySlider.packed.js
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben