Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: fancybox/source/helpers/jquery.fancybox-thumbs.js

Issue 8615139: adblockpluschrome: Open share page in lightbox (Closed)
Patch Set: Created Oct. 23, 2012, 4:12 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: fancybox/source/helpers/jquery.fancybox-thumbs.js
===================================================================
new file mode 100755
--- /dev/null
+++ b/fancybox/source/helpers/jquery.fancybox-thumbs.js
@@ -0,0 +1,162 @@
+ /*!
+ * Thumbnail helper for fancyBox
+ * version: 1.0.7 (Mon, 01 Oct 2012)
+ * @requires fancyBox v2.0 or later
+ *
+ * Usage:
+ * $(".fancybox").fancybox({
+ * helpers : {
+ * thumbs: {
+ * width : 50,
+ * height : 50
+ * }
+ * }
+ * });
+ *
+ */
+(function ($) {
+ //Shortcut for fancyBox object
+ var F = $.fancybox;
+
+ //Add helper object
+ F.helpers.thumbs = {
+ defaults : {
+ width : 50, // thumbnail width
+ height : 50, // thumbnail height
+ position : 'bottom', // 'top' or 'bottom'
+ source : function ( item ) { // function to obtain the URL of the thumbnail image
+ var href;
+
+ if (item.element) {
+ href = $(item.element).find('img').attr('src');
+ }
+
+ if (!href && item.type === 'image' && item.href) {
+ href = item.href;
+ }
+
+ return href;
+ }
+ },
+
+ wrap : null,
+ list : null,
+ width : 0,
+
+ init: function (opts, obj) {
+ var that = this,
+ list,
+ thumbWidth = opts.width,
+ thumbHeight = opts.height,
+ thumbSource = opts.source;
+
+ //Build list structure
+ list = '';
+
+ for (var n = 0; n < obj.group.length; n++) {
+ list += '<li><a style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;" href="javascript:jQuery.fancybox.jumpto(' + n + ');"></a></li>';
+ }
+
+ this.wrap = $('<div id="fancybox-thumbs"></div>').addClass(opts.position).appendTo('body');
+ this.list = $('<ul>' + list + '</ul>').appendTo(this.wrap);
+
+ //Load each thumbnail
+ $.each(obj.group, function (i) {
+ var href = thumbSource( obj.group[ i ] );
+
+ if (!href) {
+ return;
+ }
+
+ $("<img />").load(function () {
+ var width = this.width,
+ height = this.height,
+ widthRatio, heightRatio, parent;
+
+ if (!that.list || !width || !height) {
+ return;
+ }
+
+ //Calculate thumbnail width/height and center it
+ widthRatio = width / thumbWidth;
+ heightRatio = height / thumbHeight;
+
+ parent = that.list.children().eq(i).find('a');
+
+ if (widthRatio >= 1 && heightRatio >= 1) {
+ if (widthRatio > heightRatio) {
+ width = Math.floor(width / heightRatio);
+ height = thumbHeight;
+
+ } else {
+ width = thumbWidth;
+ height = Math.floor(height / widthRatio);
+ }
+ }
+
+ $(this).css({
+ width : width,
+ height : height,
+ top : Math.floor(thumbHeight / 2 - height / 2),
+ left : Math.floor(thumbWidth / 2 - width / 2)
+ });
+
+ parent.width(thumbWidth).height(thumbHeight);
+
+ $(this).hide().appendTo(parent).fadeIn(300);
+
+ }).attr('src', href);
+ });
+
+ //Set initial width
+ this.width = 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)));
+ },
+
+ beforeLoad: function (opts, obj) {
+ //Remove self if gallery do not have at least two items
+ if (obj.group.length < 2) {
+ obj.helpers.thumbs = false;
+
+ return;
+ }
+
+ //Increase bottom margin to give space for thumbs
+ obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15);
+ },
+
+ afterShow: function (opts, obj) {
+ //Check if exists and create or update list
+ if (this.list) {
+ this.onUpdate(opts, obj);
+
+ } else {
+ this.init(opts, obj);
+ }
+
+ //Set active element
+ this.list.children().removeClass('active').eq(obj.index).addClass('active');
+ },
+
+ //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);
+ }
+ },
+
+ beforeClose: function () {
+ if (this.wrap) {
+ this.wrap.remove();
+ }
+
+ this.wrap = null;
+ this.list = null;
+ this.width = 0;
+ }
+ }
+
+}(jQuery));

Powered by Google App Engine
This is Rietveld