Image slideshow not working on firefox devices

[snab-gab]

To answer to your comment (sorry, I'm just discovering github universe).

Here is a link of what I'm trying to do : http://www.gabrodrigues.com/teste

I got troubles on every Firefox devices (only). Or there no image, or the image scale is not good.

[snab-gab]

Maybe it is possible to do horizontal slide with the new commit you've made ?

[alvarotrigo]

It seems there's a problem with vertical centering (display:table and display:table-cell) and the height:100% of its content.

I will check it out. Thanks for reporting it!

[snab-gab]

Hope that it don't come from the changes I have made (only on html/css) and that I don't make you lose your time... Thanks !

[alvarotrigo]

The problem can be seen also with the backgrounds.html demo inside the examples folder provided in the plugin if you change the property verticalCentered to true:

        $(document).ready(function() {
            $.fn.fullpage({
                'verticalCentered': true
            });
        });

[alvarotrigo]

Check out the last commit. Download the last version and let me know if it is fixed for you in Firefox or IE 9.

[alvarotrigo]

By the way, it would be nice if you want to add your site to the section who is using fullPage.js on the documentation. :)

[alvarotrigo]

Also, I would recommend you to load the images on the fly in order to avoid such a big loading of the site.

Simply use the active class added on each section / slide when is active:

#slide1 {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
}

#slide1.active{
    background: url(../img/portraits/01.jpg) no-repeat center;
}

Or if you want to deal with callbacks you could use the callbacks onLeave or afterLoad and then do something like:

 $.fn.fullpage({ 
        onLeave: function(index, nextIndex, direction){
            //after leaving section 1
            if(index == '1' && direction =='down'){
                //Going to section 2!
                $('#section2').find('.slide').addClass('loadImage');
            }
        }
    });

If you want to make it more generic instead of having to create a condition for each slide or section, you could use this instead:

 $.fn.fullpage({ 
        onLeave: function(index, nextIndex, direction){
            var leavingSection = $(this);
            var slide = leavingSection.find('.slide.active');

            //is there any slide in the section ? 
            if(typeof slide !== 'undefined'){
                destination = slide;
            }else{
                destination = leavingSection;
            }

            destination.addClass('loadImage');
        }
    });

And in your CSS had something like:

#slide1 {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
}

#slide1.loadImage{
    background: url(../img/portraits/01.jpg) no-repeat center;
}

This way the images won't be load when the user access the site but when he is about to arrive to one section.
It might be better to have the first slide always loaded (as it will be shown on scrolling) but maybe the not the rest of slides until the user reaches the section. (or the previous section or whatever)

Just an idea :)

[snab-gab]

It seems to be ok ! Thanks a lot !!

And thanks for this recommendation I will try it as soon as possible.

For the section "who is using", no problem, just let me finish the work and put it on it's future url (i will communicate it to you) :)

[alvarotrigo]

Ok. Thanks :)

[snab-gab]

Hi,

Now that I've finished the choice and work on different pictures, I've got a few last questions before (finally!!!) to put my website online : http://www.gabrodrigues.com/teste

• I think there is a problem with the page resize on android mobile devices when putting the phone on horizontal and then vertical, the height don't change and is keeping the first height called.
  Do you know where does it come from ?
• I was also wondering how to change the font size on mobile screen ? Buttons, logotypes and texts are to small to read or interact on it while it is not a real problem on tablets and computer screens.

[alvarotrigo]

Hi @snab-gab, first of all, download the last version of the plugin (the .js and the .css file). The last version is the 1.2.85 and you still in the 1.1 which has been improved quite a lot.

Then, let me know if you still having that problem.

About your second point, this is beyond the plugin topic. You would need to use media queries or use the viewport meta tag in some specific way. You could also detect whether is a mobile phone or not and load another CSS style sheet. Google about it. I can not advice you on that.

[snab-gab]

Hi, Thanks for your answer.

I donwloaded the last version and it doesn't change anything for the resizing problem. Here is a screenshot of what it does.

