Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #959032

    Hi
    I am having the same problem like here: https://kriesi.at/support/topic/fullwidth-easy-slider-with-video-asking-for-object-on-mobile/#post-955294
    Can you post the solution again so that i can copy it?

    Thanks
    Michael F.

    #959380

    Hey werbeagenturlauf,

    Try replacing the whole _prepareSlides function config-templatebuilder > aviashortcodes > slideshow > slideshow.js with this

    
    _prepareSlides: function(options)
    		{	
    			//if its a mobile device find all video slides that need to be altered
    			if(this.isMobile)
    			{
    				var alter = this.$slider.find('.av-mobile-fallback-image');
    				alter.each(function()
    				{	
    					var current  = $(this).removeClass('av-video-slide').data({'avia_video_events': true, 'video-ratio':0}),
    						fallback = current.data('mobile-img'),
    						fallback_link = current.data('fallback-link'),
    						appendTo = current.find('.avia-slide-wrap');
    						
    					current.find('.av-click-overlay, .mejs-mediaelement, .mejs-container').remove();
    					
    					if(!fallback)
    					{
    						$('<p class="av-fallback-message"><span>Please set a mobile device fallback image for this video in your wordpress backend</span></p>').appendTo(appendTo);
    					}
    					
    					if(options && options.bg_slider)
    					{
    						current.data('img-url', fallback);
    						
    						//if we got a fallback link we need to either replace the default link on mobile devices, or if there is no default link change the wrapping <div> to an <a>
    						if(fallback_link != "")
    						{
    							if(appendTo.is('a'))
    							{
    								appendTo.attr('href', fallback_link);
    							}
    							else
    							{
    								appendTo.find('a').remove();
    								appendTo.replaceWith(function(){
    									var cur_slide = $(this);
    								    return $("<a>").attr({'data-rel': cur_slide.data('rel'), 'class': cur_slide.attr('class'), 'href': fallback_link} ).append( $(this).contents() );
    								});
    									
    								appendTo = current.find('.avia-slide-wrap');
    							}
    							
    							if($.fn.avia_activate_lightbox)
    							{
    								current.parents('#main').avia_activate_lightbox();
    							}
    						}
    					}
    					else
    					{
    						var image = $('<img src="'+fallback+'" alt="" title="" />');
    						var lightbox = false;
    						
    						if( 'string' == typeof fallback_link && fallback_link.trim() != '' )
    						{
    							image = $('<a href="' + fallback_link.trim() + '" rel="lightbox">' + image + '</a>');
    							lightbox = true;
    						}
    						
    						if( lightbox && $.fn.avia_activate_lightbox)
    						{
    							current.parents('#main').avia_activate_lightbox();
    						}
    						
    						current.find('.avia-slide-wrap').append(image);
    					}
    					
    				});
    			}
    			
    		},
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #959603

    Hi Victoria!
    I have two problems:
    1.
    I am working with a child theme. and as far as i know with the next update of the theme this might be overwritten.

    2.
    Do i overwrite all this?:

    /* ======================================================================================================================================================
    Avia Slideshow
    ====================================================================================================================================================== */

    (function($)
    {
    “use strict”;

    $.AviaSlider = function(options, slider)
    {
    var self = this;

    this.$win = $( window );

    this.$slider = $( slider );

    this.isMobile = $.avia_utilities.isMobile;

    this._prepareSlides(options);

    //default preload images then init slideshow
    $.avia_utilities.preload({container: this.$slider , single_callback: function(){ self._init( options ); }});
    }

    $.AviaSlider.defaults = {

    //interval between autorotation switches
    interval:5,

    //autorotation active or not
    autoplay:false,

    //set if the loop will stop at the last/first slide or if the slides will loop infinite
    //set to false for infinite loop, “last” to stop at the last slide or “first” to stop at the first slide
    stopinfiniteloop: false,

    //fade or slide animation
    animation:’slide’,

    //transition speed when switching slide
    transitionSpeed:900,

    //easing method for the transition
    easing:’easeInOutQuart’,

    //slide wrapper
    wrapElement: ‘>ul’,

    //slide element
    slideElement: ‘>li’,

    //pause if mouse cursor is above item
    hoverpause: false,

    //attach images as background
    bg_slider: false,

    //delay of miliseconds to wait before showing the next slide
    show_slide_delay: 0,

    //if slider animation is set to “fade” the fullfade property sets the crossfade behaviour
    fullfade: false,

    //enable carousel mode with multiple visible slides
    carousel: ‘no’,

    // how many slides are displayed at once in the carousel
    carouselSlidesToShow: 3,

    // TODO: how many slides are scrolled in the carousel
    carouselSlidesToScroll: 1,

    // responsive carousel
    carouselResponsive : new Array(),

    };

    $.AviaSlider.prototype =
    {
    _init: function( options )
    {
    // set slider options
    this.options = this._setOptions(options);

    //slidewrap
    this.$sliderUl = this.$slider.find(this.options.wrapElement);

    // slide elements
    this.$slides = this.$sliderUl.find(this.options.slideElement);

    // goto dots
    this.gotoButtons = this.$slider.find(‘.avia-slideshow-dots a’);

    //perma caption
    this.permaCaption = this.$slider.find(‘>.av-slideshow-caption’);

    // slide count
    this.itemsCount = this.$slides.length;

    // current image index
    this.current = 0;

    // current carousel index
    this.currentCarousel = 0;

    // carousel slide width
    this.slideWidthCarousel = ‘240’;

    //loop count
    this.loopCount = 0;

    // control if the slicebox is animating
    this.isAnimating = false;

    // css browser prefix like -webkit-, -moz-
    this.browserPrefix = $.avia_utilities.supports(‘transition’);

    // css3 animation?
    this.cssActive = this.browserPrefix !== false ? true : false;

    // css3D animation?
    this.css3DActive = document.documentElement.className.indexOf(‘avia_transform3d’) !== -1 ? true : false;

    //store the aviaVideoApi object for the current slide if available
    this.video = false;

    //if we have a bg slider no images were preloaded yet. in that case start preloading and attaching images
    if(this.options.bg_slider == true)
    {
    //create array that holds all image urls to preload
    this.imageUrls = [];

    //create a preloader icon to indicate loading
    this.loader = $.avia_utilities.loading(this.$slider);

    //preload the images ony by one
    this._bgPreloadImages();

    }
    else //if it was a default slider all images are already loaded and we can start showing the slider
    {
    //kickoff the slider: bind functions, show first slide, if active start the autorotation timer
    this._kickOff();
    }

    if(this.options.carousel === ‘yes’){
    this.options.animation = ‘carouselslide’;
    }
    },

    //set the slider options by first merging the efault options and the passed options, then checking the slider element if any data attributes overwrite the option set
    _setOptions: function(options)
    {
    var newOptions = $.extend( true, {}, $.AviaSlider.defaults, options ),
    htmlData = this.$slider.data(),
    i = “”;

    //overwritte passed option set with any data properties on the html element
    for (i in htmlData)
    {
    if (htmlData.hasOwnProperty(i))
    {
    if(typeof htmlData[i] === “string” || typeof htmlData[i] === “number” || typeof htmlData[i] === “boolean”)
    {
    newOptions[i] = htmlData[i];
    }
    }
    }

    return newOptions;
    },

    _prepareSlides: function(options)
    {
    //if its a mobile device find all video slides that need to be altered
    if(this.isMobile)
    {
    var alter = this.$slider.find(‘.av-mobile-fallback-image’);
    alter.each(function()
    {
    var current = $(this).removeClass(‘av-video-slide’).data({‘avia_video_events’: true, ‘video-ratio’:0}),
    fallback = current.data(‘mobile-img’),
    fallback_link = current.data(‘fallback-link’),
    appendTo = current.find(‘.avia-slide-wrap’);

    current.find(‘.av-click-overlay, .mejs-mediaelement, .mejs-container’).remove();

    if(!fallback)
    {
    $(‘<p class=”av-fallback-message”><span>Please set a mobile device fallback image for this video in your wordpress backend</span></p>’).appendTo(appendTo);
    }

    if(options && options.bg_slider)
    {
    current.data(‘img-url’, fallback);

    //if we got a fallback link we need to either replace the default link on mobile devices, or if there is no default link change the wrapping <div> to an
    if(fallback_link != “”)
    {
    if(appendTo.is(‘a’))
    {
    appendTo.attr(‘href’, fallback_link);
    }
    else
    {
    appendTo.find(‘a’).remove();
    appendTo.replaceWith(function(){
    var cur_slide = $(this);
    return $(“
    “).attr({‘data-rel’: cur_slide.data(‘rel’), ‘class’: cur_slide.attr(‘class’), ‘href’: fallback_link} ).append( $(this).contents() );
    });

    appendTo = current.find(‘.avia-slide-wrap’);
    }

    if($.fn.avia_activate_lightbox)
    {
    current.parents(‘#main’).avia_activate_lightbox();
    }
    }
    }
    else
    {
    var image = $(‘‘);
    var lightbox = false;

    if( ‘string’ == typeof fallback_link && fallback_link.trim() != ” )
    {
    image = $(‘
    ‘ + image + ‘‘);
    lightbox = true;
    }

    if( lightbox && $.fn.avia_activate_lightbox)
    {
    current.parents(‘#main’).avia_activate_lightbox();
    }

    current.find(‘.avia-slide-wrap’).append(image);
    }

    });
    }

    },

    //start preloading the background images
    _bgPreloadImages : function(callback)
    {
    this._getImageURLS();

    this._preloadSingle(0, function()
    {
    this._kickOff();
    this._preloadNext(1);
    });
    },

    //if we are using a background image slider, fetch the images from a data attribute and preload them one by one
    _getImageURLS: function()
    {
    var _self = this;

    //collect url strings of the images to preload
    this.$slides.each(function(i)
    {
    _self.imageUrls[i] = [];
    _self.imageUrls[i][‘url’] = $(this).data(“img-url”);

    //if no image is passed we can set the slide to loaded
    if(typeof _self.imageUrls[i][‘url’] == ‘string’)
    {
    _self.imageUrls[i][‘status’] = false;
    }
    else
    {
    _self.imageUrls[i][‘status’] = true;
    }
    });
    },

    _preloadSingle: function(key, callback)
    {
    var _self = this,
    objImage = new Image();

    if(typeof _self.imageUrls[key][‘url’] == ‘string’)
    {
    $(objImage).bind(‘load error’, function()
    {
    _self.imageUrls[key][‘status’] = true;
    _self.$slides.eq(key).css(‘background-image’,’url(‘ + _self.imageUrls[key][‘url’] + ‘)’);
    if(typeof callback == ‘function’) callback.apply( _self, [objImage, key] );
    });

    if(_self.imageUrls[key][‘url’] != “”)
    {
    objImage.src = _self.imageUrls[key][‘url’];
    }
    else
    {
    $(objImage).trigger(‘error’);
    }
    }
    else
    {
    if(typeof callback == ‘function’) callback.apply( _self, [objImage, key] );
    }
    },

    _preloadNext: function(key)
    {
    if(typeof this.imageUrls[key] != “undefined”)
    {
    this._preloadSingle(key, function()
    {
    this._preloadNext(key + 1);
    });
    }
    },

    //bind click events of slide controlls to the public functions
    _bindEvents: function()
    {
    var self = this,
    win = $( window );

    this.$slider.on(‘click’,’.next-slide’, $.proxy( this.next, this) );
    this.$slider.on(‘click’,’.prev-slide’, $.proxy( this.previous, this) );
    this.$slider.on(‘click’,’.goto-slide’, $.proxy( this.go2, this) );

    if(this.options.hoverpause)
    {
    this.$slider.on(‘mouseenter’, $.proxy( this.pause, this) );
    this.$slider.on(‘mouseleave’, $.proxy( this.resume, this) );
    }

    if(this.options.stopinfiniteloop && this.options.autoplay)
    {
    if(this.options.stopinfiniteloop == ‘last’)
    {
    this.$slider.on(‘avia_slider_last_slide’, $.proxy(this._stopSlideshow, this) );
    }
    else if(this.options.stopinfiniteloop == ‘first’)
    {
    this.$slider.on(‘avia_slider_first_slide’, $.proxy(this._stopSlideshow, this) );
    }
    }

    if (this.options.carousel === ‘yes’){
    // recalculate carousel dimensions on viewport size change
    win.on( ‘debouncedresize’, $.proxy( this._buildCarousel, this) );
    }
    else{
    win.on( ‘debouncedresize.aviaSlider’, $.proxy( this._setSize, this) );
    }

    //if its a desktop browser add arrow navigation, otherwise add touch nav
    if(!this.isMobile)
    {
    this.$slider.avia_keyboard_controls();
    }
    else
    {
    this.$slider.avia_swipe_trigger();
    }

    self._attach_video_events();
    },

    //kickoff the slider by binding all functions to slides and buttons, show the first slide and start autoplay
    _kickOff: function()
    {
    var self = this,
    first_slide = self.$slides.eq(0),
    video = first_slide.data(‘video-ratio’);

    // bind events to to the controll buttons
    self._bindEvents();

    this.$slider.removeClass(‘av-default-height-applied’);

    //show the first slide. if its a video set the correct size, otherwise make sure to remove the % padding
    if(video)
    {
    self._setSize(true);
    }
    else
    {
    if(this.options.keep_pading != true)
    {
    self.$sliderUl.css(‘padding’,0);
    self.$win.trigger(‘av-height-change’);
    }
    }

    self._setCenter();
    if ( this.options.carousel === ‘no’ ) {
    first_slide.css({visibility:’visible’, opacity:0}).avia_animate({opacity:1}, function()
    {
    var current = $(this).addClass(‘active-slide’);

    if(self.permaCaption.length)
    {
    self.permaCaption.addClass(‘active-slide’);
    }
    });
    }

    // start autoplay if active
    if( self.options.autoplay )
    {
    self._startSlideshow();
    }

    // prepare carousel if active
    if (self.options.carousel === ‘yes’) {
    self._buildCarousel();
    }

    self.$slider.trigger(‘_kickOff’);

    },

    _buildCarousel : function(){

    var self = this,
    stageWidth = this.$slider.outerWidth(),
    slidesWidth = parseInt(stageWidth / this.options.carouselSlidesToShow),
    windowWidth = window.innerWidth || $(window).width();

    // responsive carousel
    if ( this.options.carouselResponsive &&
    this.options.carouselResponsive.length &&
    this.options.carouselResponsive !== null) {

    for (var breakpoint in this.options.carouselResponsive){
    var breakpointValue = this.options.carouselResponsive[breakpoint][‘breakpoint’];
    var newSlidesToShow = this.options.carouselResponsive[breakpoint][‘settings’][‘carouselSlidesToShow’];

    if (breakpointValue >= windowWidth) {
    slidesWidth = parseInt(stageWidth / newSlidesToShow);
    this.options.carouselSlidesToShow = newSlidesToShow;
    }
    }
    }

    // set width and height for each slide
    this.slideWidthCarousel = slidesWidth;

    this.$slides.each(function(i){
    $(this).width(slidesWidth);
    });

    // set width for the UL
    var slideTrackWidth = slidesWidth * this.itemsCount;
    this.$sliderUl.width(slideTrackWidth).css(‘transform’, ‘translateX(0px)’);

    // hide nav if not needed
    if (this.options.carouselSlidesToShow >= this.itemsCount){
    this.$slider.find(‘.av-timeline-nav’).hide();
    }

    },

    //calculate which slide should be displayed next and call the executing transition function
    _navigate : function( dir, pos ) {

    if( this.isAnimating || this.itemsCount < 2 || !this.$slider.is(“:visible”) )
    {
    return false;
    }

    this.isAnimating = true;

    // current item’s index
    this.prev = this.current;

    // if position is passed
    if( pos !== undefined )
    {
    this.current = pos;
    dir = this.current > this.prev ? ‘next’ : ‘prev’;
    }

    // if not check the boundaries
    else if( dir === ‘next’ )
    {
    this.current = this.current < this.itemsCount – 1 ? this.current + 1 : 0;

    if( this.current === 0 && this.options.autoplay_stopper == 1 && this.options.autoplay )
    {
    this.isAnimating = false;
    this.current = this.prev;
    this._stopSlideshow();
    return false;
    }
    }
    else if( dir === ‘prev’ )
    {
    this.current = this.current > 0 ? this.current – 1 : this.itemsCount – 1;
    }

    //set goto button
    this.gotoButtons.removeClass(‘active’).eq(this.current).addClass(‘active’);

    //set slideshow size if carousel not in use
    if( this.options.carousel === ‘no’) {
    this._setSize();
    }

    //if we are using a background slider make sure that the image is loaded. if not preload it, then show the slide
    if(this.options.bg_slider == true)
    {
    if(this.imageUrls[this.current][‘status’] == true )
    {
    this[‘_’ + this.options.animation].call(this, dir);
    }
    else
    {
    this.loader.show();
    this._preloadSingle(this.current, function()
    {
    this[‘_’ + this.options.animation].call(this, dir);
    this.loader.hide();
    });
    }
    }
    else //no background loader -> images are already loaded
    {
    //call the executing function. for example _slide, or _fade. since the function call is absed on a var we can easily extend the slider with new animations
    this[‘_’ + this.options.animation].call(this, dir);
    }

    if(this.current == 0)
    {
    this.loopCount++;
    this.$slider.trigger(‘avia_slider_first_slide’);
    }
    else if(this.current == this.itemsCount – 1)
    {
    this.$slider.trigger(‘avia_slider_last_slide’);
    }
    else
    {
    this.$slider.trigger(‘avia_slider_navigate_slide’);
    }
    },

    //if the next slide has a different height than the current change the slideshow height
    _setSize: function(instant)
    {
    //if images are attached as bg images the slider has a fixed height
    if(this.options.bg_slider == true) return;

    var self = this,
    slide = this.$slides.eq(this.current),
    img = slide.find(‘img’),
    current = Math.floor(this.$sliderUl.height()),
    ratio = slide.data(‘video-ratio’),
    setTo = ratio ? this.$sliderUl.width() / ratio : Math.floor(slide.height()),
    video_height = slide.data(‘video-height’), //forced video height %. needs to be set only once
    video_toppos = slide.data(‘video-toppos’); //forced video top position

    this.$sliderUl.height(current).css(‘padding’,0); //make sure to set the slideheight to an actual value

    if(setTo != current)
    {
    if(instant == true)
    {
    this.$sliderUl.css({height:setTo});
    this.$win.trigger(‘av-height-change’);
    }
    else
    {
    this.$sliderUl.avia_animate({height:setTo}, function()
    {
    self.$win.trigger(‘av-height-change’);
    });
    }
    }

    this._setCenter();

    if(video_height && video_height!= “set”)
    {
    slide.find(‘iframe, embed, video, object, .av_youtube_frame’).css({height: video_height + ‘%’, top: video_toppos + ‘%’});
    slide.data(‘video-height’,’set’);
    }
    },

    _setCenter: function()
    {
    //if the image has a min width and is larger than the slider center it
    //positon img based on caption. right caption->left pos, left caption -> right pos
    var slide = this.$slides.eq(this.current),
    img = slide.find(‘img’),
    min_width = parseInt(img.css(‘min-width’),10),
    slide_width = slide.width(),
    caption = slide.find(‘.av-slideshow-caption’),
    css_left = ((slide_width – min_width) / 2);

    if(caption.length)
    {
    if(caption.is(‘.caption_left’))
    {
    css_left = ((slide_width – min_width) / 1.5);
    }
    else if(caption.is(‘.caption_right’))
    {
    css_left = ((slide_width – min_width) / 2.5);
    }
    }

    if(slide_width >= min_width)
    {
    css_left = 0;
    }

    img.css({left:css_left});
    },

    _carouselmove : function(){

    // var offset = (this.options.carouselSlidesToScroll*this.slideWidthCarousel)*this.currentCarousel;
    var offset = this.slideWidthCarousel*this.currentCarousel;
    this.$sliderUl.css(‘transform’, ‘translateX(-‘+offset+’px)’);

    },

    _carouselslide: function(dir){

    if (dir === ‘next’) {

    if (this.options.carouselSlidesToShow + this.currentCarousel < this.itemsCount){
    this.currentCarousel++;
    this._carouselmove();
    }
    }
    else if (dir === ‘prev’){
    if (this.currentCarousel > 0) {
    this.currentCarousel–;
    this._carouselmove();
    }
    }

    this.isAnimating = false;

    },

    _slide: function(dir)
    {
    var dynamic = false, //todo: pass by option if a slider is dynamic
    modifier = dynamic == true ? 2 : 1,
    sliderWidth = this.$slider.width(),
    direction = dir === ‘next’ ? -1 : 1,
    property = this.browserPrefix + ‘transform’,
    reset = {}, transition = {}, transition2 = {},
    trans_val = ( sliderWidth * direction * -1),
    trans_val2 = ( sliderWidth * direction) / modifier;

    //do a css3 animation
    if(this.cssActive)
    {
    property = this.browserPrefix + ‘transform’;

    //do a translate 3d transformation if available, since it uses hardware acceleration
    if(this.css3DActive)
    {
    reset[property] = “translate3d(” + trans_val + “px, 0, 0)”;
    transition[property] = “translate3d(” + trans_val2 + “px, 0, 0)”;
    transition2[property] = “translate3d(0,0,0)”;
    }
    else //do a 2d transform. still faster than a position “left” change
    {
    reset[property] = “translate(” + trans_val + “px,0)”;
    transition[property] = “translate(” + trans_val2 + “px,0)”;
    transition2[property] = “translate(0,0)”;
    }
    }
    else
    {
    reset.left = trans_val;
    transition.left = trans_val2;
    transition2.left = 0;
    }

    if(dynamic)
    {
    transition[‘z-index’] = “1”;
    transition2[‘z-index’] = “2”;
    }

    this._slide_animate(reset, transition, transition2);
    },

    _slide_up: function(dir)
    {
    var dynamic = true, //todo: pass by option if a slider is dynamic
    modifier = dynamic == true ? 2 : 1,
    sliderHeight = this.$slider.height(),
    direction = dir === ‘next’ ? -1 : 1,
    property = this.browserPrefix + ‘transform’,
    reset = {}, transition = {}, transition2 = {},
    trans_val = ( sliderHeight * direction * -1),
    trans_val2 = ( sliderHeight * direction) / modifier;

    //do a css3 animation
    if(this.cssActive)
    {
    property = this.browserPrefix + ‘transform’;

    //do a translate 3d transformation if available, since it uses hardware acceleration
    if(this.css3DActive)
    {
    reset[property] = “translate3d( 0,” + trans_val + “px, 0)”;
    transition[property] = “translate3d( 0,” + trans_val2 + “px, 0)”;
    transition2[property] = “translate3d(0,0,0)”;
    }
    else //do a 2d transform. still faster than a position “left” change
    {
    reset[property] = “translate( 0,” + trans_val + “px)”;
    transition[property] = “translate( 0,” + trans_val2 + “px)”;
    transition2[property] = “translate(0,0)”; }
    }
    else
    {
    reset.top = trans_val;
    transition.top = trans_val2;
    transition2.top = 0;
    }

    if(dynamic)
    {
    transition[‘z-index’] = “1”;
    transition2[‘z-index’] = “2”;
    }
    this._slide_animate(reset, transition, transition2);
    },

    //slide animation: do a slide transition by css3 transform if possible. if not simply do a position left transition
    _slide_animate: function( reset , transition , transition2 )
    {

    var self = this,
    displaySlide = this.$slides.eq(this.current),
    hideSlide = this.$slides.eq(this.prev);

    hideSlide.trigger(‘pause’);
    if( !displaySlide.data(‘disableAutoplay’) ) displaySlide.trigger(‘play’);

    displaySlide.css({visibility:’visible’, zIndex:4, opacity:1, left:0, top:0});
    displaySlide.css(reset);

    hideSlide.avia_animate(transition, this.options.transitionSpeed, this.options.easing);

    var after_slide = function()
    {
    self.isAnimating = false;
    displaySlide.addClass(‘active-slide’);
    hideSlide.css({visibility:’hidden’}).removeClass(‘active-slide’);
    self.$slider.trigger(‘avia-transition-done’);
    }

    if(self.options.show_slide_delay > 0)
    {
    setTimeout(function() { displaySlide.avia_animate(transition2, self.options.transitionSpeed, self.options.easing, after_slide); },self.options.show_slide_delay);
    }
    else
    {
    displaySlide.avia_animate(transition2, self.options.transitionSpeed, self.options.easing, after_slide);
    }

    },

    //simple fade transition of the slideshow
    _fade: function()
    {
    var self = this,
    displaySlide = this.$slides.eq(this.current),
    hideSlide = this.$slides.eq(this.prev),
    properties = {visibility:’visible’, zIndex:3, opacity:0},
    fadeCallback = function()
    {
    self.isAnimating = false;
    displaySlide.addClass(‘active-slide’);
    hideSlide.css({visibility:’hidden’, zIndex:2}).removeClass(‘active-slide’);
    self.$slider.trigger(‘avia-transition-done’);

    };

    hideSlide.trigger(‘pause’);
    if( !displaySlide.data(‘disableAutoplay’) ) displaySlide.trigger(‘play’);

    if(self.options.fullfade == true)
    {
    hideSlide.avia_animate({opacity:0}, 200, ‘linear’, function()
    {
    displaySlide.css(properties).avia_animate({opacity:1}, self.options.transitionSpeed, ‘linear’,fadeCallback);
    });
    }
    else
    {
    displaySlide.css(properties).avia_animate({opacity:1}, self.options.transitionSpeed/2, ‘linear’, function()
    {
    hideSlide.avia_animate({opacity:0}, 200, ‘linear’, fadeCallback);
    });
    }

    },

    /************************************************************************
    Video functions
    *************************************************************************/

    //bind events to the video that tell the slider to autorotate once a video has been played
    _attach_video_events: function()
    {
    var self = this, $html = $(‘html’);

    self.$slides.each(function(i)
    {
    var currentSlide = $(this),
    caption = currentSlide.find(‘.caption_fullwidth, .av-click-overlay’),
    mejs = currentSlide.find(‘.mejs-mediaelement’);

    if(currentSlide.data(‘avia_video_events’) != true)
    {
    currentSlide.data(‘avia_video_events’, true);

    currentSlide.on(‘av-video-events-bound’, { slide: currentSlide, wrap: mejs , iteration: i , self: self }, onReady);

    currentSlide.on(‘av-video-ended’, { slide: currentSlide , self: self}, onFinish);

    currentSlide.on(‘av-video-play-executed’, function(){ setTimeout(function(){ self.pause() }, 100); });

    caption.on(‘click’, { slide: currentSlide }, toggle);

    // also if the player was loaded before the _bindEvents function was bound trigger it manually
    if(currentSlide.is(‘.av-video-events-bound’)) currentSlide.trigger(‘av-video-events-bound’);
    }
    });

    //helper functions
    function onReady( event )
    {
    //autostart for first slide
    if(event.data.iteration === 0)
    {
    event.data.wrap.css(‘opacity’,0);
    if(!event.data.self.isMobile && !event.data.slide.data(‘disableAutoplay’))
    {
    event.data.slide.trigger(‘play’);

    setTimeout(function(){ event.data.wrap.avia_animate({opacity:1}, 400); }, 50);
    }
    else if ($html.is(‘.avia-msie’) && !event.data.slide.is(‘.av-video-service-html5’))
    {
    /*
    * Internet Explorer fires the ready event for external videos once they become visible
    * as oposed to other browsers which always fire immediately.
    */
    if( !event.data.slide.data(‘disableAutoplay’) ) event.data.slide.trigger(‘play’);
    }

    }

    function onFinish( event )
    {
    //if the video is not looped resume the slideshow
    if(!event.data.slide.is(‘.av-single-slide’) && !event.data.slide.is(‘.av-loop-video’))
    {
    event.data.slide.trigger(‘reset’);
    self._navigate( ‘next’ );
    self.resume();
    }

    //safari 8 workaround for self hosted videos which wont loop by default
    if(event.data.slide.is(‘.av-loop-video’) && event.data.slide.is(‘.av-video-service-html5’))
    {
    if($html.is(‘.avia-safari-8’))
    {
    setTimeout(function(){ event.data.slide.trigger(‘play’); },1);
    }
    }
    }

    function toggle( event )
    {
    if(event.target.tagName != “A”)
    {
    event.data.slide.trigger(‘toggle’);
    }
    }

    },

    /************************************************************************
    Slideshow control functions
    *************************************************************************/

    _timer: function(callback, delay, first)
    {
    var self = this, start, remaining = delay;

    self.timerId = 0;

    this.pause = function() {
    window.clearTimeout(self.timerId);
    remaining -= new Date() – start;
    };

    this.resume = function() {
    start = new Date();
    self.timerId = window.setTimeout(callback, remaining);
    };

    this.destroy = function()
    {
    window.clearTimeout(self.timerId);
    };

    this.resume(true);
    },

    //start autorotation
    _startSlideshow: function()
    {
    var self = this;

    this.isPlaying = true;

    this.slideshow = new this._timer( function()
    {
    /*
    var videoApi = self.$slides.eq(self.current).data(‘aviaVideoApi’)
    if(!videoApi){}
    */

    self._navigate( ‘next’ );

    if ( self.options.autoplay )
    {
    self._startSlideshow();
    }

    }, (this.options.interval * 1000));
    },

    //stop autorotation
    _stopSlideshow: function()
    {
    if ( this.options.autoplay ) {

    this.slideshow.destroy();
    this.isPlaying = false;
    this.options.autoplay = false;
    }
    },

    // public method: shows next image
    next : function(e)
    {
    e.preventDefault();
    this._stopSlideshow();
    this._navigate( ‘next’ );
    },

    // public method: shows previous image
    previous : function(e)
    {
    e.preventDefault();
    this._stopSlideshow();
    this._navigate( ‘prev’ );
    },

    // public method: goes to a specific image
    go2 : function( pos )
    {
    //if we didnt pass a number directly lets asume someone clicked on a link that triggered the goto transition
    if(isNaN(pos))
    {
    //in that case prevent the default link behavior and set the slide number to the links hash
    pos.preventDefault();
    pos = pos.currentTarget.hash.replace(‘#’,”);
    }

    pos -= 1;

    if( pos === this.current || pos >= this.itemsCount || pos < 0 )
    {
    return false;
    }

    this._stopSlideshow();
    this._navigate( false, pos );

    },

    // public method: starts the slideshow
    // any call to next(), previous() or goto() will stop the slideshow autoplay
    play : function()
    {
    if( !this.isPlaying )
    {
    this.isPlaying = true;

    this._navigate( ‘next’ );
    this.options.autoplay = true;
    this._startSlideshow();
    }

    },

    // public methos: pauses the slideshow
    pause : function()
    {
    if( this.isPlaying )
    {
    this.slideshow.pause();
    }
    },

    // publiccmethos: resumes the slideshow
    resume : function()
    {
    if( this.isPlaying )
    {
    this.slideshow.resume();
    }
    },

    // public methos: destroys the instance
    destroy : function( callback )
    {
    this.slideshow.destroy( callback );
    }

    }

    //simple wrapper to call the slideshow. makes sure that the slide data is not applied twice
    $.fn.aviaSlider = function( options )
    {
    return this.each(function()
    {
    var self = $.data( this, ‘aviaSlider’ );

    if(!self)
    {
    self = $.data( this, ‘aviaSlider’, new $.AviaSlider( options, this ) );
    }
    });
    }

    })( jQuery );

    Thanks again for your help!

    Michael F.

    #959994

    Hi,

    No, you only need to replace the exact function that Victoria provided please.

    Thank you

    Best regards,
    Basilis

    #960153

    Hi Basilis,

    you mean replace the whole above text by Victorias text?

    #960902

    Hi werbeagenturlauf,

    I wrote you the FUNCTION to replace, not the whole file.

    Best regards,
    Victoria

    #970782

    Hi

    I have the same issue. I replaced the function and now it works better on mobile (portrait) but on mobile landscape it still shows [Object object].

    Please could you take a look?
    Thanks,
    Tim

    #971140

    Hi green-finch,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Have you tried the suggestions posted above?

    Best regards,
    Victoria

    #971158

    Hi

    Thanks for getting back so quickly. I’ve changed the code as above but when I use my mobile phone in landscape mode it shows a small bit of the background – just enough to display [Object object].

    The best outcome would be that the video is shown on landscape mobile phones.

    I’ve come up with a work-around so that the whole image slider is hidden on smaller screens, and that a static picture is shown but that is second-best.

    Please see login details in the private content.

    Thanks, Tim

    #971804

    Hi green-finch,

    I think second best can be good for now, or you can use a video element to show on mobiles if the video is important, until our devs come up with a better solution.

    Best regards,
    Victoria

    #985901

    Hi Victoria,

    have your Developers found a clean Solution for this Problem yet? Please give me a Feedback. Thanks
    Michael F

    #986876

    Hi green-finch,

    Please check this thread

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #986954

    Thanks for keeping this open. I’m confused, though. There doesn’t appear to be anything new here, and still no fix for the problem unless I’m missing something.

    #987069

    Hi green-finch,

    I’m sorry for the confusion. Maybe it is better to use Enfold 4.4 for now, till the next version comes out?

    Best regards,
    Victoria

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.