├── .gitignore ├── support ├── .DS_Store ├── images │ ├── 0.2.0-preview.png │ ├── ed-lea-dribbble-1.png │ ├── ed-lea-dribbble-2.png │ ├── ed-lea-dribbble-3.png │ ├── ed-lea-dribbble-4.png │ ├── ed-lea-dribbble-5.png │ ├── ed-lea-dribbble-6.png │ ├── ed-lea-dribbble-7.png │ ├── ed-lea-dribbble-8.png │ ├── ed-lea-dribbble-9.png │ └── ed-lea-dribbble-10.jpg └── examples.css ├── extras ├── jquery.removeWhitespace.min.js ├── jquery.removeWhitespace.js ├── jquery.collageCaption.min.js └── jquery.collageCaption.js ├── README.md ├── collageplus.jquery.json ├── jquery.collagePlus.min.js ├── css └── transitions.css ├── examples ├── example2.html ├── example.html ├── example1.html ├── example3.html ├── example4.html ├── example5.html ├── example6.html ├── example-size-in-tag.html └── example-multiple-instances.html └── jquery.collagePlus.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea/ 3 | -------------------------------------------------------------------------------- /support/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/.DS_Store -------------------------------------------------------------------------------- /support/images/0.2.0-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/0.2.0-preview.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-1.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-2.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-3.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-4.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-5.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-6.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-7.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-8.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-9.png -------------------------------------------------------------------------------- /support/images/ed-lea-dribbble-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ed-lea/jquery-collagePlus/HEAD/support/images/ed-lea-dribbble-10.jpg -------------------------------------------------------------------------------- /extras/jquery.removeWhitespace.min.js: -------------------------------------------------------------------------------- 1 | (function(a){a.fn.removeWhitespace=function(){this.contents().filter(function(){return this.nodeType==3&&!/\S/.test(this.nodeValue)}).remove();return this}})(jQuery) -------------------------------------------------------------------------------- /extras/jquery.removeWhitespace.js: -------------------------------------------------------------------------------- 1 | ;(function( $ ) { 2 | 3 | $.fn.removeWhitespace = function() 4 | { 5 | this.contents().filter( 6 | function() { 7 | return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); 8 | } 9 | ).remove(); 10 | return this; 11 | } 12 | 13 | })( jQuery ); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##CollagePlus for jQuery 2 | 3 | Create an image gallery like Google+ Albums or Flickr profile pages. 4 | 5 | Project home page: http://collageplus.edlea.com/ 6 | 7 | 8 | Example 9 | ------- 10 | ![Gallery Preview](https://raw.github.com/ed-lea/jquery-collagePlus/master/support/images/0.2.0-preview.png) 11 | 12 | Try the [live example](http://collageplus.edlea.com/example.html "Live CollagePlus example") or play around with a [jsfiddle](http://jsfiddle.net/edlea/uZv3n/) version 13 | 14 | 15 | 16 | 17 | For detailed usage instructions please visit http://collageplus.edlea.com/ 18 | -------------------------------------------------------------------------------- /collageplus.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "collageplus", 3 | "title": "CollagePlus Gallery", 4 | "description": "An image grid gallery plugin for jQuery.", 5 | "keywords": [ 6 | "grid", 7 | "gallery", 8 | "photography", 9 | "album", 10 | "masonry" 11 | ], 12 | "version": "0.3.3", 13 | "author": { 14 | "name": "Ed Lea", 15 | "url": "http://edlea.com" 16 | }, 17 | "maintainers": [ 18 | { 19 | "name": "Ed Lea", 20 | "email": "edleadesign@gmail.com", 21 | "url": "http://edlea.com" 22 | } 23 | ], 24 | "licenses": [ 25 | { 26 | "type": "MIT", 27 | "url": "http://www.opensource.org/licenses/mit-license.php" 28 | } 29 | ], 30 | "bugs": "https://github.com/ed-lea/jquery-collagePlus/issues", 31 | "homepage": "http://collageplus.edlea.com/", 32 | "docs": "http://collageplus.edlea.com/", 33 | "download": "https://github.com/ed-lea/jquery-collagePlus/zipball/master", 34 | "dependencies": { 35 | "jquery": ">=1.7" 36 | } 37 | } -------------------------------------------------------------------------------- /extras/jquery.collageCaption.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * jQuery collageCaption Plugin v0.1.1 4 | * extra for collagePlus plugin 5 | * https://github.com/ed-lea/jquery-collagePlus 6 | * 7 | * Copyright 2012, Ed Lea twitter.com/ed_lea 8 | * 9 | * built for http://qiip.me 10 | * 11 | * Dual licensed under the MIT or GPL Version 2 licenses. 12 | * http://www.opensource.org/licenses/mit-license.php 13 | * http://www.opensource.org/licenses/GPL-2.0 14 | * 15 | */ 16 | ;(function(e){e.fn.collageCaption=function(t){var n={images:e(this).children(),background:"black",opacity:"0.5",speed:100,cssClass:"Caption"};var r=e.extend({},n,t);return this.each(function(){var t=0,n=[];r.images.each(function(t){var n=e(this);if(typeof n.data("caption")=="undefined"){return}var i='
'+n.data("caption")+"
";n.append(i);var s=n.find("."+r.cssClass),o=n.find(".Caption_Background"),u=n.find(".Caption_Content");var a=s.height();o.height(a);u.css("top","-"+a+"px");n.bind({mouseenter:function(e){s.animate({top:-1*a},{duration:r.speed,queue:false})},mouseleave:function(e){s.animate({top:0},{duration:r.speed,queue:false})}})});return this})}})(jQuery); -------------------------------------------------------------------------------- /jquery.collagePlus.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * jQuery collagePlus Plugin v0.3.3 4 | * https://github.com/ed-lea/jquery-collagePlus 5 | * 6 | * Copyright 2012, Ed Lea twitter.com/ed_lea 7 | * 8 | * built for http://qiip.me 9 | * 10 | * Dual licensed under the MIT or GPL Version 2 licenses. 11 | * http://www.opensource.org/licenses/mit-license.php 12 | * http://www.opensource.org/licenses/GPL-2.0 13 | * 14 | */ 15 | ;(function(e){e.fn.collagePlus=function(t){function n(t,n,i,s){var o=i.padding*(t.length-1)+t.length*t[0][3],u=i.albumWidth-o,a=u/(n-o),f=o,l=na.albumWidth&&s.length!=0){n(s,r-a.padding,a,o);delete r;delete s;r=0;s=[];o+=1}if(a.images.length-1==t&&s.length!=0){n(s,r,a,o);delete r;delete s;r=0;s=[];o+=1}})})};e.fn.collagePlus.defaults={targetHeight:400,fadeSpeed:"fast",display:"inline-block",effect:"default",direction:"vertical",allowPartialLastRow:false}})(jQuery); -------------------------------------------------------------------------------- /support/examples.css: -------------------------------------------------------------------------------- 1 | /* 2 | This CSS is really just for this demo page 3 | But take a look at the comments to see how I set padding 4 | and borders on the images 5 | */ 6 | html body{ 7 | margin:0; 8 | padding:0; 9 | background-color:rgb(230, 230, 230); 10 | font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 11 | } 12 | a{ 13 | color:#09F; 14 | text-decoration:none; 15 | } 16 | .header{ 17 | padding:0; 18 | background-color: #272D35; 19 | } 20 | .header h1{ 21 | font-size: 14px; 22 | color: rgb(164, 177, 190); 23 | display:inline-block; 24 | font-weight:bold; 25 | margin:0; 26 | padding:10px; 27 | } 28 | .header h1 a{ 29 | color:#41505A; 30 | } 31 | .header h1 a:hover{ 32 | color:#09F; 33 | } 34 | .header nav{ 35 | background-color:rgb(65, 68, 75); 36 | padding:40px; 37 | border-bottom:1px solid #CCC; 38 | margin-bottom:0px; 39 | } 40 | .header nav a{ 41 | display: inline-block; 42 | padding: 4px 6px; 43 | margin-right:10px; 44 | background-color:#09F; 45 | color:#FFF; 46 | -webkit-border-radius:4px; 47 | -moz-border-radius:4px; 48 | border-radius:4px; 49 | -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.1); 50 | -moz-box-shadow: 0 3px 1px rgba(0,0,0,0.1); 51 | box-shadow: 0 3px 1px rgba(0,0,0,0.1); 52 | text-shadow:0 2px 1px rgba(0,0,20,0.1); 53 | } 54 | .Example_Details{ 55 | padding:20px; 56 | color:#272D35; 57 | font-size:14px; 58 | background-color: #FFFFFF; 59 | margin-top:0; 60 | } 61 | h1.instance-header{ 62 | font-size: 14px; 63 | padding:20px; 64 | margin-bottom:10px; 65 | margin-top: 30px; 66 | } 67 | a.return{ 68 | font-size:12px; 69 | display:inline-block; 70 | padding:12px 10px 10px 10px; 71 | float:right; 72 | text-transform: uppercase; 73 | color:#41505A; 74 | } 75 | a.return:hover{ 76 | color:#09F; 77 | } 78 | .footnote{ 79 | color:#999; 80 | padding:10px; 81 | font-size:12px; 82 | } 83 | .Collage{ 84 | 85 | /*This is where you set the padding you want between the images*/ 86 | padding:10px; 87 | 88 | } 89 | .Collage img{ 90 | margin:0; 91 | padding:0; 92 | display:inline-block; 93 | vertical-align:bottom; 94 | opacity:1; 95 | 96 | /*This is where you set the border you want for the image*/ 97 | border:6px solid #FFF; 98 | } 99 | 100 | 101 | /* In this example, this is the main item being resized */ 102 | .Image_Wrapper{ 103 | /* to get the fade in effect, set opacity to 0 on the first element within the gallery area */ 104 | opacity:0; 105 | -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1); 106 | -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1); 107 | box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1); 108 | -moz-border-radius: 3px; 109 | -webkit-border-radius: 3px; 110 | border-radius: 3px; 111 | } 112 | 113 | .Caption{ 114 | font-size:14px; 115 | font-weight:normal; 116 | font-family:arial; 117 | } 118 | .Caption_Content{ 119 | /* padding:10px; */ 120 | color:#FFF; 121 | padding:20px; 122 | } -------------------------------------------------------------------------------- /extras/jquery.collageCaption.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * jQuery collageCaption Plugin v0.1.1 4 | * extra for collagePlus plugin 5 | * https://github.com/ed-lea/jquery-collagePlus 6 | * 7 | * Copyright 2012, Ed Lea twitter.com/ed_lea 8 | * 9 | * built for http://qiip.me 10 | * 11 | * Dual licensed under the MIT or GPL Version 2 licenses. 12 | * http://www.opensource.org/licenses/mit-license.php 13 | * http://www.opensource.org/licenses/GPL-2.0 14 | * 15 | */ 16 | 17 | 18 | 19 | 20 | 21 | ;(function( $ ) { 22 | 23 | 24 | $.fn.collageCaption = function( options ) { 25 | 26 | 27 | // Defaults 28 | var defaults = { 29 | // object that contains the images to collage 30 | 'images' : $(this).children(), 31 | // colour for the caption background 32 | 'background' : "black", 33 | // opacity for the caption background 34 | 'opacity' : "0.5", 35 | // speed of the reveal / hide animation 36 | 'speed' : 100, 37 | // css class for the caption wrapper 38 | 'cssClass' : "Caption" 39 | }; 40 | 41 | var settings = $.extend({}, defaults, options); 42 | 43 | return this.each(function() { 44 | 45 | /* 46 | * 47 | * set up vars 48 | * 49 | */ 50 | 51 | // track row width 52 | var row = 0, 53 | // collect elements to be resized in current row 54 | elements = []; 55 | 56 | 57 | settings.images.each( 58 | function(index){ 59 | 60 | /* 61 | * 62 | * Cache selector 63 | * 64 | */ 65 | var $this = $(this); 66 | 67 | /* 68 | * 69 | * Do we need to do anything with captions 70 | * 71 | */ 72 | if (typeof $this.data("caption") == 'undefined'){ 73 | return; 74 | } 75 | 76 | /* 77 | * 78 | * The HTML to append to the containing element 79 | * 80 | */ 81 | var html = '
' + 84 | $this.data("caption") + '
'; 85 | $this.append(html); 86 | 87 | /* 88 | * 89 | * Cache the caption selectors 90 | * 91 | */ 92 | var $cap = $this.find("." + settings.cssClass), 93 | $capbg = $this.find(".Caption_Background"), 94 | $captxt = $this.find(".Caption_Content"); 95 | 96 | 97 | /* 98 | * 99 | * Calculate the caption height 100 | * 101 | */ 102 | var h = $cap.height(); 103 | 104 | 105 | /* 106 | * 107 | * Set the background for the caption 108 | * 109 | */ 110 | $capbg.height(h); 111 | 112 | /* 113 | * 114 | * Overlap the caption content 115 | * 116 | */ 117 | $captxt.css("top", "-" + h + "px"); 118 | 119 | 120 | /* 121 | * 122 | * Bind the rollover action to the element 123 | * 124 | */ 125 | $this.bind( 126 | { 127 | mouseenter: function(e) { 128 | $cap.animate({ top: (-1 * h) }, { duration: settings.speed, queue: false }); 129 | }, 130 | mouseleave: function(e) { 131 | $cap.animate({ top: 0 }, { duration: settings.speed, queue: false }); 132 | } 133 | } 134 | ); 135 | } 136 | ); 137 | return this; 138 | }); 139 | 140 | 141 | 142 | }; 143 | })( jQuery ); -------------------------------------------------------------------------------- /css/transitions.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | A library of transitions for revealing the loaded images 4 | (Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/ 5 | 6 | */ 7 | 8 | .effect-parent { 9 | -webkit-perspective: 1300px; 10 | -moz-perspective: 1300px; 11 | perspective: 1300px; 12 | } 13 | 14 | 15 | /* EFFECT 1 */ 16 | .effect-1 { 17 | -webkit-transform-style: preserve-3d; 18 | -moz-transform-style: preserve-3d; 19 | transform-style: preserve-3d; 20 | -webkit-transform-origin: 50% 50% -300px; 21 | -moz-transform-origin: 50% 50% -300px; 22 | transform-origin: 50% 50% -300px; 23 | -webkit-transform: rotateX(-180deg); 24 | -moz-transform: rotateX(-180deg); 25 | transform: rotateX(-180deg); 26 | -webkit-animation: fly ease-in-out forwards; 27 | -moz-animation: fly ease-in-out forwards; 28 | animation: fly ease-in-out forwards; 29 | } 30 | @-webkit-keyframes fly { 31 | 100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; } 32 | } 33 | 34 | @-moz-keyframes fly { 35 | 100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; } 36 | } 37 | 38 | @keyframes fly { 39 | 100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; } 40 | } 41 | 42 | 43 | 44 | /* EFFECT 2 */ 45 | .effect-2 { 46 | -webkit-transform: translateY(200px); 47 | -moz-transform: translateY(200px); 48 | transform: translateY(200px); 49 | -webkit-animation: moveUp ease forwards; 50 | -moz-animation: moveUp ease forwards; 51 | animation: moveUp ease forwards; 52 | } 53 | 54 | @-webkit-keyframes moveUp { 55 | to { -webkit-transform: translateY(0); opacity: 1; } 56 | } 57 | 58 | @-moz-keyframes moveUp { 59 | to { -moz-transform: translateY(0); opacity: 1; } 60 | } 61 | 62 | @keyframes moveUp { 63 | to { transform: translateY(0); opacity: 1; } 64 | } 65 | 66 | 67 | /* EFFECT 3 */ 68 | .effect-3 { 69 | -webkit-transform-style: preserve-3d; 70 | -moz-transform-style: preserve-3d; 71 | transform-style: preserve-3d; 72 | -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg); 73 | -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg); 74 | transform: translateZ(400px) translateY(300px) rotateX(-90deg); 75 | -webkit-animation: fallPerspective ease-in-out forwards; 76 | -moz-animation: fallPerspective ease-in-out forwards; 77 | animation: fallPerspective ease-in-out forwards; 78 | } 79 | 80 | @-webkit-keyframes fallPerspective { 81 | 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } 82 | } 83 | 84 | @-moz-keyframes fallPerspective { 85 | 100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } 86 | } 87 | 88 | @keyframes fallPerspective { 89 | 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } 90 | } 91 | 92 | 93 | /* EFFECT 4 */ 94 | .effect-4 { 95 | -webkit-transform-style: preserve-3d; 96 | -moz-transform-style: preserve-3d; 97 | transform-style: preserve-3d; 98 | -webkit-transform-origin: 0% 0%; 99 | -moz-transform-origin: 0% 0%; 100 | transform-origin: 0% 0%; 101 | -webkit-transform: rotateX(-80deg); 102 | -moz-transform: rotateX(-80deg); 103 | transform: rotateX(-80deg); 104 | -webkit-animation: flip ease-in-out forwards; 105 | -moz-animation: flip ease-in-out forwards; 106 | animation: flip ease-in-out forwards; 107 | } 108 | 109 | @-webkit-keyframes flip { 110 | 100% { -webkit-transform: rotateX(0deg); opacity: 1; } 111 | } 112 | 113 | @-moz-keyframes flip { 114 | 100% { -moz-transform: rotateX(0deg); opacity: 1; } 115 | } 116 | 117 | @keyframes flip { 118 | 100% { transform: rotateX(0deg); opacity: 1; } 119 | } 120 | 121 | 122 | /* EFFECT 5 */ 123 | .effect-5 { 124 | -webkit-transform-style: preserve-3d; 125 | -moz-transform-style: preserve-3d; 126 | transform-style: preserve-3d; 127 | -webkit-transform: rotateY(-180deg); 128 | -moz-transform: rotateY(-180deg); 129 | transform: rotateY(-180deg); 130 | -webkit-animation: moveUp ease-in-out forwards; 131 | -moz-animation: moveUp ease-in-out forwards; 132 | animation: moveUp ease-in-out forwards; 133 | } 134 | 135 | 136 | /* EFFECT 6 */ 137 | .effect-6 { 138 | 139 | -webkit-transform: scale(0.638) translate(-179px); 140 | -moz-transform: scale(0.638) translate(-179px); 141 | transform: scale(0.638) translate(-179px); 142 | 143 | -webkit-animation: moveUp ease-in-out forwards; 144 | -moz-animation: moveUp ease-in-out forwards; 145 | animation: moveUp ease-in-out forwards; 146 | } 147 | 148 | 149 | 150 | 151 | 152 | /* Universal durations */ 153 | .effect-duration-1{ 154 | -webkit-animation-duration: .4s; 155 | -moz-animation-duration: .4s; 156 | animation-duration: .4s; 157 | } 158 | .effect-duration-2{ 159 | -webkit-animation-duration: .5s; 160 | -moz-animation-duration: .5s; 161 | animation-duration: .5s; 162 | } 163 | .effect-duration-3{ 164 | -webkit-animation-duration: .6s; 165 | -moz-animation-duration: .6s; 166 | animation-duration: .6s; 167 | } 168 | .effect-duration-4{ 169 | -webkit-animation-duration: .7s; 170 | -moz-animation-duration: .7s; 171 | animation-duration: .7s; 172 | } 173 | .effect-duration-5{ 174 | -webkit-animation-duration: .8s; 175 | -moz-animation-duration: .8s; 176 | animation-duration: .8s; 177 | } 178 | .effect-duration-6{ 179 | -webkit-animation-duration: .9s; 180 | -moz-animation-duration: .9s; 181 | animation-duration: .9s; 182 | } 183 | .effect-duration-7{ 184 | -webkit-animation-duration: .95s; 185 | -moz-animation-duration: .95s; 186 | animation-duration: .95s; 187 | } 188 | .effect-duration-8{ 189 | -webkit-animation-duration: 1s; 190 | -moz-animation-duration: 1s; 191 | animation-duration: 1s; 192 | } 193 | .effect-duration-9{ 194 | -webkit-animation-duration: 1.05s; 195 | -moz-animation-duration: 1.05s; 196 | animation-duration: 1.05s; 197 | } 198 | .effect-duration-10{ 199 | -webkit-animation-duration: 1.1s; 200 | -moz-animation-duration: 1.1s; 201 | animation-duration: 1.1s; 202 | } -------------------------------------------------------------------------------- /examples/example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 57 | 58 | 59 |
60 | Back to plugin 61 |

