CODEWITHSUNDEEP
javascriptjqueryfancybox
Markus Coetzee
Markus Coetzee

Reputation: 3444

Keep the Fancybox thumbnails from moving around?

Is there a way to keep the Fancybox thumbnails from moving around when you select one? Currently it repositions the row of thumbnails every time you click on one.

This behaviour can be seen here under the "Extended functionality - Thumbnail helper" section: http://fancyapps.com/fancybox/

I would simply like the whole thumbnail row to be centered and static.

Upvotes: 2

Views: 3542

Answers (4)

Ced
Ced

Reputation: 21

To keep the original movement if the thumbnail list is larger then the window, insert this code right after the jquery.fancybox-thumbs.js declaration :

<script type="text/javascript">
    // keep the Fancybox thumbnails from moving around if not needed
    $.fancybox.helpers.thumbs.onUpdate_backup = $.fancybox.helpers.thumbs.onUpdate;
    $.fancybox.helpers.thumbs.onUpdate = function(opts, obj) {
        if (this.list) {
            var thumbs_total_width = (opts.width + 4) * obj.group.length;
            if(thumbs_total_width > $(window).width())
                $.fancybox.helpers.thumbs.onUpdate_backup(opts, obj);
            else {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (thumbs_total_width * 0.5))
                }, 150);
            }
        }
    };
</script>

Upvotes: 1

Markus Coetzee
Markus Coetzee

Reputation: 3444

It came down to modifying the source of: 

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.4"></script>

Currently the selected thumbnail (obj.index) is used to calculate the "left" css attribute of the list of thumbnails, both upon initialization and on update:

        init: function (opts, obj) {
            ...
            this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)));
        },

...

        //Center list
        onUpdate: function (opts, obj) {
            if (this.list) {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
                }, 150);
            }
        },

On both occasions I need it to rather center the list of thumbnails (I can't simply get rid of the 'onUpdate' code as it's used to recalculate when the window size changes as well as when you select a thumbnail).

So using 'obj.group.length / 2' instead of 'obj.index' did the trick:

        init: function (opts, obj) {
            ...
            this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.group.length / 2 * this.width + this.width * 0.5)));
        },

...

        //Center list
        onUpdate: function (opts, obj) {
            if (this.list) {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (obj.group.length / 2 * this.width + this.width * 0.5))
                }, 150);
            }
        },

Upvotes: 0

dfsq
dfsq

Reputation: 193261

To prevent default behavior of thumbnail helper (centering) you can simply redefine onUpdate method:

// Include this somewhere after main fancybox scripts
$.fancybox.helpers.thumbs.onUpdate = function() {};

That's it, you don't even have to mess with Fancybox source code.

It's super easy to test: open http://fancyapps.com/fancybox/#examples , execute above snippet in console, and check how fancybox works after that.

Upvotes: 1

BBagi
BBagi

Reputation: 2085

In order to use the thumbnail helper, you must also load the following JS file:

   <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.4"></script>

Near the bottom is the following code:

//Center list
        onUpdate: function (opts, obj) {
            if (this.list) {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
                }, 150);
            }
        },

Change it to this:

//Center list
        onUpdate: function (opts, obj) {
            /* if (this.list) {
                this.list.stop(true).animate({
                    'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))
                }, 150);
            } */
        },

And that should stop it from animating. I haven't tested it because I don't have it installed, but from reading the code, I think that is what is moving the thumbnails. Try it out and let me know if it works.

Upvotes: 2

Related Questions