├── LICENSE
├── README.rst
├── demo
├── index.html
├── untitled-3-0.jpg
├── untitled-3-1.jpg
├── untitled-3-10.jpg
├── untitled-3-11.jpg
├── untitled-3-12.jpg
├── untitled-3-13.jpg
├── untitled-3-14.jpg
├── untitled-3-15.jpg
├── untitled-3-16.jpg
├── untitled-3-17.jpg
├── untitled-3-18.jpg
├── untitled-3-19.jpg
├── untitled-3-2.jpg
├── untitled-3-3.jpg
├── untitled-3-4.jpg
├── untitled-3-5.jpg
├── untitled-3-6.jpg
├── untitled-3-7.jpg
├── untitled-3-8.jpg
└── untitled-3-9.jpg
├── jquery-gp-gallery.komodoproject
└── src
├── jquery-gp-gallery.css
├── jquery-gp-gallery.js
└── jquery.js
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2011-2014, Ionel Cristian Mărieș
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
5 | following conditions are met:
6 |
7 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
8 | disclaimer.
9 |
10 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following
11 | disclaimer in the documentation and/or other materials provided with the distribution.
12 |
13 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
14 | INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
15 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
16 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
17 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
18 | WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
19 | THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
20 |
--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
1 | ==========================================================
2 | jQuery gallery plugin (a la google plus gallery)
3 | ==========================================================
4 |
5 | Gallery that resizes the images to fit the container width and show zoomed in images on hover.
6 |
7 |
8 | Usage
9 | =====
10 |
11 | ::
12 |
13 | $(container_selector).gpGallery(item_selector)
14 |
15 | Where ``container_selector`` and ``item_selector`` are string containing jquery expressions for
16 | selecting elements. You want to have the ``container_selector`` matching a single element.
17 |
18 | Example::
19 |
20 |
21 |
22 |
23 |
24 | ...
25 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
4 |
5 |
--------------------------------------------------------------------------------
/src/jquery-gp-gallery.css:
--------------------------------------------------------------------------------
1 | .gp-gallery-picture-zoom {
2 | border: 1px solid #bbb;
3 | margin: -6px 0 0 -6px;
4 | position: absolute;
5 | z-index: 100;
6 | padding: 5px;
7 | background: white;
8 | box-shadow: 0 0 10px #999;
9 | }
10 | .gp-gallery-picture-hover {
11 | box-shadow: 1px 1px 5px #333;
12 | }
13 |
--------------------------------------------------------------------------------
/src/jquery-gp-gallery.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $.fn.gpGallery = function(selector, options) {
3 | var $settings = {
4 | is_first_big: true,
5 | row_min_height: 180,
6 | row_max_height: 250,
7 | row_max_width: null,
8 | gutter: 5
9 | };
10 | if (options) {
11 | $.extend($settings, options);
12 | }
13 |
14 | function getWidthForBucket(bucket, extra) {
15 | var width = 0;
16 | if (bucket.length) {
17 | width = $settings.gutter * (bucket.length - 1);
18 | $.each(bucket, function(idx, item) {
19 | width += item.width;
20 | });
21 | }
22 | if (extra) {
23 | width += extra.width;
24 | }
25 | return width;
26 | }
27 |
28 | return this.each(function() {
29 | var $container = $(this);
30 | var max_bucket_width = $settings.row_max_width || $container.width();
31 | var buckets = [],
32 | last_bucket = {
33 | items: [],
34 | width: 0,
35 | height: 0
36 | };
37 | $container.find(selector).each(function() {
38 | var $this = $(this);
39 | var $pic = $this;
40 |
41 |
42 | if ($pic[0].nodeName.toUpperCase() != 'IMG') {
43 | $pic = $pic.find('img');
44 | } else {
45 | $this = $('').insertBefore($pic).append($pic);
46 | }
47 | if (!$pic.length) return;
48 |
49 | $this.css({width: 'auto', float: 'left', position: 'relative'});
50 |
51 | var item = {
52 | pic: $pic,
53 | container: $this,
54 | original_height: $pic.height() || $pic.attr('height'),
55 | original_width: $pic.width() || $pic.attr('width')
56 | };
57 | item.aspect = item.original_width / item.original_height;
58 | item.scale = $settings.row_min_height / item.original_height;
59 | item.width = item.original_width * item.scale;
60 | item.height = item.original_height * item.scale;
61 | var new_bucket_width = getWidthForBucket(last_bucket.items, item);
62 | if (new_bucket_width > max_bucket_width) {
63 | buckets.push(last_bucket);
64 | last_bucket = {
65 | items: [],
66 | width: 0,
67 | height: 0
68 | };
69 | }
70 | last_bucket.items.push(item);
71 | });
72 | buckets.push(last_bucket);
73 | last_bucket.last = true;
74 |
75 | $.each(buckets, function(idx, bucket) {
76 | if (!bucket.last) {
77 | bucket.scale = (max_bucket_width - (bucket.items.length - 1) * $settings.gutter) / getWidthForBucket(bucket.items);
78 | }
79 | var $last_item;
80 |
81 | $.each(bucket.items, function(idx2, item) {
82 | if (bucket.scale) {
83 | item.width = Math.round(item.width * bucket.scale);
84 | item.height = Math.round(item.height * bucket.scale);
85 | }
86 | var pic = item.pic,
87 | container = item.container;
88 | $last_item = item;
89 |
90 | pic.css({
91 | height: item.height+"px",
92 | width: item.width+"px"
93 | });
94 | item.container.css({
95 | height: item.height+"px",
96 | width: item.width+"px",
97 | marginTop: $settings.gutter + 'px'
98 | });
99 | if (idx2 > 0) {
100 | item.container.css({
101 | marginLeft: $settings.gutter + 'px'
102 | });
103 | } else {
104 | item.container.css({
105 | clear: 'left'
106 | });
107 | }
108 | pic.is_hover = null;
109 | pic.hover(function() {
110 | pic.stop().addClass('gp-gallery-picture-hover');
111 | container.addClass('gp-gallery-hover');
112 |
113 | if (item.original_height > item.height && item.original_width > item.width) {
114 | pic.is_hover = setTimeout(function() {
115 | pic.removeClass('gp-gallery-picture-hover');
116 | pic.addClass('gp-gallery-picture-zoom');
117 |
118 | if (pic.is_hover) {
119 | pic.animate({
120 | marginTop: '-' + (item.original_height - item.height)/2 + 'px',
121 | marginLeft: '-' + (item.original_width - item.width)/2 + 'px',
122 | width: item.original_width + 'px',
123 | height: item.original_height + 'px'
124 | }, 100);
125 | }
126 | }, 200);
127 | }
128 | }, function() {
129 | if (pic.is_hover) {
130 | clearTimeout(pic.is_hover);
131 | pic.is_hover = null;
132 | }
133 | if (item.original_height > item.height && item.original_width > item.width && pic.hasClass('gp-gallery-picture-zoom')) {
134 | pic.stop().animate({
135 | marginTop: '-6px',
136 | marginLeft: '-6px',
137 | width: item.width + 'px',
138 | height: item.height + 'px'
139 | }, 50, function() {
140 | container.removeClass('gp-gallery-hover');
141 | pic.removeClass('gp-gallery-picture-hover').removeClass('gp-gallery-picture-zoom').css({
142 | margin: ''
143 | });
144 | });
145 | } else {
146 | container.removeClass('gp-gallery-hover');
147 | pic.removeClass('gp-gallery-picture-hover').removeClass('gp-gallery-picture-zoom');
148 | }
149 | });
150 | });
151 | if (!bucket.last && $last_item) {
152 | $last_item.width = $last_item.width + max_bucket_width - getWidthForBucket(bucket.items);
153 | $last_item.pic.css({
154 | width: $last_item.width + 'px'
155 | });
156 | }
157 | });
158 | });
159 | };
160 | })(jQuery);
161 |
--------------------------------------------------------------------------------
22 | 
23 | 
24 | ...
25 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 |
46 |