Git Product home page Git Product logo

Comments (5)

9bitStudios avatar 9bitStudios commented on August 13, 2024

Hi there Zach--

What are you using to load the images (and remove the loading.gif once the image is loaded)?

from flexisel.

ashe140 avatar ashe140 commented on August 13, 2024

I guess im not certain exactly what you mean.

I have the html flexisel div followed by my unordered list and thats basically it. If you are referring to scripts, I have a preloader script that calls the .gif on loading images while they download.

This is the preloader script:

// JavaScript Document

    jQuery(function(){          
   jQuery("#content img").wrap("<div />");  
    }); 

$.fn.preloader = function(options){

var defaults = {
                 delay:200,                 
                 check_timer:300,
                 ondone:function(){ },
                 oneachload:function(image){  },
                 fadein:500 
                };

// variables declaration and precaching images and parent container
 var options = $.extend(defaults, options),
 root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) ,  timer ,  counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,

 init = function(){

    timer = setInterval(function(){

        if(counter>=checkFlag.length)
        {
        clearInterval(timer);
        options.ondone();
        return;
        }

        for(i=0;i<images.length;i++)
        {
            if(images[i].complete==true)
            {
                if(checkFlag[i]==false)
                {
                    checkFlag[i] = true;
                    options.oneachload(images[i]);
                    counter++;

                    delaySum = delaySum + options.delay;
                }

                $(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
                function(){ $(this).parent().removeClass("preloader");   });            

            }
        }

        },options.check_timer) 


     } ;

images.each(function(){

    if($(this).parent(options.preload_parent).length==0)
    $(this).wrap("<div class='preloader' />");
    else
    $(this).parent().addClass("preloader");

    checkFlag[i++] = false;


    }); 
images = $.makeArray(images); 


var icon = jQuery("<img />",{

    id : 'loadingicon' ,
    src : '../img/loader.gif'

    }).hide().appendTo("body");



timer = setInterval(function(){

    if(icon[0].complete==true)
    {
        clearInterval(timer);
        init();
         icon.remove();
        return;
    }

    },100);

}

from flexisel.

9bitStudios avatar 9bitStudios commented on August 13, 2024

The big issue is that the "preloader" class is not getting removed on the cloned items. It's kind of up to the preloader script to find those items. As far as I can tell, I don't really know what I could change in the plugin code to affect the behavior of something that is acting on it externally. But there are few things I could suggest trying...

  1. Perhaps look at changing the timing of when the events are called. Flexisel is called on the window.load event which occurs after the document.ready event. This could be a potential source of issues occurring.
  2. In the Flexisel code, the point at which everything in the carousel is initialized is in the initalizeItems() method. You could try calling something in your script loader at the end of that method, or pass in a callback function in the options.
  3. There is also a clone: false; option that you can pass in (see docs). Since the cloned items seem to be the source of the problem, you could just try not cloning them.

Take a look at some of those and see if any of those work for you.

from flexisel.

ashe140 avatar ashe140 commented on August 13, 2024

Is there a way to repeat the images loaded into Flexisel without running that Clone Option ?

from flexisel.

9bitStudios avatar 9bitStudios commented on August 13, 2024

Not currently. However at the end of the scrollLeft and the scrollRight methods you can see where the reordering of items occurs to create the infinite scroll when clone is true. You could probably just modify that for the non-cloned implementation.

from flexisel.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.