An extra thumbnail showing with jQuery 1.4 and above

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1. Open the gallery with more than 1 page
2. Move to next page and back couple of times continuously

What is the expected output?
The transition should be smooth and extra thumbnail should not appear.

What do you see instead?
An extra thumbnail will show up. Also the transition between pages is not 
smooth as in version 1.3.2

What version of the product are you using? On what operating system?
Using latest version of galleriffic "jquery.galleriffic.js" and 
"jquery-1.4.2.js"

Please provide any additional information below.
As per above

Original issue reported on code.google.com by abhishek...@gmail.com on 23 Jul 2010 at 11:48

Attachments:

screen.png

GoogleCodeExporter commented 9 years ago

[deleted comment]

GoogleCodeExporter commented 9 years ago

Got the exact same problem with jquery 1.4, had to switch back to 1.3.2.
Anyone got a solution?

Original comment by turboju...@gmail.com on 19 Aug 2010 at 2:31

GoogleCodeExporter commented 9 years ago

Same problem for me. Probably I'll have to abandon this control since seems is 
not longer supported by creator :(

Original comment by claudior...@gmail.com on 19 Aug 2010 at 2:35

GoogleCodeExporter commented 9 years ago

I've been investigating this problem yesterday and today.
It occurs when using event onSlideChange, to let the previous image fade out 
and the next image fade in, only when switching pages.
Letting the next image fade in (in the same event) causes it to show 
prematurely as an extra thumbnail, with jQuery 1.4+

I've made a fix for this problem. I've split onSlideChange in two events, 'out' 
and 'in'.
When switching pages you'll lose the fade in of the next thumb image, but since 
the
thumbnail list as a whole also fades in, I think that isn't too much of a 
problem.

My fix:

First, in your HTML page, change

    onSlideChange:             function(prevIndex, nextIndex) {
        // 'this' refers to the gallery, which is an extension of $('#thumbs')
        this.find('ul.thumbs').children()
            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
            .eq(nextIndex).fadeTo('fast', 1.0);
    },

to 

    onSlideChangeOut:             function(prevIndex) {
        // 'this' refers to the gallery, which is an extension of $('#thumbs')
        this.find('ul.thumbs').children()
            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity);
    },
    onSlideChangeIn:              function(nextIndex) {
        this.find('ul.thumbs').children()
            .eq(nextIndex).fadeTo('fast', 1.0);
    },

Second, in jquery.galleriffic.js, change

    defaultTransitionDuration: 1000,
    onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
    onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }

to

    defaultTransitionDuration: 1000,
    onSlideChangeOut:          undefined, // accepts a delegate like such: function(prevIndex) { ... }
    onSlideChangeIn:           undefined, // accepts a delegate like such: function(nextIndex) { ... }
    onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }

and change method

    gotoImage: function(imageData) {
        var index = imageData.index;

        if (this.onSlideChange)
        this.onSlideChange(this.currentImage.index, index);

        this.currentImage = imageData;
        this.preloadRelocate(index);

        this.refresh();

        return this;
    },

to

    gotoImage: function(imageData) {
        var index = imageData.index;

        var tomod = index % this.numThumbs;
        var doslidein = (tomod <= this.numThumbs) && (tomod >= 0);
        doslidein = doslidein && (Math.floor(index / this.numThumbs) == Math.floor(this.currentImage.index / this.numThumbs));

        if (this.onSlideChangeOut)
            this.onSlideChangeOut(this.currentImage.index);

        this.currentImage = imageData;
        this.preloadRelocate(index);

        this.refresh();

        if (this.onSlideChangeIn)
            if (doslidein)
                this.onSlideChangeIn(this.currentImage.index);
            else
                this.find('ul.thumbs').children().eq(this.currentImage.index).css({'opacity' : 1});

        return this;
    },

Original comment by ejmei...@gmail.com on 10 Oct 2010 at 12:39

Attachments:

[galleriffic jquery 1.4 fix.txt](https://storage.googleapis.com/google-code-attachments/galleriffic/issue-139/comment-4/galleriffic jquery 1.4 fix.txt)

GoogleCodeExporter commented 9 years ago

Thank you, thank you! Worked perfectly :)