For the second point, i was wondering if this part of code could change smtg ? :

• Resizing of the font size depending on the window size as well as some of the images on the site.
  */
  function resizeMe(displayHeight, displayWidth) {
  //Standard height, for which the body font size is correct
  var preferredHeight = 825;
  var windowSize = displayHeight;

      /* Problem to be solved
  
      if (displayHeight < 825) {
          var percentage = (windowSize * 100) / preferredHeight;
          var newFontSize = percentage.toFixed(2);
  
          $("img").each(function() {
              var newWidth = ((80 * percentage) / 100).toFixed(2);
              $(this).css("width", newWidth + '%');
          });
      } else {
          $("img").each(function() {
              $(this).css("width", '');
          });
      }*/
  
      if (displayHeight < 825 || displayWidth < 900) {
          if (displayWidth < 900) {
              windowSize = displayWidth;
              preferredHeight = 900;
          }
          var percentage = (windowSize * 100) / preferredHeight;
          var newFontSize = percentage.toFixed(2);
  
          $("body").css("font-size", newFontSize + '%');
      } else {
          $("body").css("font-size", '100%');
      }
  }
  

By the way, the website is online, If you're still ok to add it to the website using fullsize.js list, here is a link : www.carlphot.com

Thanks for your time answering my questions :)

[alvarotrigo]

I don't have an android device and I can not test it by my own. I will take a look anyway and let you know.
By the way, I still recommending you to upated to the last version, there has been many changes internally which makes the plugin behave much more better. You won't have to change anything, just download the new version and import it.

Also, you are importing the minified version and the full one. Just import one. You are slowing down the loading of your site and adding unnecessary code.

I would also recommend you to load the first slide image of your sections on load, so the user will always see the first image and the transition correctly. Then, you can still load the rest of the slides dynamically as you are doing.

About the second point. You can call the resizeMe method on load using the afterRender callback.
I´ve posted a solution in this post:
#81 (comment)

Notice that you have to add the ´resizeMe´ function outside the plugin to be able to call it on the callback.

[snab-gab]

Ok, I will try this. Thanks a lot !

[ajzeffer]

This was exactly what I was looking for thanks !

[lkraav]

Simply use the active class added on each section / slide when is active

Follow-up comment here for somebody who just launched the first fullpage.js site: this CSS-only based solution has multiple drawbacks - image loading on arrival is too slow, flicker is clearly visible both on leaving the previous and arriving on the next slide. This could possibly be improved with adjusting .active class timings: more eager for the next slide, and lazy remove on previous slide.

[ghost]

This could possibly be improved with adjusting .active class timings: more eager for the next slide, and lazy remove on previous slide.

@lkraav Also interested in lazy loading 20+ slides of a section. Are you thinking to always have 2 slides loaded starting with the initial slide and then as the user progresses through the slide show it keeps always loading the next 2 slides? I will see if I can come up with a fiddle for such a function. Feel free to add your thoughts about this also please if you find time, thank you.

[thisisfed]

This is a nice trick but is there any way to keep the images visibles when leaving the section? Cause right now, as soon as I leave the section the image disappear immediately and it's quite weird :)

[alvarotrigo]

This is a nice trick but is there any way to keep the images visibles when leaving the section?

Then you'll have to load them before leaving the section, which is not easy as you never know to which section is the user going to go next. (if provided a menu or nav)

If bandwidth is not a problem for you, I would encourage you to load them all after load, so they won't influence the loading time of the page. You can do something like this:

$(window).load(onLoad);

//loading all images from all sections
function onLoad(){
    $('.fp-section').addClass('loadImage');
}

And use the loadImage css approach I mentioned before:

#slide1 {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
}

#slide1.loadImage{
    background: url(../img/portraits/01.jpg) no-repeat center;
}

[thisisfed]

Thanks Alvaro! I don't know why the javascript isn't working in my case, if I inspect the page it doesn't add that "loadImage" class.