Antworten auf deine Fragen:
Neues Thema erstellen

jQuery Slider Variable übergeben

Hi,

folgendes:
Ich habe ein jQuery Script, welches ein Content-Slider darstellt. Der Funktion wird folgendes übergeben:
Code:
    <script type="text/javascript">
        $(document).ready(function() {
            $('#xyz').carousel({
                itemsPerPage: 3,
                itemsPerTransition: 3,
                speed: 500,
            });
        });
    </script>
Nun ist es so, dass dieses Script "Next" and "Previos" Buttons in dem Div mit der ID #xyz ergänzt. Ich möchte das beeinflussen und den Funktionaufruf um eine Variable ergänzen. Diese Variable beinhaltet die ID, bei der die Buttons eingefügt werden sollen:
Code:
btnID: #da_soll_der_button_hin

sprich

    <script type="text/javascript">
        $(document).ready(function() {
            $('#xyz').carousel({
                itemsPerPage: 3,
                itemsPerTransition: 3,
                speed: 500,
                btnID: #da_soll_der_button_hin
            });
        });
    </script>
Bisher muss ich in der Funktion das manuell eintragen (siehe Vermerk unten). Die Funktion sieht bisher folgendermaßen aus:
Code:
// prototypal inheritance
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

(function($) {
    // ie alias
    var headache = $.browser.msie && $.browser.version.substr(0,1)<9;

    // carousel
    var Carousel = {
        settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: false,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing',
        },
        init: function(el, options) {
            alert(el);
            if (!el.length) {return false;}
            this.options = $.extend({}, this.settings, options);
            this.itemIndex = 0;    
            this.container = el;
            this.btnContainer = '#tour_itineraries_btns';
            this.runner = this.container.find('ul');
            this.items = this.runner.children('li');
            this.noOfItems = this.items.length;
            this.setRunnerWidth();
            if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
            this.insertMask();
            this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
            if (this.options.pagination) {this.insertPagination();}
            if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
            this.updateBtnStyles();
        },
        insertMask: function() {
            this.runner.wrap('<div class="mask" />');
            this.mask = this.container.find('div.mask');

            // set mask height so items can be of varying height
            var maskHeight = this.runner.outerHeight(true);
            this.mask = this.container.find('div.mask');
            this.mask.height(maskHeight);
        },
        setRunnerWidth: function() {
            this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
            var width =  this.items.outerWidth(true) * this.noOfItems;
            this.runner.width(width);
        },
        insertPagination: function() {
            var i, links = [];
            this.paginationLinks = $('<ol class="pagination-links" />');
            for (i = 0; i < this.noOfPages; i++) {
                links[i] = '<li><a href="#item-' + i + '">' + (i + 1) + '</a></li>';
            }
            this.paginationLinks
                .append(links.join(''))
                .appendTo(this.container)
                .find('a')
                    .bind('click.carousel', $.proxy(this, 'paginationHandler'));
        },
        paginationHandler: function(e) {
            this.itemIndex = e.target.hash.substr(1).split('-')[1] * this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        insertNextPrevLinks: function() {
            this.prevLink = $('<a href="#" class="prev">Prev</a>')
                                .bind('click.carousel', $.proxy(this, 'prevItem'))
                                .appendTo(this.btnContainer);
            this.nextLink = $('<a href="#" class="next">Next</a>')
                                .bind('click.carousel', $.proxy(this, 'nextItem'))
                                .appendTo(this.btnContainer);
        },
        nextItem: function() {
            this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        prevItem: function() {
            this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
            this.animate();
            return false;
        },
        updateBtnStyles: function() {
            if (this.options.pagination) {
                this.paginationLinks
                    .children('li')
                        .removeClass('current')
                        .eq(Math.ceil(this.itemIndex / this.options.itemsPerTransition))
                            .addClass('current');
            }

            if (this.options.nextPrevLinks) {
                this.nextLink
                    .add(this.prevLink)
                        .removeClass('disabled');
                if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
                    this.nextLink.addClass('disabled');
                } 
                else if (this.itemIndex === 0) {
                    this.prevLink.addClass('disabled');
                }
            }
        },
        animate: function() {
            var nextItem, pos;
            // check whether there are enough items to animate to
            if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
                this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
            }
            if (this.itemIndex < 0) {
                this.itemIndex = 0; // go to first
            }
            nextItem = this.items.eq(this.itemIndex);
            pos = nextItem.position();
            
            if (headache) {
                this.runner
                    .stop()
                    .animate({left: -pos.left}, this.options.speed, this.options.easing);
            }
            else {
                this.mask
                    .stop()
                    .animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
            }
            this.updateBtnStyles();
        }
    };

    // bridge
    $.fn.carousel = function(options) {
        return this.each(function() {
            var obj = Object.create(Carousel);
            obj.init($(this), options);
            $.data(this, 'carousel', obj);
        });
    };
})(jQuery);
Im Klartext (Vermerk):
Die Variable this.btnContainer in der Funktion, soll durch den dem Script übergebenen Parameter ersetzt werden. Dieser wurde oben Initialisiert: "btnID".

How to realize? :)
 

Duddle

Posting-Frequenz: 14µHz

AW: jQuery Slider Variable übergeben

Naja, du ersetzt
Code:
this.btnContainer = '#tour_itineraries_btns';
mit
Code:
this.btnContainer = this.options.btnID;
und fügst im settings-Objekt wieder den Standardwert hinzu, also
Code:
settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: false,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing',
            btnID: '#tour_itineraries_btns',
        },
Das sollte es wahrscheinlich schon sein. Die Standardwerte werden mit dem übergebenen options-Objekt erweitert (d.h. wenn vorhanden überschreibt der Wert aus options den in settings), dann werden sie den internen Variablen zugewiesen.


Duddle
 
AW: jQuery Slider Variable übergeben

Naja, du ersetzt
Code:
this.btnContainer = '#tour_itineraries_btns';
mit
Code:
this.btnContainer = this.options.btnID;
und fügst im settings-Objekt wieder den Standardwert hinzu, also
Code:
settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: false,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing',
            btnID: '#tour_itineraries_btns',
        },
Das sollte es wahrscheinlich schon sein. Die Standardwerte werden mit dem übergebenen options-Objekt erweitert (d.h. wenn vorhanden überschreibt der Wert aus options den in settings), dann werden sie den internen Variablen zugewiesen.


Duddle
Danke, ich vermute auch dass es stimmt. Werde es später mal testen und dann eine Rückmeldung geben.

Gruß :)
 
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
118.635
Beiträge
1.538.476
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben