JonDesign's SmoothGallery 2.0 !

JonDesign's SmoothGallery Forums

You are not logged in.

Pages: 1

 

#1 2007-03-04 11:01:56

keinerweiss
New member
Registered: 2007-03-04
Posts: 4

Fix: "gallery preloads all images"

Hi,

I read about the problem that all images and thumbnails get preloaded and this is very bad when someone has to pay for network traffic.

I tested and it's true, all images get preloaded.

I implemented the preload of the first image and on every request a preload of the current image and the images surrounding it.

The preloading of the surrounding images ensures proper smooth blinding to the next or previous image.

jd.gallery.js : ~ line 158

Code:

    constructElements: function() {
        el = this.galleryElement;
        this.maxIter = this.galleryData.length;
        var currentImg;
        for(i=0;i<this.galleryData.length;i++)
        {
            var currentImg = new Fx.Style(
                new Element('div').addClass('slideElement').setStyles({
                    'position':'absolute',
                    'left':'0px',
                    'right':'0px',
                    'margin':'0px',
                    'padding':'0px',
                    // removed because it preloads every image
                    //'backgroundImage':"url('" + this.galleryData[i].image + "')",
                    'backgroundPosition':"center center",
                    'opacity':'0'
                }).injectInside(el),
                'opacity',
                {duration: this.options.fadeDuration}
            );
            this.galleryElements[parseInt(i)] = currentImg;
        }
        this.preloadImage(0);
    },

jd.gallery.js : ~ line 200

Note the new function preloadImage(num)

Code:

    nextItem: function() {
        this.fireEvent('onNextCalled');
        this.nextIter = this.currentIter+1;
        if (this.nextIter >= this.maxIter)
            this.nextIter = 0;
        this.galleryInit = 0;
        
        this.preloadImage(this.nextIter-1);
        this.preloadImage(this.nextIter);
        this.preloadImage(this.nextIter+1);
        
        this.goTo(this.nextIter);
    },
    prevItem: function() {
        this.fireEvent('onPreviousCalled');
        this.nextIter = this.currentIter-1;
        if (this.nextIter <= -1)
            this.nextIter = this.maxIter - 1;
        this.galleryInit = 0;
        
        this.preloadImage(this.nextIter-1);
        this.preloadImage(this.nextIter);
        this.preloadImage(this.nextIter+1);
        
        this.goTo(this.nextIter);
    },
    preloadImage : function(num) {
        if(!this.galleryElements[num]) return;
        var e = this.galleryElements[num].element;
        if(!e.style.backgroundImage) {
            e.style.backgroundImage = "url('" + this.galleryData[num].image + "')";
        }
    },
    goTo: function(num) {
        this.clearTimer();
        
        this.preloadImage(num-1);
        this.preloadImage(num);
        this.preloadImage(num+1);
        
        if (this.options.embedLinks)
            this.clearLink();
        if (this.options.showInfopane)
        {
            this.slideInfoZone.clearChain();
            this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
        } else
            this.changeItem.delay(500, this, num);
        if (this.options.embedLinks)
            this.makeLink(num);
        this.prepareTimer();
        /*if (this.options.showCarousel)
            this.clearThumbnailsHighlights();*/
    },

I've tested in IE6, Firefox 2.0 and  Opera 9.

Best Regards,
Rüdiger Marwein

Offline

 

#2 2007-03-04 11:11:31

keinerweiss
New member
Registered: 2007-03-04
Posts: 4

Re: Fix: "gallery preloads all images"

Hi again,

I forgot something.

The image-tags used in the imageElement div's do also cause loading the image.

So I replaced the img-tags with div tags.

This looks like this:

Code:

<div class="imageElement" style="display:none;">
    <h3>##TITLE##</h3>
    <p>##DESCRIPTION##</p>
    <a href="##FILE_BIG##" target="bigpic" title="Orginalgröße" class="open"></a>

    <!-- Here we go -->
    <div src="##FILE_NORMAL##" class="full" />
    <div src="##FILE_SMALL##" class="thumbnail" />
</div>

Then its necessary to tell the gallery where it finds the image sources to generate the actual gallery on initialization:

Code:

MyGallery = new gallery($(htmlElement), {
    timed: false,
    imageSelector: "div.full",
    thumbnailSelector: "div.thumbnail"
});

After I changed this, another bug appeared, caused by trying to directly access .src ... this is the fix:

jd.gallery.js : ~ line 141

Code:

if ((!options.useThumbGenerator) && (options.showCarousel)) {
    Object.extend(elementDict, {
        thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
    });
}

Best Regards
Rüdiger Marwein

Offline

 

#3 2007-03-24 08:35:31

michuw
New member
Registered: 2007-03-24
Posts: 1

Re: Fix: "gallery preloads all images"

Fix Seems to be working.
Just note: if you're using slightbox && carousel remember to make changes in slightbox.js too - getProperty('src').

Offline

 

#4 2007-04-26 00:34:50

PROKA
New member
Registered: 2007-04-18
Posts: 6

Re: Fix: "gallery preloads all images"

Cool, thanks, the only thing is that I've put

    <div src="##FILE_NORMAL##" class="full" ></div>
    <div src="##FILE_SMALL##" class="thumbnail" ></div>

Offline

 

#5 2007-05-26 07:14:58

cs42
New member
Registered: 2007-05-26
Posts: 1

Re: Fix: "gallery preloads all images"

Thanks for this "fix". I have two remarks, though:

1. As nextItem and prevItem are both calling goTo it is sufficient to call the preloading function in goTo
2. For the thumbnails I still use img tags. This way you can assign alt texts which might be nice for search engines. The thumbnails have to be loaded on gallery construction anyway so this can be done withouth the use of javascript.

Offline

 

#6 2007-05-26 13:34:05

jamesclavel
New member
Registered: 2007-05-26
Posts: 2

Re: Fix: "gallery preloads all images"

hi, i just tried this one and yes it did not preload all image in one time but i have one problem. the first image will not be loaded on page load. how would i preload the first image. i also did what "cs42" post... using <img> on thumbnails. hope for a reply soon.

-- james clavel

Offline

 

#7 2007-08-25 07:52:37

Vincio
New member
Registered: 2007-08-24
Posts: 2

Re: Fix: "gallery preloads all images"

I used title instead of src so is xhtml valid smile
Thanks for the fix! Is great!

Offline

 

#8 2008-01-08 10:09:22

giorgio79
New member
Registered: 2008-01-08
Posts: 6

Re: Fix: "gallery preloads all images"

This does not work for me in the latest gallery release.

Getting some Javascript errors in Firebug, anyone adapted this to the latest gallery?

Offline

 

#9 2008-04-03 15:49:40

5h4rk
New member
Registered: 2008-01-29
Posts: 3

Re: Fix: "gallery preloads all images"

Does this work for the gallery set as well?

Thanks

Offline

 

#10 2008-08-16 18:14:48

lionwood
New member
Registered: 2008-08-16
Posts: 1

Re: Fix: "gallery preloads all images"

I have made all of these changes and it is working great, with the exception of one thing: The text in the info pane disappeared. The infopane is there, but no text shows up (neither the h3 or p elements for each picture). The descriptions in the carousel all show up as 'undefined' as well. Any ideas?

Gallery located here: http://www.lionwoodvisual.com/TEST/McKe … allery.php

Last edited by lionwood (2008-08-16 18:37:24)

Offline

 

 

Pages: 1

Board footer

Navigation

Copyright 2005-2007 JonDesign (Jonathan Schemoul).