Permalink
Browse files

updated the flyout to close on off click

  • Loading branch information...
1 parent 233c861 commit ae53f6138ac7790005030eee665e479c16ac64bd Jordan Humphreys committed Jun 20, 2011
Showing with 21 additions and 22 deletions.
  1. +5 −16 css/flickrbomb.css
  2. +8 −3 js/flickrbomb-demo.js
  3. +8 −3 js/flickrbomb.js
View
@@ -2,20 +2,12 @@
/* -----------------------------------------
THIS IS ALL DECLARED IN THE PLUGIN
----------------------------------------- */
-.flickrbombWrapper{/* width:350px;height:200px;*/
-overflow:hidden;display:block;position:relative;}
+.flickrbombWrapper{overflow:hidden;display:block;position:relative;}
.flickrbombContainer{position:relative;}
.flickrbombWrapper:hover .setupIcon{display:block;}
-.flickrbombWrapper .setupIcon{display:none; z-index:99;/* background:url(../images/setupIcon.png);*/
-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg==);width:34px;height:34px;position:absolute;bottom:8px;right:8px;opacity:.7;}
+.flickrbombWrapper .setupIcon{display:none; z-index:99;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg==);width:34px;height:34px;position:absolute;bottom:8px;right:8px;opacity:.7;}
.setupIcon:hover{opacity:1;}
-/* If the image is wider */
-img.flickrbomb{/* width:100%;*/
-position:absolute;left:0;top:0;}
-/* If the image is wider */
-/*
-img.flickrbomb{height:100%;}
-*/
+img.flickrbomb{position:absolute;left:0;top:0;}
.flickrbombFlyout{display:none;background:rgba(0,0,0,.9);width:345px;height:230px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid rgba(10,10,10,.95);-moz-box-shadow:1px 1px 9px rgba(0,0,0,.85);-webkit-box-shadow:1px 1px 9px rgba(0,0,0,.85);box-shadow:1px 1px 9px rgba(0,0,0,.85);background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* IE10+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
background-image:-webkit-gradient(
@@ -29,8 +21,6 @@ center bottom,
rgba(23,23,23,.85) 28%,
rgba(48,48,48,.85) 100%
);padding:20px 35px 0px 45px;position:absolute;z-index:9999;}
-/*.flickrbombFlyout:after{content:"";float:left;position:absolute;z-index:1;top:0;right:-10px;border-color:transparent transparent transparent rgba(10,10,10,.95);border-style:solid;border-width:10px 0px 10px 10px;margin-top:200px;}
-*/
.flickrbombFlyout a.photo{display:block;overflow:hidden;width:100px;height:60px;float:left;margin:0 15px 15px 0;position:relative;}
.flickrbombFlyout a.photo img{width:100%;}
.flickrbombFlyout a.photo:hover{-moz-box-shadow:0 0 8px rgba(0,0,0,.7);-webkit-box-shadow:0 0 8px rgba(0,0,0,.7);box-shadow:0 0 8px rgba(0,0,0,.7);top:-1px;}
@@ -43,7 +33,6 @@ background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/*
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
background:linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* W3C */
border:1px solid #111;padding-top:95px;text-align:center;position:absolute;color:#fff;text-decoration:none;width:25px;overflow:hidden;height:113px;}
-.flickrbombFlyout a.prev:hover,.flickrbobmFlyout a.next:hover{color:#666;border-color:#222;}
+.flickrbombFlyout a.prev:hover,.flickrbombFlyout a.next:hover{color:#666;border-color:#222;}
.flickrbombFlyout a.prev{left:10px;}
-.flickrbombFlyout a.next{right:10px;}
-.flickrbombGallery{display:none;position:absolute;z-index:9999;}
+.flickrbombFlyout a.next{right:10px;}
View
@@ -244,10 +244,10 @@ startFlickrBomb = function () {
this.toggleFlyout();
},
- toggleFlyout: function () {
+ toggleFlyout: function (event) {
this.$('.flickrbombFlyout').toggle();
},
-
+
selectImage: function (event) {
event.preventDefault();
@@ -293,12 +293,17 @@ startFlickrBomb = function () {
}
});
-
$("img[src^='flickr://']").each(function () {
var img = $(this);
var imageView = new ImageView({img: img});
img.replaceWith(imageView.render().el);
});
+
+ $('body').click(function(event) {
+ if (!$(event.target).closest('.setupIcon').length && !$(event.target).closest('.flickrbombFlyout').length) {
+ $('.flickrbombFlyout').hide();
+ };
+ });
})(jQuery);
};
View
@@ -243,10 +243,10 @@ var flickrbombAPIkey = '66b5c17019403c96779e8fe88d5b576d', //your Flickr API ke
this.toggleFlyout();
},
- toggleFlyout: function () {
+ toggleFlyout: function (event) {
this.$('.flickrbombFlyout').toggle();
},
-
+
selectImage: function (event) {
event.preventDefault();
@@ -292,11 +292,16 @@ var flickrbombAPIkey = '66b5c17019403c96779e8fe88d5b576d', //your Flickr API ke
}
});
-
$("img[src^='flickr://']").each(function () {
var img = $(this);
var imageView = new ImageView({img: img});
img.replaceWith(imageView.render().el);
});
+
+ $('body').click(function(event) {
+ if (!$(event.target).closest('.setupIcon').length && !$(event.target).closest('.flickrbombFlyout').length) {
+ $('.flickrbombFlyout').hide();
+ };
+ });
})(jQuery);

0 comments on commit ae53f61

Please sign in to comment.