vvvmax / unitegallery

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:
http://unitegallery.net
MIT License
530 stars 158 forks source link

Callback before loading image #7

Open aflin opened 9 years ago

aflin commented 9 years ago

I'm using "minimal" preload and need to download and manipulate images before they are displayed. I've added the following to your code:

        /**
         * 
         * set item to slide
         */
        function setImageToSlide(objSlide, objItem, isForce, isCallback){
                var setimage=g_options.slider_setimage; 

                //allow us to manipulate the object items before they are set -af
                if (!isCallback && typeof setimage=='function') {
                        setimage(objSlide, objItem, isForce, function(oS,oI,iF) {
                                setImageToSlide(oS,oI,iF,true); 
                        });
                }

                var objItemWrapper = objSlide.children(".ug-item-wrapper");

Please consider adding.

vvvmax commented 9 years ago

How you want to manipulate image before add? :) please give me an example.

On Thursday, May 21, 2015, aflin notifications@github.com wrote:

I'm using "minimal" preload and need to download and manipulate images before they are displayed. I've added the following to your code:

    /**         *          * set item to slide         */
    function setImageToSlide(objSlide, objItem, isForce, isCallback){
            var setimage=g_options.slider_setimage;

            //allow us to manipulate the object items before they are set -af
            if (!isCallback && typeof setimage=='function') {
                    setimage(objSlide, objItem, isForce, function(oS,oI,iF) {
                            setImageToSlide(oS,oI,iF,true);
                    });
            }

            var objItemWrapper = objSlide.children(".ug-item-wrapper");

Please consider adding.

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/7.

aflin commented 9 years ago

The images I am displaying are encrypted and on google drive. Instead of a url, I put the identifier of the image in data.image prefixed with "id:". Before it is loaded, I grab the id, download the image, decrypt it, change into a blob and make a url of it (the decryptAndShow() function). I then add the url to the objItem and use canvas to make a thumbnail, which I also add after the fact.

It seems to work fine using "minimal" preload, but I've done nothing else to make it work if doing more preloading than that.

gal=unite.unitegallery({
        slider_scale_mode: "fit",
        gallery_width:"100%",           
        gallery_height:"100%",
        slider_textpanel_enable_bg: false,
        slider_setimage:function(slide,image,force,callback){
                if (image.urlImage.indexOf('id:')==0) {
                        var ef=elfById[ image.urlImage.slice(3) ];
                        decryptAndShow(self, ef, function (u) { 
                                image.altUrl=u;
                                callback(slide,image,force);
                                file2thumb(self, ef, function (tu) {
                                        var tmb=$('.ug-thumbs-strip-inner').children().eq(image.index);
                                        tmb.find('.ug-thumb-error').hide();
                                        tmb.find('img').attr('src',tu).css({width:'88px',height:'50px'}).show();
                                });
                        });
                } else {
                        callback(slide,image,force);
                }
        }                       
});

Forgot to say, I also changed this line in setImageToSlide:

 var urlImage = objItem.altUrl || objItem.urlImage;  //-af

I am getting some "GET id:0B7CmCEh9zQIRMlAyRnpmSzM1WG8 net::ERR_UNKNOWN_URL_SCHEME" errors on the console, so I'm probably not changing the url soon enough. However it doesn't seem to affect the display of images.

Thanks again, -A-

vvvmax commented 9 years ago

ok, it's cool what you did, love it. I'll think about a way to modify url and modify thumbs url functionality for later updates. Thanks.

About the google Drive images, I'll have PHP CMS soon that will support google drive / picasa together with another social sources.

On Thu, May 21, 2015 at 9:01 AM, aflin notifications@github.com wrote:

The images I am displaying are encrypted and on google drive. Instead of a url, I put the identifier of the image in data.image prefixed with "id:". Before it is loaded, I grab the id, download the image, decrypt it, change into a blob and make a url of it (the decryptAndShow() function). I then add the url to the objItem and use canvas to make a thumbnail, which I also add after the fact.

It seems to work fine using "minimal" preload, but I've done nothing else to make it work if doing more preloading than that.

gal=unite.unitegallery({ slider_scale_mode: "fit", gallery_width:"100%", gallery_height:"100%", slider_textpanel_enable_bg: false, slider_setimage:function(slide,image,force,callback){ if (image.urlImage.indexOf('id:')==0) { var ef=elfById[ image.urlImage.slice(3) ]; decryptAndShow(self, ef, function (u) { image.altUrl=u; callback(slide,image,force); file2thumb(self, ef, function (tu) { var tmb=$('.ug-thumbs-strip-inner').children().eq(image.index); tmb.find('.ug-thumb-error').hide(); tmb.find('img').attr('src',tu).css({width:'88px',height:'50px'}).show(); }); }); } else { callback(slide,image,force); } } });

Forgot to say, I also changed this line in setImageToSlide:

var urlImage = objItem.altUrl || objItem.urlImage; //-af

I am getting some "GET id:0B7CmCEh9zQIRMlAyRnpmSzM1WG8 net::ERR_UNKNOWN_URL_SCHEME" errors on the console, so I'm probably not changing the url soon enough. However it doesn't seem to affect the display of images.

Thanks again, -A-

— Reply to this email directly or view it on GitHub https://github.com/vvvmax/unitegallery/issues/7#issuecomment-104148400.