0
У меня есть ползунок, я хочу, чтобы сделать их отзывчивым проблемой является размер слайдера в JQuery файлСделать ползунок отзывчивым (JQuery)
сеют, как я могу изменить код?
код JQuery
(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 имеет ширину и высоту. Поэтому мне нужно знать, как редактировать ширину в файле jQuery. – saad12
Извините, но мне нужно спросить вас ... Почему вы не заменяете новое на все? Я имею в виду ... код bxSlider, это сделано! Они имеют гибкую систему и эффекты для применения. Почему вы пытаетесь воссоздать свой собственный код? Я не знаю, сколько времени вы потратили, но в вашем случае, я считаю, нам не нужно изобретать колесо. Мы можем использовать его для создания вещей быстрее и лучше. Вот почему мы используем jQuery, например. Пожалуйста, рассмотрите этот комментарий только с предложением, я просто пытаюсь помочь. Ура! –
У меня есть два слайдера, а не отзывчивый, поэтому я хочу сделать их отзывчивыми. Если вы хотите дать мне свой gmail, чтобы отправить вам код для просмотра слайдера , когда я делаю его этой функцией $ (document) .ready (function() { $ ('. bxslider'). bxSlider(); }); в моем коде? – saad12