CollagePlus jQuery Plugin Example

62 | 63 | 74 |
75 | 76 | 77 |
78 | 79 | 80 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

81 | 82 | -------------------------------------------------------------------------------- /examples/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 59 | 60 | 61 |
62 | Back to plugin 63 |

CollagePlus jQuery Plugin Example

64 | 65 | 76 |
77 | 78 |
79 | 80 | 81 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

82 | 83 | 84 | -------------------------------------------------------------------------------- /examples/example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

85 | 86 | -------------------------------------------------------------------------------- /examples/example3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

85 | 86 | -------------------------------------------------------------------------------- /examples/example4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

85 | 86 | -------------------------------------------------------------------------------- /examples/example5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

85 | 86 | -------------------------------------------------------------------------------- /examples/example6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

85 | 86 | -------------------------------------------------------------------------------- /examples/example-size-in-tag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 58 | 59 | 60 |
61 | Back to plugin 62 |

CollagePlus jQuery Plugin Example

63 | 64 | 75 |
76 | 77 |

78 | If you have the image sizes in the image element e.g. <img src="myimage.jpg" width="100" height="50" /> 79 | then you don't need to load all images first for the plugin to work i.e. $(window).load(... is not required.

80 | This demo has a simulated loading delay on images to show what happens. Please note that you will need all images sizes. Miss one and it won't work. 81 |