Original comment by nickcate...@gmail.com on 10 Nov 2010 at 9:31

GoogleCodeExporter commented 9 years ago

Thank you ejmeijer for a wonderful fix!

Original comment by teamre...@clear.net.nz on 30 Nov 2010 at 8:43

GoogleCodeExporter commented 9 years ago

Thanks ejmeijer.

It works :)

Original comment by geekma...@gmail.com on 7 Dec 2010 at 6:46

GoogleCodeExporter commented 9 years ago

Thanks, ejmejer, the Fix works (nearly) perfectly.

But another problem occurs after useing jQuery 1.4.4 and this bugfix: When 
clicking on a thumbnail or a picture the picture loads twice. - It is just 
displayed once but flashes out and in again.

When clicking on "next"- or "prev"-Links it works perfectly without flashing ...

Anyone got any idea?

Original comment by vdv8...@uni-muenster.de on 11 Jan 2011 at 5:36

GoogleCodeExporter commented 9 years ago

Update: The bug reported on Jan 11, 2011 only appears when more than one 
gallery is on one Website.

Original comment by vdv8...@uni-muenster.de on 24 Jan 2011 at 1:13

GoogleCodeExporter commented 9 years ago

Thank you ejmeijer. it's working perfectly on jquery 1.4.4

Original comment by john...@gmail.com on 10 Feb 2011 at 1:15

GoogleCodeExporter commented 9 years ago

Worked for me! Thanks ejmejer!!
tested on jquery 1.5

Original comment by coli...@gmail.com on 15 Feb 2011 at 11:01

GoogleCodeExporter commented 9 years ago

Wow, I should have checked here a while back.  Thank you for this!

Original comment by sswan...@gmail.com on 18 Feb 2011 at 8:13

GoogleCodeExporter commented 9 years ago

Thank you so much!

Original comment by carlos...@gmail.com on 7 Mar 2011 at 5:53

GoogleCodeExporter commented 9 years ago

This was driving me crazy. Thanks so much for the js fix.

Original comment by sbeckerd...@gmail.com on 4 Apr 2011 at 11:53

GoogleCodeExporter commented 9 years ago

Great fix!!

Original comment by hern...@gmail.com on 12 Apr 2011 at 3:27

GoogleCodeExporter commented 9 years ago

Thanks, ejmejer! PERFECT solution to my problem!!!

Original comment by cbuon...@gmail.com on 7 Jul 2011 at 2:00

GoogleCodeExporter commented 9 years ago

Fixed worked for me too thank you!

Original comment by alexcro...@gmail.com on 23 Aug 2011 at 8:43

GoogleCodeExporter commented 9 years ago

Fix works for jquery 1.6.3 also. 

If you add the following line just before "return this;" in gotoImage: 
(jquery.galleriffic.js) the photo-index (numbering) will also work correct...

this.$captionContainer.find('div.photo-index').html(''+ 
(this.currentImage.index+1) +' of '+ this.data.length);

Original comment by lubol...@gmail.com on 13 Oct 2011 at 9:33

GoogleCodeExporter commented 9 years ago

Thanks to comments from:
Comment 4 by ejmei...@gmail.com, Oct 10, 2010
Comment 18 by lubol...@gmail.com, Oct 13, 2011

I have applied both of these fixes and both work with jquery/1.7.1/jquery.min.js
using the full example#5 style galleriffic show.

Original comment by rsk...@gmail.com on 26 Dec 2011 at 7:34

GoogleCodeExporter commented 9 years ago

THANK YOU ejmejer!!!

Original comment by led...@gmail.com on 27 Apr 2012 at 10:08

GoogleCodeExporter commented 9 years ago

Thanks ejmeijer, you are frickin awesome!!! Been stuck with thsi for a few days 
now!!

Original comment by christof...@hotmail.com on 13 Jun 2012 at 8:16

GoogleCodeExporter commented 9 years ago

ejmeijer, you sir, you are a good man. THANKS!!!

Original comment by ambrig...@gmail.com on 6 Jul 2012 at 7:42

