Added initial code and a demo.

ionelmc · Nov 8, 2011 · c4b9b82 · c4b9b82
commit c4b9b82
Show file tree

Hide file tree

Showing 25 changed files with 7,413 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,46 @@
+<!doctype HTML>
+<html>
+<head>
+    <script src="../src/jquery.js"></script>
+    <script src="../src/jquery-gp-gallery.js"></script>
+    <script>
+        $(function() {
+            $('.pictures').gpGallery('img');
+        })
+    </script>
+    <link rel="stylesheet" type="text/css" media="screen" href="../src/jquery-gp-gallery.css"/>
+    <style type="text/css">
+        .pictures {
+            margin: 100px auto;
+            width: 980px;
+        }
+        .clear {
+            clear: both;
+        }
+    </style>
+</head>
+<body>
+
+<div class="pictures">
+    <img src="untitled-3-2.jpg" width="267" height="400"/>
+    <img src="untitled-3-16.jpg" width="400" height="267"/>
+    <img src="untitled-3-5.jpg" width="400" height="267"/>
+    <img src="untitled-3-0.jpg" width="400" height="267"/>
+    <img src="untitled-3-14.jpg" width="400" height="267"/>
+    <img src="untitled-3-9.jpg" width="400" height="267"/>
+    <img src="untitled-3-4.jpg" width="400" height="267"/>
+    <img src="untitled-3-10.jpg" width="267" height="400"/>
+    <img src="untitled-3-8.jpg" width="267" height="400"/>
+    <img src="untitled-3-3.jpg" width="400" height="267"/>
+    <img src="untitled-3-1.jpg" width="400" height="267"/>
+    <img src="untitled-3-13.jpg" width="400" height="267"/>
+    <img src="untitled-3-19.jpg" width="400" height="267"/>
+    <img src="untitled-3-7.jpg" width="400" height="267"/>
+    <img src="untitled-3-12.jpg" width="267" height="400"/>
+    <img src="untitled-3-15.jpg" width="400" height="267"/>
+    <img src="untitled-3-18.jpg" width="400" height="267"/>
+    <img src="untitled-3-6.jpg" width="400" height="267"/>
+    <img src="untitled-3-11.jpg" width="267" height="400"/>
+    <img src="untitled-3-17.jpg" width="267" height="400"/>
+    <div class="clear"></div>
+</div>
diff --git a/demo/untitled-3-0.jpg b/demo/untitled-3-0.jpg
diff --git a/demo/untitled-3-1.jpg b/demo/untitled-3-1.jpg
diff --git a/demo/untitled-3-10.jpg b/demo/untitled-3-10.jpg
diff --git a/demo/untitled-3-11.jpg b/demo/untitled-3-11.jpg
diff --git a/demo/untitled-3-12.jpg b/demo/untitled-3-12.jpg
diff --git a/demo/untitled-3-13.jpg b/demo/untitled-3-13.jpg
diff --git a/demo/untitled-3-14.jpg b/demo/untitled-3-14.jpg
diff --git a/demo/untitled-3-15.jpg b/demo/untitled-3-15.jpg
diff --git a/demo/untitled-3-16.jpg b/demo/untitled-3-16.jpg
diff --git a/demo/untitled-3-17.jpg b/demo/untitled-3-17.jpg
diff --git a/demo/untitled-3-18.jpg b/demo/untitled-3-18.jpg
diff --git a/demo/untitled-3-19.jpg b/demo/untitled-3-19.jpg
diff --git a/demo/untitled-3-2.jpg b/demo/untitled-3-2.jpg
diff --git a/demo/untitled-3-3.jpg b/demo/untitled-3-3.jpg
diff --git a/demo/untitled-3-4.jpg b/demo/untitled-3-4.jpg
diff --git a/demo/untitled-3-5.jpg b/demo/untitled-3-5.jpg
diff --git a/demo/untitled-3-6.jpg b/demo/untitled-3-6.jpg
diff --git a/demo/untitled-3-7.jpg b/demo/untitled-3-7.jpg
diff --git a/demo/untitled-3-8.jpg b/demo/untitled-3-8.jpg
diff --git a/demo/untitled-3-9.jpg b/demo/untitled-3-9.jpg
diff --git a/gp-gallery.komodoproject b/gp-gallery.komodoproject
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Komodo Project File - DO NOT EDIT -->
+<project id="bc078771-dd2f-46ce-8031-3f0016b771bb" kpf_version="5" name="gp-gallery.komodoproject">
+<preference-set idref="bc078771-dd2f-46ce-8031-3f0016b771bb">
+</preference-set>
+</project>
diff --git a/src/jquery-gp-gallery.css b/src/jquery-gp-gallery.css
@@ -0,0 +1,12 @@
+.gp-gallery-picture-zoom {
+    border: 1px solid #bbb;
+    margin: -6px 0 0 -6px;
+    position: absolute;
+    z-index: 100;
+    padding: 5px;
+    background: white;
+    box-shadow: 0 0 10px #999;
+}
+.gp-gallery-picture-hover {
+    box-shadow: 1px 1px 5px #333;
+}
diff --git a/src/jquery-gp-gallery.js b/src/jquery-gp-gallery.js
@@ -0,0 +1,170 @@
+(function($) {
+  $.fn.gpGallery = function(selector, options) {
+    var $settings = {
+        'is_first_big': true,
+        'row_min_height': 180,
+        'row_max_height': 250,
+        'row_max_width': null,
+        'gutter': 5
+    };
+    if (options) {
+        $.extend($settings, options);
+    }
+
+    function getWidthForBucket(bucket, extra) {
+        var width = 0;
+        if (bucket.length) {
+            width = $settings.gutter * (bucket.length - 1);
+            $.each(bucket, function(idx, item) {
+                width += item.width;
+            });
+        }
+        if (extra) {
+            width += extra.width;
+        }
+        return width;
+    }
+
+    return this.each(function() {
+        var $container = $(this);
+        var max_bucket_width = $settings.row_max_width || $container.width();
+        var buckets = [],
+            last_bucket = {
+                items: [],
+                width: 0,
+                height: 0,
+            };
+        $container.find(selector).each(function() {
+            var $this = $(this);
+            var $pic = $this;
+
+
+            if ($pic[0].nodeName.toUpperCase() != 'IMG') {
+                $pic = $pic.find('img');
+            } else {
+                $this = $('<div>').insertBefore($pic).append($pic);
+            }
+            if (!$pic.length) return;
+
+            $this.css({width: 'auto', float: 'left', position: 'relative'});
+
+            var item = {
+                pic: $pic,
+                container: $this,
+                original_height: $pic.height(),
+                aspect: $pic.width() / $pic.height(),
+                original_width: $pic.width()
+
+            }
+            item.scale = $settings.row_min_height / item.original_height;
+            item.width = item.original_width * item.scale;
+            item.height = item.original_height * item.scale;
+            var new_bucket_width = getWidthForBucket(last_bucket.items, item);
+            if (new_bucket_width > max_bucket_width) {
+                buckets.push(last_bucket);
+                last_bucket = {
+                    items: [],
+                    width: 0,
+                    height: 0,
+                };
+            }
+            last_bucket.items.push(item);
+        });
+        buckets.push(last_bucket);
+        last_bucket.last = true;
+
+        $.each(buckets, function(idx, bucket) {
+            if (!bucket.last) {
+                bucket.scale = (max_bucket_width - (bucket.items.length - 1) * $settings.gutter) / getWidthForBucket(bucket.items);
+            }
+            var $last_item;
+
+            $.each(bucket.items, function(idx2, item) {
+                if (bucket.scale) {
+                    item.width = Math.round(item.width * bucket.scale);
+                    item.height = Math.round(item.height * bucket.scale);
+                }
+                var pic = item.pic,
+                    container = item.container;
+                $last_item = item;
+
+                pic.css({
+                    height: item.height+"px",
+                    width: item.width+"px"
+                });
+                item.container.css({
+                    height: item.height+"px",
+                    width: item.width+"px",
+                    'margin-top': '5px'
+                });
+                if (idx2 > 0) {
+                    item.container.css({
+                        'margin-left': $settings.gutter + 'px'
+                    });
+                } else {
+                    item.container.css({
+                        'clear': 'left',
+                    });
+                }
+                pic.is_hover = null;
+                pic.hover(function() {
+                    pic.stop().addClass('gp-gallery-picture-hover');
+                    container.addClass('gp-gallery-hover');
+
+                    if (item.original_height > item.height && item.original_width > item.width) {
+                        pic.is_hover = setTimeout(function() {
+                            pic.removeClass('gp-gallery-picture-hover');
+                            pic.addClass('gp-gallery-picture-zoom');
+
+                            if (pic.is_hover) {
+                                pic.animate({
+                                    marginTop: '-' + (item.original_height - item.height)/2 + 'px',
+                                    marginLeft: '-' + (item.original_width - item.width)/2 + 'px',
+                                    //top: '50%',
+                                    //left: '50%',
+                                    width: item.original_width + 'px',
+                                    height: item.original_height + 'px',
+                                }, 100);
+                            }
+                        }, 200)
+                    }
+                }, function() {
+
+                    if (pic.is_hover) {
+                        clearTimeout(pic.is_hover)
+                        pic.is_hover = null;
+                    }
+                    if (item.original_height > item.height && item.original_width > item.width && pic.hasClass('gp-gallery-picture-zoom')) {
+                        pic.stop().animate({
+                            marginTop: '-6px',
+                            marginLeft: '-6px',
+                            top: '0',
+                            left: '0',
+                            width: item.width + 'px',
+                            height: item.height + 'px',
+                        }, 50, function() {
+                            container.removeClass('gp-gallery-hover');
+                            pic.removeClass('gp-gallery-picture-hover').removeClass('gp-gallery-picture-zoom').css({
+                                'margin': 0
+                            });
+                        });
+                    } else {
+                        container.removeClass('gp-gallery-hover');
+                        pic.removeClass('gp-gallery-picture-hover').removeClass('gp-gallery-picture-zoom');
+                    }
+                });
+            });
+            if (!bucket.last && $last_item) {
+                $last_item.width = $last_item.width + max_bucket_width - getWidthForBucket(bucket.items);
+                $last_item.pic.css({
+                    width: $last_item.width + 'px'
+                });
+            }
+        });
+    });
+  };
+})(jQuery);
+
+
+
+