Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 3 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Commits on May 28, 2012
@ahultgren Removed height on lightbox to allow for more flexible content 9ef5fb8
Commits on Jun 03, 2012
@ahultgren Decoupled the prerendering before the data is loaded d5a8347
@ahultgren Added bg as parameter to itemTemplate to make it possible to show it …
…when rendering the content instead of when loading it. Not really good, shold be a separate function for rendering, but works atm
c4133b0
Showing with 33 additions and 21 deletions.
  1. +2 −2 dist/jquery.lighty.min.js
  2. +31 −19 src/jquery.lighty.js
View
4 dist/jquery.lighty.min.js
@@ -1,3 +1,3 @@
-/*! jq Lighty - v0.0.1 - 2012-05-27
+/*! jq Lighty - v0.0.1 - 2012-06-03
* Copyright (c) 2012 Andreas Hultgren; Licensed MIT */
-(function(a){function b(){var b={baseZ:5,data:function(){return{jsonposts:1}},prefix:"lighty-",itemTemplate:function(a){var b='<img src="'+a[0].the_post_thumbnail[0]+'" />'+'<p class="desc">'+a[0].the_excerpt+"</p>";return{markup:b,width:a[0].the_post_thumbnail[1],height:a[0].the_post_thumbnail[2]}}},c,d,e,f,g=function(){var f=a(this);return e=f,c.show(),d.empty().append('<div class="'+b.prefix+'waiter"></div>').css({top:f.offset().top-a(window).scrollTop,left:f.offset().left,width:f.width(),height:f.height()}).show(),a.ajax({url:f.attr("href"),data:b.data.call(f),dataType:"json",error:function(a,b){},success:function(a){var c=b.itemTemplate.call(this,a);d.lighty("resize",{width:c.width,height:c.height},function(){d.empty().append(c.markup)})}}),this},h=function(){c.hide(),d.hide().empty(),e=undefined};this.init=function(i){return f=this,a.extend(b,i),c=a(document.createElement("div")).attr("id",b.prefix+"bg").css({position:"fixed",top:0,left:0,right:0,bottom:0,"z-index":b.baseZ}).hide().appendTo("body").click(function(){h()}),d=a(document.createElement("div")).attr("id",b.prefix+"container").css({position:"fixed",left:a(window).width()/2,top:a(window).height()/2,"z-index":b.baseZ+1}).hide().appendTo("body"),a(window).keydown(function(a){var b;e&&(a.which===39?(a.preventDefault(),b=f[f.index(e)+1]):a.which===37&&(a.preventDefault(),b=f[f.index(e)-1]),b?g.call(b):(!b&&(a.which===39||a.which===37)||a.which===27)&&h())}),this.each(function(){a(this).click(function(a){a.preventDefault(),g.call(this)})})},this.resize=function(b,c){return this.each(function(){var d=a(window),e=d.width(),f=d.height(),g;b=b||{},b.height=b.height||a(this).height(),b.width=b.width||a(this).width(),b.width>e-50&&(g=(e-50)/b.width,b.width*=g,b.height*=g),b.height>f-100&&(g=(f-100)/b.height,b.width*=g,b.height*=g),a(this).animate({width:b.width,height:b.height,left:e/2-b.width/2,top:f/2-b.height/2},{duration:200,complete:function(){typeof c=="function"&&c()}})})}}a.fn.lighty=function(c){if(this.length){var d=new b;if(d[c])return d[c].apply(this,Array.prototype.slice.call(arguments,1));if(typeof c=="object"||!c)return d.init.apply(this,arguments);a.error("Method "+c+" does not exist on jQuery.lighty")}}})(jQuery);
+(function(a){function b(){this.settings={baseZ:5,data:function(){return{jsonposts:1}},prefix:"lighty-",itemTemplate:function(a,b){var c='<img src="'+a[0].the_post_thumbnail[0]+'" />'+'<p class="desc">'+a[0].the_excerpt+"</p>";return{markup:c,width:a[0].the_post_thumbnail[1],height:a[0].the_post_thumbnail[2]}},load:function(c,d){var e=this;return d.show(),c.empty().append('<div class="'+b.prefix+'waiter"></div>').css({top:e.offset().top-a(window).scrollTop,left:e.offset().left,width:e.width(),height:e.height()}).show(),e}};var b=this.settings,c,d,e,f,g=function(){var f=a(this);return e=f,b.load.call(f,d,c),a.ajax({url:f.attr("href"),data:b.data.call(f),dataType:"json",error:function(a,b){},success:function(a){var e=b.itemTemplate.call(this,a,c);d.lighty("resize",{width:e.width,height:e.height},function(){d.empty().append(e.markup)})}}),this},h=function(){c.hide(),d.hide().empty(),e=undefined};this.init=function(i){return f=this,a.extend(b,i),c=a(document.createElement("div")).attr("id",b.prefix+"bg").css({position:"fixed",top:0,left:0,right:0,bottom:0,"z-index":b.baseZ}).hide().appendTo("body").click(function(){h()}),d=a(document.createElement("div")).attr("id",b.prefix+"container").css({position:"fixed",left:a(window).width()/2,top:a(window).height()/2,"z-index":b.baseZ+1}).hide().appendTo("body"),a(window).keydown(function(a){var b;e&&(a.which===39?(a.preventDefault(),b=f[f.index(e)+1]):a.which===37&&(a.preventDefault(),b=f[f.index(e)-1]),b?g.call(b):(!b&&(a.which===39||a.which===37)||a.which===27)&&h())}),this.each(function(){a(this).click(function(a){a.preventDefault(),g.call(this)})})},this.resize=function(b,c){return this.each(function(){var d=a(window),e=d.width(),f=d.height(),g=a(this),h;b=b||{},b.height=b.height||g.height(),b.width=b.width||g.width(),b.width>e-50&&(h=(e-50)/b.width,b.width*=h,b.height*=h),b.height>f-100&&(h=(f-100)/b.height,b.width*=h,b.height*=h),g.animate({width:b.width,height:b.height,left:e/2-b.width/2,top:f/2-b.height/2},{duration:200,complete:function(){g.height("auto"),typeof c=="function"&&c()}})})}}a.fn.lighty=function(c){if(this.length){var d=new b;if(d[c])return d[c].apply(this,Array.prototype.slice.call(arguments,1));if(typeof c=="object"||!c)return d.init.apply(this,arguments);a.error("Method "+c+" does not exist on jQuery.lighty")}}})(jQuery);
View
50 src/jquery.lighty.js
@@ -15,24 +15,44 @@
// Class
function Lighty(){
// Private vars
- var settings = {
+ this.settings = {
baseZ: 5,
data: function(){
return {
jsonposts: 1
};
},
prefix: 'lighty-',
- itemTemplate: function(data){
+ itemTemplate: function(data, bg){
var contents = '<img src="' + data[0].the_post_thumbnail[0] + '" />' + '<p class="desc">' + data[0].the_excerpt + '</p>';
return {
markup: contents,
width: data[0].the_post_thumbnail[1],
height: data[0].the_post_thumbnail[2]
};
+ },
+ load: function(container, bg){
+ var that = this;
+
+ // Show bg and loading icon
+ bg.show();
+ container
+ .empty()
+ .append('<div class="' + settings.prefix + 'waiter"></div>')
+ .css({
+ top: that.offset().top - $(window).scrollTop,
+ left: that.offset().left,
+ width: that.width(),
+ height: that.height()
+ })
+ .show();
+
+ return that;
}
- },
+ };
+
+ var settings = this.settings,
bg,
container,
current,
@@ -45,18 +65,8 @@
// Save this as currently lightboxed
current = that;
- // Show bg and loading icon
- bg.show();
- container
- .empty()
- .append('<div class="' + settings.prefix + 'waiter"></div>')
- .css({
- top: that.offset().top - $(window).scrollTop,
- left: that.offset().left,
- width: that.width(),
- height: that.height()
- })
- .show();
+ // Hint that something is loading
+ settings.load.call(that, container, bg);
// Get data
$.ajax({
@@ -68,7 +78,7 @@
},
success: function(data){
// Input the fetched data into template
- var content = settings.itemTemplate.call(this, data);
+ var content = settings.itemTemplate.call(this, data, bg);
// Resize the container
container.lighty('resize', {width: content.width, height: content.height}, function(){
@@ -162,14 +172,15 @@
var $window = $(window),
windowWidth = $window.width(),
windowHeight = $window.height(),
+ that = $(this),
diff;
// Make sure args is an object
args = args || {};
// Make sure there's something to animate to
- args.height = args.height || $(this).height();
- args.width = args.width || $(this).width();
+ args.height = args.height || that.height();
+ args.width = args.width || that.width();
// Make sure the image is never larger than the screen
//## Must compensate for padding and shit...
@@ -185,7 +196,7 @@
}
// Animate to the center
- $(this).animate({
+ that.animate({
width: args.width,
height: args.height,
left: windowWidth/2 - args.width/2,
@@ -194,6 +205,7 @@
{
duration: 200,
complete: function(){
+ that.height("auto");
if( typeof callback === 'function' ){
callback();
}

No commit comments for this range

Something went wrong with that request. Please try again.