GoogleCodeExporter commented 9 years ago

Thank ejmeijer,This help me a lot.

Original comment by Tanathip...@gmail.com on 10 Aug 2012 at 5:55

GoogleCodeExporter commented 9 years ago

Thanks ejmeijer :D

Original comment by jrcharle...@gmail.com on 6 Feb 2013 at 1:05

GoogleCodeExporter commented 9 years ago

the fix by #4 made it work for me also on jquery 1.9.1
i didnt need the fix by #18
nonetheless, thanks both

(funny, the captcha below wants me to write slide :P)

Original comment by mez...@gmail.com on 25 Mar 2013 at 3:25

GoogleCodeExporter commented 9 years ago

[deleted comment]

GoogleCodeExporter commented 9 years ago

wonderful, thanks you

Original comment by hungpv.s...@gmail.com on 28 Mar 2013 at 10:04

GoogleCodeExporter commented 9 years ago

[deleted comment]

GoogleCodeExporter commented 9 years ago

thanks, excelent!!!

Original comment by agn...@gmail.com on 27 Jan 2014 at 5:52

GoogleCodeExporter commented 9 years ago

Thanks so much ejmei...! I have two galleries on a site and couldn't find the 
solution to this problem. Your fix worked perfectly on jQuery 1.11.0!

Original comment by CoopS...@gmail.com on 25 Mar 2014 at 9:35

GoogleCodeExporter commented 9 years ago

I know this is an old thread and #4 did fix it for me in most cases, however I 
have an awkward recurrence of this issue in the following specific scenario:

I've set the spacebar up to, instead of going to the next image, as it's setup 
by default in the script, to toggle the slideshow:

    case 32: // space
        gallery.toggleSlideshow();
        e.preventDefault();
        break;

I tried switching the event handler from 'keydown' to 'keypress' and 
interestingly it appeared to have some effect, but sometimes it's still there.

Interestingly, when I mouse-click the play/pause button, all is fine, it's 
really only an issue if I hit the spacebar (or whatever other key I assign to 
this - tried too), and only if I explicitly select the last image on the page, 
and hit space there.

What do you guys think this could be caused by? Does a keydown/keypress throw 
off the calculation of the thumbs somehow?

Original comment by benoma...@gmail.com on 21 Sep 2014 at 9:56

GoogleCodeExporter commented 9 years ago

removing opacityrollover resolved this for me.

Original comment by benoma...@gmail.com on 22 Sep 2014 at 12:51

GoogleCodeExporter commented 9 years ago

[deleted comment]

GoogleCodeExporter commented 9 years ago

further to my comment in #32, actually, removing opacityrollover did resolve 
the additional thumb issue for me however it also removed a nice feature.

To resolve the issue definitely, you can modify opacityrollover.js as follows:

Replace this:

function fadeTo(element, opacity) {
            var $target = $(element);

            if (config.exemptionSelector)
                $target = $target.not(config.exemptionSelector);    

            $target.fadeTo(config.fadeSpeed, opacity);
        }

        this.css('opacity', this.mouseOutOpacity)
            .hover(
                function () {
                    fadeTo(this, config.mouseOverOpacity);
                },
                function () {
                    fadeTo(this, config.mouseOutOpacity);
                });

with this:

function animateMe(opacity, element) {
            var $target = $(element);

            if (config.exemptionSelector)
                $target = $target.not(config.exemptionSelector);    

            $target.animate({ opacity: opacity }, config.fadeSpeed);
        }

        this.css('opacity', this.mouseOutOpacity)
            .hover(
                function() {
                    animateMe(config.mouseOverOpacity, this);
                },
                function() {
                    animateMe(config.mouseOutOpacity, this);
                });

Original comment by benoma...@gmail.com on 23 Sep 2014 at 7:33

GoogleCodeExporter commented 9 years ago

Note: I'm using jquery 1.8.3 and jquery ui 1.10.4.

Original comment by benoma...@gmail.com on 23 Sep 2014 at 7:35

freegift / galleriffic

An extra thumbnail showing with jQuery 1.4 and above #139