82 | 83 |
84 | 85 | 86 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://deelay.me/4500?http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

87 | 88 | 89 | -------------------------------------------------------------------------------- /examples/example-multiple-instances.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CollagePlus for jQuery Example 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | 26 | 61 | 62 | 63 |
64 | Back to plugin 65 |

CollagePlus jQuery Plugin Example

66 | 67 | 78 |
79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |

Instance 1

87 |
88 | 89 | 90 |

Instance 2

91 |
92 | 93 | 94 |

Instance 3

95 | 96 |
97 | 98 | 99 |

CollagePlus for jQuery by @ed_lea
Credits: Dynamic placeholder images by http://placehold.it/ and colour schemes Giant Goldfish and Thought Provoking
Reveal Effects from Codedrops

100 | 101 | 102 | -------------------------------------------------------------------------------- /jquery.collagePlus.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * jQuery collagePlus Plugin v0.3.3 4 | * https://github.com/ed-lea/jquery-collagePlus 5 | * 6 | * Copyright 2012, Ed Lea twitter.com/ed_lea 7 | * 8 | * built for http://qiip.me 9 | * 10 | * Dual licensed under the MIT or GPL Version 2 licenses. 11 | * http://www.opensource.org/licenses/mit-license.php 12 | * http://www.opensource.org/licenses/GPL-2.0 13 | * 14 | */ 15 | 16 | 17 | 18 | 19 | 20 | ;(function( $ ) { 21 | 22 | 23 | $.fn.collagePlus = function( options ) { 24 | 25 | return this.each(function() { 26 | 27 | /* 28 | * 29 | * set up vars 30 | * 31 | */ 32 | 33 | // track row width by adding images, padding and css borders etc 34 | var row = 0, 35 | // collect elements to be re-sized in current row 36 | elements = [], 37 | // track the number of rows generated 38 | rownum = 1, 39 | // needed for creating some additional defaults that are actually obtained 40 | // from the dom, which maybe doesn't make them defaults ?! 41 | $this = $(this); 42 | 43 | 44 | // width of the area the collage will be in 45 | $.fn.collagePlus.defaults.albumWidth = $this.width(); 46 | // padding between the images. Using padding left as we assume padding is even all the way round 47 | $.fn.collagePlus.defaults.padding = parseFloat( $this.css('padding-left') ); 48 | // object that contains the images to collage 49 | $.fn.collagePlus.defaults.images = $this.children(); 50 | 51 | var settings = $.extend({}, $.fn.collagePlus.defaults, options); 52 | 53 | settings.images.each( 54 | function(index){ 55 | 56 | /* 57 | * 58 | * Cache selector 59 | * Even if first child is not an image the whole sizing is based on images 60 | * so where we take measurements, we take them on the images 61 | * 62 | */ 63 | var $this = $(this), 64 | $img = ($this.is("img")) ? $this : $(this).find("img"); 65 | 66 | 67 | 68 | /* 69 | * 70 | * get the current image size. Get image size in this order 71 | * 72 | * 1. from tag 73 | * 2. from data set from initial calculation 74 | * 3. after loading the image and checking it's actual size 75 | * 76 | */ 77 | var w = (typeof $img.data("width") != 'undefined') ? $img.data("width") : $img.width(), 78 | h = (typeof $img.data("height") != 'undefined') ? $img.data("height") : $img.height(); 79 | 80 | 81 | 82 | /* 83 | * 84 | * Get any current additional properties that may affect the width or height 85 | * like css borders for example 86 | * 87 | */ 88 | var imgParams = getImgProperty($img); 89 | 90 | 91 | /* 92 | * 93 | * store the original size for resize events 94 | * 95 | */ 96 | $img.data("width", w); 97 | $img.data("height", h); 98 | 99 | 100 | 101 | /* 102 | * 103 | * calculate the w/h based on target height 104 | * this is our ideal size, but later we'll resize to make it fit 105 | * 106 | */ 107 | var nw = Math.ceil(w/h*settings.targetHeight), 108 | nh = Math.ceil(settings.targetHeight); 109 | 110 | /* 111 | * 112 | * Keep track of which images are in our row so far 113 | * 114 | */ 115 | elements.push([this, nw, nh, imgParams['w'], imgParams['h']]); 116 | 117 | /* 118 | * 119 | * calculate the width of the element including extra properties 120 | * like css borders 121 | * 122 | */ 123 | row += nw + imgParams['w'] + settings.padding; 124 | 125 | /* 126 | * 127 | * if the current row width is wider than the parent container 128 | * it's time to make a row out of our images 129 | * 130 | */ 131 | if( row > settings.albumWidth && elements.length != 0 ){ 132 | 133 | // call the method that calculates the final image sizes 134 | // remove one set of padding as it's not needed for the last image in the row 135 | resizeRow(elements, (row - settings.padding), settings, rownum); 136 | 137 | // reset our row 138 | delete row; 139 | delete elements; 140 | row = 0; 141 | elements = []; 142 | rownum += 1; 143 | } 144 | 145 | 146 | /* 147 | * 148 | * if the images left are not enough to make a row 149 | * then we'll force them to make one anyway 150 | * 151 | */ 152 | if ( settings.images.length-1 == index && elements.length != 0){ 153 | resizeRow(elements, row, settings, rownum); 154 | 155 | // reset our row 156 | delete row; 157 | delete elements; 158 | row = 0; 159 | elements = []; 160 | rownum += 1; 161 | } 162 | } 163 | ); 164 | 165 | }); 166 | 167 | function resizeRow( obj, row, settings, rownum) { 168 | 169 | /* 170 | * 171 | * How much bigger is this row than the available space? 172 | * At this point we have adjusted the images height to fit our target height 173 | * so the image size will already be different from the original. 174 | * The resizing we're doing here is to adjust it to the album width. 175 | * 176 | * We also need to change the album width (basically available space) by 177 | * the amount of padding and css borders for the images otherwise 178 | * this will skew the result. 179 | * 180 | * This is because padding and borders remain at a fixed size and we only 181 | * need to scale the images. 182 | * 183 | */ 184 | var imageExtras = (settings.padding * (obj.length - 1)) + (obj.length * obj[0][3]), 185 | albumWidthAdjusted = settings.albumWidth - imageExtras, 186 | overPercent = albumWidthAdjusted / (row - imageExtras), 187 | // start tracking our width with know values that will make up the total width 188 | // like borders and padding 189 | trackWidth = imageExtras, 190 | // guess whether this is the last row in a set by checking if the width is less 191 | // than the parent width. 192 | lastRow = (row < settings.albumWidth ? true : false); 193 | 194 | 195 | 196 | 197 | 198 | /* 199 | * Resize the images by the above % so that they'll fit in the album space 200 | */ 201 | for (var i = 0; i < obj.length; i++) { 202 | 203 | 204 | 205 | var $obj = $(obj[i][0]), 206 | fw = Math.floor(obj[i][1] * overPercent), 207 | fh = Math.floor(obj[i][2] * overPercent), 208 | // if the element is the last in the row, 209 | // don't apply right hand padding (this is our flag for later) 210 | isNotLast = !!(( i < obj.length - 1 )); 211 | 212 | /* 213 | * Checking if the user wants to not stretch the images of the last row to fit the 214 | * parent element size 215 | */ 216 | if(settings.allowPartialLastRow === true && lastRow === true){ 217 | fw = obj[i][1]; 218 | fh = obj[i][2]; 219 | } 220 | 221 | 222 | /* 223 | * 224 | * Because we use % to calculate the widths, it's possible that they are 225 | * a few pixels out in which case we need to track this and adjust the 226 | * last image accordingly 227 | * 228 | */ 229 | trackWidth += fw; 230 | 231 | 232 | /* 233 | * 234 | * here we check if the combined images are exactly the width 235 | * of the parent. If not then we add a few pixels on to make 236 | * up the difference. 237 | * 238 | * This will alter the aspect ratio of the image slightly, but 239 | * by a noticable amount. 240 | * 241 | * If the user doesn't want full width last row, we check for that here 242 | * 243 | */ 244 | if(!isNotLast && trackWidth < settings.albumWidth){ 245 | if(settings.allowPartialLastRow === true && lastRow === true){ 246 | fw = fw; 247 | }else{ 248 | fw = fw + (settings.albumWidth - trackWidth); 249 | } 250 | } 251 | 252 | fw--; 253 | 254 | /* 255 | * 256 | * We'll be doing a few things to the image so here we cache the image selector 257 | * 258 | * 259 | */ 260 | var $img = ( $obj.is("img") ) ? $obj : $obj.find("img"); 261 | 262 | /* 263 | * 264 | * Set the width of the image and parent element 265 | * if the resized element is not an image, we apply it to the child image also 266 | * 267 | * We need to check if it's an image as the css borders are only measured on 268 | * images. If the parent is a div, we need make the contained image smaller 269 | * to accommodate the css image borders. 270 | * 271 | */ 272 | $img.width(fw); 273 | if( !$obj.is("img") ){ 274 | $obj.width(fw + obj[i][3]); 275 | } 276 | 277 | 278 | /* 279 | * 280 | * Set the height of the image 281 | * if the resized element is not an image, we apply it to the child image also 282 | * 283 | */ 284 | $img.height(fh); 285 | if( !$obj.is("img") ){ 286 | $obj.height(fh + obj[i][4]); 287 | } 288 | 289 | 290 | /* 291 | * 292 | * Apply the css extras like padding 293 | * 294 | */ 295 | applyModifications($obj, isNotLast, settings); 296 | 297 | 298 | /* 299 | * 300 | * Assign the effect to show the image 301 | * Default effect is using jquery and not CSS3 to support more browsers 302 | * Wait until the image is loaded to do this 303 | * 304 | */ 305 | 306 | $img 307 | .one('load', function (target) { 308 | return function(){ 309 | if( settings.effect == 'default'){ 310 | target.animate({opacity: '1'},{duration: settings.fadeSpeed}); 311 | } else { 312 | if(settings.direction == 'vertical'){ 313 | var sequence = (rownum <= 10 ? rownum : 10); 314 | } else { 315 | var sequence = (i <= 9 ? i+1 : 10); 316 | } 317 | /* Remove old classes with the "effect-" name */ 318 | target.removeClass(function (index, css) { 319 | return (css.match(/\beffect-\S+/g) || []).join(' '); 320 | }); 321 | target.addClass(settings.effect); 322 | target.addClass("effect-duration-" + sequence); 323 | } 324 | } 325 | }($obj)) 326 | /* 327 | * fix for cached or loaded images 328 | * For example if images are loaded in a "window.load" call we need to trigger 329 | * the load call again 330 | */ 331 | .each(function() { 332 | if(this.complete) $(this).trigger('load'); 333 | }); 334 | 335 | } 336 | 337 | 338 | 339 | 340 | 341 | } 342 | 343 | /* 344 | * 345 | * This private function applies the required css to space the image gallery 346 | * It applies it to the parent element so if an image is wrapped in a
then 347 | * the css is applied to the
348 | * 349 | */ 350 | function applyModifications($obj, isNotLast, settings) { 351 | var css = { 352 | // Applying padding to element for the grid gap effect 353 | 'margin-bottom' : settings.padding + "px", 354 | 'margin-right' : (isNotLast) ? settings.padding + "px" : "0px", 355 | // Set it to an inline-block by default so that it doesn't break the row 356 | 'display' : settings.display, 357 | // Set vertical alignment otherwise you get 4px extra padding 358 | 'vertical-align' : "bottom", 359 | // Hide the overflow to hide the caption 360 | 'overflow' : "hidden" 361 | }; 362 | 363 | return $obj.css(css); 364 | } 365 | 366 | 367 | /* 368 | * 369 | * This private function calculates any extras like padding, border associated 370 | * with the image that will impact on the width calculations 371 | * 372 | */ 373 | function getImgProperty( img ) 374 | { 375 | $img = $(img); 376 | var params = new Array(); 377 | params["w"] = (parseFloat($img.css("border-left-width")) + parseFloat($img.css("border-right-width"))); 378 | params["h"] = (parseFloat($img.css("border-top-width")) + parseFloat($img.css("border-bottom-width"))); 379 | return params; 380 | } 381 | 382 | }; 383 | 384 | $.fn.collagePlus.defaults = { 385 | // the ideal height you want your images to be 386 | 'targetHeight' : 400, 387 | // how quickly you want images to fade in once ready can be in ms, "slow" or "fast" 388 | 'fadeSpeed' : "fast", 389 | // how the resized block should be displayed. inline-block by default so that it doesn't break the row 390 | 'display' : "inline-block", 391 | // which effect you want to use for revealing the images (note CSS3 browsers only), 392 | 'effect' : 'default', 393 | // effect delays can either be applied per row to give the impression of descending appearance 394 | // or horizontally, so more like a flock of birds changing direction 395 | 'direction' : 'vertical', 396 | // Sometimes there is just one image on the last row and it gets blown up to a huge size to fit the 397 | // parent div width. To stop this behaviour, set this to true 398 | 'allowPartialLastRow' : false 399 | }; 400 | 401 | })( jQuery ); 402 | --------------------------------------------------------------------------------