Fancybox - Thumbnails that are Vertical

Question

How do you make the thumbnails in Fancybox vertical along the side (preferrably left) instead of horizontally on the bottom?

Thanks!

Answer 1

in jquery.fancybox-thumbs.css

#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
    opacity: 0.5;
}

should be

#fancybox-thumbs ul li {
    /*float: left;*/
    padding: 1px;
    opacity: 0.5;
}

And in jquery.fancybox-thumbs.js replace:

this.list.children().eq(0).outerWidth(true);
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)));

Should be:

this.width = opts.width 
this.list.width(opts.width+2)

Again in jquery.fancybox-thumbs.js

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);
            }
        }

Should be (to center the thumbnail div vertically) :

        onUpdate: function (opts, obj) {
        if (this.list) {
            var listpos=(obj.index+1) * (opts.height+2)-(opts.height+2) * 0.5

            if (listpos < Math.floor($(window).height()*0.5)) {
              var top_=0
            } else { 
              var top_= - (listpos-Math.floor($(window).height()*0.5))
            }




            this.list.stop(true).animate({
                'top': top_ 
            }, 150);
        }
    }

Also add into "init" method to set the width of the thumbnail div (in jquery.fancybox-thumbs.js):

Fix after this line:

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');

To this:

this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body'); $("#fancybox-thumbs").width(opts.width);

Also in init you can add this, and mousewheel will scroll the tmumbnails (Jquery mousewheel plugin must be included):

    $("#fancybox-thumbs").mousewheel(function(event, delta) {
              var current_top=parseInt($("#fancybox-thumbs").css('top'), 10)
              if (current_top+delta * 100<=2) {
                 $("#fancybox-thumbs").css('top',current_top+delta * 100)
              }


      event.preventDefault();

   });