Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixed vertical-align issue

  • Loading branch information...
commit c9e2cf2e2f755fd68868159ab165d12513ffafa5 1 parent 08b7c18
Judicaël Anouma authored
View
2  lib/flickr-coverflow.js
@@ -73,7 +73,7 @@
};
FlickrCoverFlowStyle.prototype.style = function() {
- return "<style>\n " + this.containerSelector + "{\n text-align: center;\n position: relative;\n height: " + (this.height()) + ";\n width: " + (this.width()) + ";\n }\n\n ." + this.imageContainer + " {\n display: inline-block;\n vertical-align: bottom;\n position: absolute;\n left:0;\n bottom: 0;\n z-index: 0;\n }\n\n .flickrCoverflow-image {\n position: relative;\n min-width: 80px;\n min-height: 80px;\n margin: 0;\n text-align: center;\n }\n\n .flickrCoverflow-title {\n display: none;\n background-color: #000;\n color: #fff;\n font-family: Helvetica, Tahoma, Arial, Verdana;\n font-size: .7em;\n width: 80px;\n word-wrap: break-word;\n text-overflow: ellipsis;\n overflow:hidden;\n white-space: nowrap;\n bottom: 0;\n }\n\n ." + this.imageContainer + "[data-template=yes],\n ." + this.imageContainer + "[data-position='none'] {\n display: none;\n opacity: 0;\n }\n\n :not(." + this.imageContainer + "[data-position='none']) {\n display: inline-block;\n opacity: 1;\n }\n \n .flickrCoverflow-previous,\n .flickrCoverflow-next {\n position: absolute;\n z-index: 3;\n width: 50%;\n height: 100%;\n cursor: pointer;\n }\n \n .flickrCoverflow-previous {\n left: 0;\n }\n \n .flickrCoverflow-next {\n right: 0;\n }\n\n\n\n ." + this.imageContainer + "[data-position='2'] .flickrCoverflow-image,\n ." + this.imageContainer + "[data-position='4'] .flickrCoverflow-image {\n box-shadow: 0 0 10px #000;\n }\n\n ." + this.imageContainer + "[data-position='3'] .flickrCoverflow-image {\n box-shadow: 0 0 20px #000;\n }\n\n\n\n ." + this.imageContainer + "[data-position='0'] {\n z-index: 0;\n opacity: 0;\n " + (transform("translateX(" + (this.position(0)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='1'] {\n z-index: 1;\n " + (transform("translateX(" + (this.position(1)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='2'] {\n z-index: 2;\n " + (transform("translateX(" + (this.position(2)) + ") translateZ(100px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='3'] {\n z-index: 4;\n " + (transform("translateX(" + (this.position(3)) + ") translateZ(200px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='4'] {\n z-index: 2;\n " + (transform("translateX(" + (this.position(4)) + ") translateZ(100px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='5'] {\n z-index: 1;\n " + (transform("translateX(" + (this.position(5)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='6'] {\n z-index: 0;\n opacity: 0;\n " + (transform("translateX(" + (this.position(6)) + ") translateZ(0)")) + "\n }\n\n .flickrCoverflow-img {\n vertical-align: inherit;\n max-height: 100%;\n }\n</style>";
+ return "<style>\n " + this.containerSelector + "{\n text-align: center;\n position: relative;\n height: " + (this.height()) + ";\n width: " + (this.width()) + ";\n }\n\n ." + this.imageContainer + " {\n display: inline-block;\n vertical-align: bottom;\n position: absolute;\n left:0;\n bottom: 0;\n z-index: 0;\n }\n\n .flickrCoverflow-image {\n position: relative;\n min-width: 80px;\n min-height: 80px;\n margin: 0;\n text-align: center;\n vertical-align: inherit;\n }\n\n .flickrCoverflow-title {\n display: none;\n background-color: #000;\n color: #fff;\n font-family: Helvetica, Tahoma, Arial, Verdana;\n font-size: .7em;\n width: 80px;\n word-wrap: break-word;\n text-overflow: ellipsis;\n overflow:hidden;\n white-space: nowrap;\n bottom: 0;\n }\n\n ." + this.imageContainer + "[data-template=yes],\n ." + this.imageContainer + "[data-position='none'] {\n display: none;\n opacity: 0;\n }\n\n :not(." + this.imageContainer + "[data-position='none']) {\n display: inline-block;\n opacity: 1;\n }\n \n .flickrCoverflow-previous,\n .flickrCoverflow-next {\n position: absolute;\n z-index: 3;\n width: 50%;\n height: 100%;\n cursor: pointer;\n }\n \n .flickrCoverflow-previous {\n left: 0;\n }\n \n .flickrCoverflow-next {\n right: 0;\n }\n\n\n\n ." + this.imageContainer + "[data-position='2'] .flickrCoverflow-image,\n ." + this.imageContainer + "[data-position='4'] .flickrCoverflow-image {\n box-shadow: 0 0 10px #000;\n }\n\n ." + this.imageContainer + "[data-position='3'] .flickrCoverflow-image {\n box-shadow: 0 0 20px #000;\n }\n\n\n\n ." + this.imageContainer + "[data-position='0'] {\n z-index: 0;\n opacity: 0;\n " + (transform("translateX(" + (this.position(0)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='1'] {\n z-index: 1;\n " + (transform("translateX(" + (this.position(1)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='2'] {\n z-index: 2;\n " + (transform("translateX(" + (this.position(2)) + ") translateZ(100px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='3'] {\n z-index: 4;\n " + (transform("translateX(" + (this.position(3)) + ") translateZ(200px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='4'] {\n z-index: 2;\n " + (transform("translateX(" + (this.position(4)) + ") translateZ(100px)")) + "\n }\n\n ." + this.imageContainer + "[data-position='5'] {\n z-index: 1;\n " + (transform("translateX(" + (this.position(5)) + ") translateZ(0)")) + "\n }\n\n ." + this.imageContainer + "[data-position='6'] {\n z-index: 0;\n opacity: 0;\n " + (transform("translateX(" + (this.position(6)) + ") translateZ(0)")) + "\n }\n\n .flickrCoverflow-img {\n vertical-align: inherit;\n max-height: 100%;\n }\n</style>";
};
FlickrCoverFlowStyle.prototype.position = function(position) {
View
2  lib/flickr-coverflow.min.js
@@ -3,7 +3,7 @@ this.size+" is not a valid flickr-coverflow size");if(!this.containerSelector||!
(70).percentOf(this.width())];delete Number.prototype.percentOf;a!=null&&a.debug("positions: "+f)}var d,f,g,c;d={tiny:{url:"url_t",height:"102px",width:"250px",imgMaxWidth:"71px",urlZoom:"url_s"},small:{url:"url_s",height:"202px",width:"480px",imgMaxWidth:"143px",urlZoom:"url_m"},medium:{url:"url_m",height:"302px",width:"960px",imgMaxWidth:"215px",urlZoom:"url_m"}};g=["-webkit-","-moz-","-o-","-ms-",""];c=function(a){var c;return function(){var b,e,d;d=[];for(b=0,e=g.length;b<e;b++)c=g[b],d.push(""+
c+"transform: "+a+";");return d}().join("\n")};f=[];b.prototype.imageContainer="flickrCoverflow-image-container";b.prototype.style3d=function(){return"<style>\n\t."+this.imageContainer+"[data-position='0'] .flickrCoverflow-image {\n\t\t"+c("perspective(700px) scale(.2) translateZ(0) rotateY(0)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='1'] .flickrCoverflow-image {\n\t\t"+c("perspective(700px) scale(.65) translateZ(0) rotateY(45deg)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='2'] .flickrCoverflow-image {\n\t\t"+
c("perspective(500px) scale(.65) translateZ(100px) rotateY(45deg)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='3'] .flickrCoverflow-image {\n\t\t"+c("perspective(0) scale(1) translateZ(200px) rotateY(0)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='4'] .flickrCoverflow-image {\n\t\t"+c("perspective(500px) scale(.65) translateZ(100px) rotateY(-45deg)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='5'] .flickrCoverflow-image {\n\t\t"+c("perspective(700px) scale(.65) translateZ(0) rotateY(-45deg)")+
-"\n\t}\n\n\t."+this.imageContainer+"[data-position='6'] .flickrCoverflow-image {\n\t\t"+c("perspective(700px) scale(.2) translateZ(0) rotateY(0)")+"\n\t}\n\t\n\t.flickrCoverflow-previous,\n\t.flickrCoverflow-next {\n\t\t"+c("translateZ(199px)")+"\n\t}\n</style>"};b.prototype.style=function(){return"<style>\n\t"+this.containerSelector+"{\n\t\ttext-align: center;\n\t\tposition: relative;\n\t\theight: "+this.height()+";\n\t\twidth: "+this.width()+";\n\t}\n\n\t."+this.imageContainer+" {\n\t\tdisplay: inline-block;\n\t\tvertical-align: bottom;\n\t\tposition: absolute;\n\t\tleft:0;\n\t\tbottom: 0;\n\t\tz-index: 0;\n\t}\n\n\t.flickrCoverflow-image {\n\t\tposition: relative;\n\t\tmin-width: 80px;\n\t\tmin-height: 80px;\n\t\tmargin: 0;\n\t\ttext-align: center;\n\t}\n\n\t.flickrCoverflow-title {\n\t\tdisplay: none;\n\t\tbackground-color: #000;\n\t\tcolor: #fff;\n\t\tfont-family: Helvetica, Tahoma, Arial, Verdana;\n\t\tfont-size: .7em;\n\t\twidth: 80px;\n\t\tword-wrap: break-word;\n\t\ttext-overflow: ellipsis;\n\t\toverflow:hidden;\n\t\twhite-space: nowrap;\n\t\tbottom: 0;\n\t}\n\n\t."+
+"\n\t}\n\n\t."+this.imageContainer+"[data-position='6'] .flickrCoverflow-image {\n\t\t"+c("perspective(700px) scale(.2) translateZ(0) rotateY(0)")+"\n\t}\n\t\n\t.flickrCoverflow-previous,\n\t.flickrCoverflow-next {\n\t\t"+c("translateZ(199px)")+"\n\t}\n</style>"};b.prototype.style=function(){return"<style>\n\t"+this.containerSelector+"{\n\t\ttext-align: center;\n\t\tposition: relative;\n\t\theight: "+this.height()+";\n\t\twidth: "+this.width()+";\n\t}\n\n\t."+this.imageContainer+" {\n\t\tdisplay: inline-block;\n\t\tvertical-align: bottom;\n\t\tposition: absolute;\n\t\tleft:0;\n\t\tbottom: 0;\n\t\tz-index: 0;\n\t}\n\n\t.flickrCoverflow-image {\n\t\tposition: relative;\n\t\tmin-width: 80px;\n\t\tmin-height: 80px;\n\t\tmargin: 0;\n\t\ttext-align: center;\n\t\tvertical-align: inherit;\n\t}\n\n\t.flickrCoverflow-title {\n\t\tdisplay: none;\n\t\tbackground-color: #000;\n\t\tcolor: #fff;\n\t\tfont-family: Helvetica, Tahoma, Arial, Verdana;\n\t\tfont-size: .7em;\n\t\twidth: 80px;\n\t\tword-wrap: break-word;\n\t\ttext-overflow: ellipsis;\n\t\toverflow:hidden;\n\t\twhite-space: nowrap;\n\t\tbottom: 0;\n\t}\n\n\t."+
this.imageContainer+"[data-template=yes],\n\t."+this.imageContainer+"[data-position='none'] {\n\t\tdisplay: none;\n\t\topacity: 0;\n\t}\n\n\t:not(."+this.imageContainer+"[data-position='none']) {\n\t\tdisplay: inline-block;\n\t\topacity: 1;\n\t}\n\t\n\t.flickrCoverflow-previous,\n\t.flickrCoverflow-next {\n\t\tposition: absolute;\n\t\tz-index: 3;\n\t\twidth: 50%;\n\t\theight: 100%;\n\t\tcursor: pointer;\n\t}\n\t\n\t.flickrCoverflow-previous {\n\t\tleft: 0;\n\t}\n\t\n\t.flickrCoverflow-next {\n\t\tright: 0;\n\t}\n\n\n\n\t."+
this.imageContainer+"[data-position='2'] .flickrCoverflow-image,\n\t."+this.imageContainer+"[data-position='4'] .flickrCoverflow-image {\n\t\tbox-shadow: 0 0 10px #000;\n\t}\n\n\t."+this.imageContainer+"[data-position='3'] .flickrCoverflow-image {\n\t\tbox-shadow: 0 0 20px #000;\n\t}\n\n\n\n\t."+this.imageContainer+"[data-position='0'] {\n\t\tz-index: 0;\n\t\topacity: 0;\n\t\t"+c("translateX("+this.position(0)+") translateZ(0)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='1'] {\n\t\tz-index: 1;\n\t\t"+
c("translateX("+this.position(1)+") translateZ(0)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='2'] {\n\t\tz-index: 2;\n\t\t"+c("translateX("+this.position(2)+") translateZ(100px)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='3'] {\n\t\tz-index: 4;\n\t\t"+c("translateX("+this.position(3)+") translateZ(200px)")+"\n\t}\n\n\t."+this.imageContainer+"[data-position='4'] {\n\t\tz-index: 2;\n\t\t"+c("translateX("+this.position(4)+") translateZ(100px)")+"\n\t}\n\n\t."+this.imageContainer+
View
1  src/js/flickr-coverflow.coffee
@@ -101,6 +101,7 @@ class FlickrCoverFlowStyle
min-height: 80px;
margin: 0;
text-align: center;
+ vertical-align: inherit;
}
.flickrCoverflow-title {
Please sign in to comment.
Something went wrong with that request. Please try again.