0
Bir kaydırıcı, ben sorun jQuery
Make a kaydırıcı duyarlı (jQuery)
Ben kodunu düzenlemek nasıl ekmek dosyası içine kaydırıcının boyutudur onları duyarlı olmak için var
? Ben bu onları duyarlı hale getirmek için
(function(window, $, undefined) {
\t var $event = $.event, resizeTimeout;
\t $event.special.smartresize \t = {
\t \t setup: function() {
\t \t \t $(this).bind("resize", $event.special.smartresize.handler);
\t \t },
\t \t teardown: function() {
\t \t \t $(this).unbind("resize", $event.special.smartresize.handler);
\t \t },
\t \t handler: function(event, execAsap) {
\t \t \t // Save the context
\t \t \t var context = this,
\t \t \t \t args \t = arguments;
\t \t \t // set correct event type
\t \t \t event.type = "smartresize";
\t \t \t if (resizeTimeout) { clearTimeout(resizeTimeout); }
\t \t \t resizeTimeout = setTimeout(function() {
\t \t \t \t jQuery.event.handle.apply(context, args);
\t \t \t }, execAsap === "execAsap"? 0 : 100);
\t \t }
\t };
\t $.fn.smartresize \t \t \t = function(fn) {
\t \t return fn ? this.bind("smartresize", fn) : this.trigger("smartresize", ["execAsap"]);
\t };
\t
\t $.Slideshow \t \t \t \t = function(options, element) {
\t
\t \t this.$el \t \t \t = $(element);
\t \t
\t \t /***** images ****/
\t \t
\t \t // list of image items
\t \t this.$list \t \t \t = this.$el.find('ul.ei-slider-large');
\t \t // image items
\t \t this.$imgItems \t \t = this.$list.children('li');
\t \t // total number of items
\t \t this.itemsCount \t \t = this.$imgItems.length;
\t \t // images
\t \t this.$images \t \t = this.$imgItems.find('img:first');
\t \t
\t \t /***** thumbs ****/
\t \t
\t \t // thumbs wrapper
\t \t this.$sliderthumbs \t = this.$el.find('ul.ei-slider-thumbs').hide();
\t \t // slider elements
\t \t this.$sliderElems \t = this.$sliderthumbs.children('li');
\t \t // sliding div
\t \t this.$sliderElem \t = this.$sliderthumbs.children('li.ei-slider-element');
\t \t // thumbs
\t \t this.$thumbs \t \t = this.$sliderElems.not('.ei-slider-element');
\t \t
\t \t // initialize slideshow
\t \t this._init(options);
\t \t
\t };
\t
\t $.Slideshow.defaults \t \t = {
\t \t // animation types:
\t \t // "sides" : new slides will slide in from left/right
\t \t // "center": new slides will appear in the center
\t \t animation \t \t \t : 'center', // sides || center
\t \t // if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
\t \t autoplay \t \t \t : false,
\t \t // interval for the slideshow
\t \t slideshow_interval \t : 3000,
\t \t // speed for the sliding animation
\t \t speed \t \t \t : 800,
\t \t // easing for the sliding animation
\t \t easing \t \t \t : '',
\t \t // percentage of speed for the titles animation. Speed will be speed * titlesFactor
\t \t titlesFactor \t \t : 0.60,
\t \t // titles animation speed
\t \t titlespeed \t \t \t : 800,
\t \t // titles animation easing
\t \t titleeasing \t \t \t : '',
};
\t
\t $.Slideshow.prototype \t \t = {
\t \t _init \t \t \t \t : function(options) {
\t \t \t
\t \t \t this.options \t \t = $.extend(true, {}, $.Slideshow.defaults, options);
\t \t \t
\t \t \t // set the opacity of the title elements and the image items
\t \t \t this.$imgItems.css('opacity', 0);
\t \t \t this.$imgItems.find('div.ei-title > *').css('opacity', 0);
\t \t \t
\t \t \t // index of current visible slider
\t \t \t this.current \t \t = 0;
\t \t \t
\t \t \t var _self \t \t \t = this;
\t \t \t
\t \t \t // preload images
\t \t \t // add loading status
\t \t \t this.$loading \t \t = $('<div class="ei-slider-loading">Loading</div>').prependTo(_self.$el);
\t \t \t
\t \t \t $.when(this._preloadImages()).done(function() {
\t \t \t \t
\t \t \t \t // hide loading status
\t \t \t \t _self.$loading.hide();
\t \t \t \t
\t \t \t \t // calculate size and position for each image
\t \t \t \t _self._setImagesSize();
\t \t \t \t
\t \t \t \t // configure thumbs container
\t \t \t \t _self._initThumbs();
\t \t \t \t
\t \t \t \t // show first
\t \t \t \t _self.$imgItems.eq(_self.current).css({
\t \t \t \t \t 'opacity' \t : 1,
\t \t \t \t \t 'z-index' \t : 10
\t \t \t \t }).show().find('div.ei-title > *').css('opacity', 1);
\t \t \t \t
\t \t \t \t // if autoplay is true
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t _self._startSlideshow();
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t // initialize the events
\t \t \t \t _self._initEvents();
\t \t \t
\t \t \t });
\t \t \t
\t \t },
\t \t _preloadImages \t \t : function() {
\t \t \t
\t \t \t // preloads all the large images
\t \t \t
\t \t \t var _self \t = this,
\t \t \t \t loaded \t = 0;
\t \t \t
\t \t \t return $.Deferred(
\t \t \t
\t \t \t \t function(dfd) {
\t \t \t
\t \t \t \t \t _self.$images.each(function(i) {
\t \t \t \t \t \t
\t \t \t \t \t \t $('<img/>').load(function() {
\t \t \t \t \t \t
\t \t \t \t \t \t \t if(++loaded === _self.itemsCount) {
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t dfd.resolve();
\t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t }
\t \t \t \t \t \t
\t \t \t \t \t \t }).attr('src', $(this).attr('src'));
\t \t \t \t \t
\t \t \t \t \t });
\t \t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t).promise();
\t \t \t
\t \t },
\t \t _setImagesSize \t \t : function() {
\t \t \t
\t \t \t // save ei-slider's width
\t \t \t this.elWidth \t = this.$el.width();
\t \t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t this.$images.each(function(i) {
\t \t \t \t
\t \t \t \t var $img \t = $(this);
\t \t \t \t \t imgDim \t = _self._getImageDim($img.attr('src'));
\t \t \t \t \t
\t \t \t \t $img.css({
\t \t \t \t \t width \t \t : imgDim.width,
\t \t \t \t \t height \t \t : imgDim.height,
\t \t \t \t \t marginLeft \t : imgDim.left,
\t \t \t \t \t marginTop \t : imgDim.top
\t \t \t \t });
\t \t \t \t
\t \t \t });
\t \t
\t \t },
\t \t _getImageDim : function(src) {
\t \t \t
\t \t \t var $img = new Image();
\t \t \t \t \t \t \t
\t \t \t $img.src = src;
\t \t \t \t \t
\t \t \t var c_w \t \t = this.elWidth,
\t \t \t \t c_h \t \t = this.$el.height(),
\t \t \t \t r_w \t \t = c_h/c_w,
\t \t \t \t
\t \t \t \t i_w \t \t = $img.width,
\t \t \t \t i_h \t \t = $img.height,
\t \t \t \t r_i \t \t = i_h/i_w,
\t \t \t \t new_w, new_h, new_left, new_top;
\t \t \t \t \t
\t \t \t if(r_w > r_i) {
\t \t \t \t
\t \t \t \t new_h \t = c_h;
\t \t \t \t new_w \t = c_h/r_i;
\t \t \t
\t \t \t }
\t \t \t else {
\t \t \t
\t \t \t \t new_h \t = c_w * r_i;
\t \t \t \t new_w \t = c_w;
\t \t \t
\t \t \t }
\t \t \t \t \t
\t \t \t return {
\t \t \t \t width \t : new_w,
\t \t \t \t height \t : new_h,
\t \t \t \t left \t : (c_w - new_w)/2,
\t \t \t \t top \t \t : (c_h - new_h)/2
\t \t \t };
\t \t
\t \t },
\t \t _initThumbs \t \t \t : function() {
\t \t
\t \t \t // set the max-width of the slider elements to the one set in the plugin's options
\t \t \t // also, the width of each slider element will be 100%/total number of elements
\t \t \t this.$sliderElems.css({
\t \t \t \t 'width' \t \t : 100/this.itemsCount + '%'
\t \t \t });
\t \t \t
\t \t \t // set the max-width of the slider and show it
\t \t \t this.$sliderthumbs.css('width', this.options.thumbMaxWidth * this.itemsCount + 'px').show();
\t \t \t
\t \t },
\t \t _startSlideshow \t \t : function() {
\t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t this.slideshow \t = setTimeout(function() {
\t \t \t \t
\t \t \t \t var pos;
\t \t \t \t
\t \t \t \t (_self.current === _self.itemsCount - 1) ? pos = 0 : pos = _self.current + 1;
\t \t \t \t
\t \t \t \t _self._slideTo(pos);
\t \t \t \t
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t _self._startSlideshow();
\t \t \t \t
\t \t \t \t }
\t \t \t
\t \t \t }, this.options.slideshow_interval);
\t \t
\t \t },
\t \t // shows the clicked thumb's slide
\t \t _slideTo \t \t \t : function(pos) {
\t \t \t
\t \t \t // return if clicking the same element or if currently animating
\t \t \t if(pos === this.current || this.isAnimating)
\t \t \t \t return false;
\t \t \t
\t \t \t this.isAnimating \t = true;
\t \t \t
\t \t \t var $currentSlide \t = this.$imgItems.eq(this.current),
\t \t \t \t $nextSlide \t \t = this.$imgItems.eq(pos),
\t \t \t \t _self \t \t \t = this,
\t \t \t \t
\t \t \t \t preCSS \t \t \t = {zIndex \t : 10},
\t \t \t \t animCSS \t \t \t = {opacity \t : 1};
\t \t \t
\t \t \t // new slide will slide in from left or right side
\t \t \t if(this.options.animation === 'sides') {
\t \t \t \t
\t \t \t \t preCSS.left \t \t = (pos > this.current) ? -1 * this.elWidth : this.elWidth;
\t \t \t \t animCSS.left \t = 0;
\t \t \t
\t \t \t } \t
\t \t \t
\t \t \t // titles animation
\t \t \t $nextSlide.find('div.ei-title > h2')
\t \t \t \t \t .css('margin-right', 50 + 'px')
\t \t \t \t \t .stop()
\t \t \t \t \t .delay(this.options.speed * this.options.titlesFactor)
\t \t \t \t \t .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing)
\t \t \t \t \t .end()
\t \t \t \t \t .find('div.ei-title > h3')
\t \t \t \t \t .css('margin-right', -50 + 'px')
\t \t \t \t \t .stop()
\t \t \t \t \t .delay(this.options.speed * this.options.titlesFactor)
\t \t \t \t \t .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing)
\t \t \t
\t \t \t $.when(
\t \t \t \t
\t \t \t \t // fade out current titles
\t \t \t \t $currentSlide.css('z-index' , 1).find('div.ei-title > *').stop().fadeOut(this.options.speed/2, function() {
\t \t \t \t \t // reset style
\t \t \t \t \t $(this).show().css('opacity', 0); \t
\t \t \t \t }),
\t \t \t \t
\t \t \t \t // animate next slide in
\t \t \t \t $nextSlide.css(preCSS).stop().animate(animCSS, this.options.speed, this.options.easing),
\t \t \t \t
\t \t \t \t // "sliding div" moves to new position
\t \t \t \t this.$sliderElem.stop().animate({
\t \t \t \t \t left \t : this.$thumbs.eq(pos).position().left
\t \t \t \t }, this.options.speed)
\t \t \t \t
\t \t \t).done(function() {
\t \t \t \t
\t \t \t \t // reset values
\t \t \t \t $currentSlide.css('opacity' , 0).find('div.ei-title > *').css('opacity', 0);
\t \t \t \t \t _self.current \t = pos;
\t \t \t \t \t _self.isAnimating \t \t = false;
\t \t \t \t
\t \t \t \t });
\t \t \t \t
\t \t },
\t \t _initEvents \t \t \t : function() {
\t \t \t
\t \t \t var _self \t = this;
\t \t \t
\t \t \t // window resize
\t \t \t $(window).on('smartresize.eislideshow', function(event) {
\t \t \t \t
\t \t \t \t // resize the images
\t \t \t \t _self._setImagesSize();
\t \t \t
\t \t \t \t // reset position of thumbs sliding div
\t \t \t \t _self.$sliderElem.css('left', _self.$thumbs.eq(_self.current).position().left);
\t \t \t
\t \t \t });
\t \t \t
\t \t \t // click the thumbs
\t \t \t this.$thumbs.on('click.eislideshow', function(event) {
\t \t \t \t
\t \t \t \t if(_self.options.autoplay) {
\t \t \t \t
\t \t \t \t \t clearTimeout(_self.slideshow);
\t \t \t \t \t _self.options.autoplay \t = false;
\t \t \t \t
\t \t \t \t }
\t \t \t \t
\t \t \t \t var $thumb \t = $(this),
\t \t \t \t \t idx \t \t = $thumb.index() - 1; // exclude sliding div
\t \t \t \t \t
\t \t \t \t _self._slideTo(idx);
\t \t \t \t
\t \t \t \t return false;
\t \t \t
\t \t \t });
\t \t \t
\t \t }
\t };
\t
\t var logError \t \t \t \t = function(message) {
\t \t
\t \t if (this.console) {
\t \t \t
\t \t \t console.error(message);
\t \t \t
\t \t }
\t \t
\t };
\t
\t $.fn.eislideshow \t \t \t = function(options) {
\t
\t \t if (typeof options === 'string') {
\t \t
\t \t \t var args = Array.prototype.slice.call(arguments, 1);
\t \t \t this.each(function() {
\t \t \t
\t \t \t \t var instance = $.data(this, 'eislideshow');
\t \t \t \t
\t \t \t \t if (!instance) {
\t \t \t \t \t logError("cannot call methods on eislideshow prior to initialization; " +
\t \t \t \t \t "attempted to call method '" + options + "'");
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t
\t \t \t \t if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
\t \t \t \t \t logError("no such method '" + options + "' for eislideshow instance");
\t \t \t \t \t return;
\t \t \t \t }
\t \t \t \t
\t \t \t \t instance[ options ].apply(instance, args);
\t \t \t
\t \t \t });
\t \t
\t \t }
\t \t else {
\t \t
\t \t \t this.each(function() {
\t \t \t
\t \t \t \t var instance = $.data(this, 'eislideshow');
\t \t \t \t if (!instance) {
\t \t \t \t \t $.data(this, 'eislideshow', new $.Slideshow(options, this));
\t \t \t \t }
\t \t \t
\t \t \t });
\t \t
\t \t }
\t \t
\t \t return this;
\t \t
\t };
\t
})(window, jQuery);jQuery
aitkodunu düzenlemek nasıl? bir örnek verebilir misin ?
Web sitesi duyarlı, ama bir sorunum var. jQuery dosyası genişlik ve yüksekliğe sahip olduğundan, jQuery dosyasında genişliği nasıl düzenleyeceğimi bilmem gerekiyor – saad12
Üzgünüz, ama sana sormam gerek ... Neden her şey ile yeni yerine geçmiyorsunuz? Yani ... bxSlider'ın kodu bitti! Duyarlı sistemi ve uygulamak için etkileri var. Neden kendi kodunu yeniden oluşturmaya çalışıyorsun? Ne kadar zaman harcadığımı bilmiyorum ama senin durumunda, tekerleği yeniden icat etmemize gerek yok. Daha hızlı ve iyi şeyler yaratmak için kullanabiliriz. Bu nedenle jQuery'yi neden kullanıyoruz. Lütfen bu yorumu yalnızca bir öneriyle düşünün, sadece yardım etmeye çalışıyorum. Şerefe! –
İki kaydırıcım var, yanıt vermiyor, bu yüzden onları yanıtlamak istiyorum, Eğer bu fonksiyonu yaptığımda $ (document) .ready (Zaten) ( ) kaydırıcısını görebilmek için bana gmailinizi göndermek için bana gmail'i vermek istiyorsanız function() { $ ('. bxslider'). bxSlider(); }); Kodumdaki ? – saad12