Permalink
Browse files

Mosaic 1.0.1 Fix

	*Fixed bug with multiple boxes being triggered at the same time.
	*Added options to define overlay and backdrop elements

Signed-off-by: Sam Dunn <sam@onemightyroar.com>
  • Loading branch information...
samdunn committed Mar 17, 2011
1 parent a46a46e commit ef45e11e79668cca1b053d3bbee4b5dcd08d612e
Showing with 139 additions and 123 deletions.
  1. +5 −0 README.md
  2. +2 −4 base.html
  3. +1 −1 css/mosaic.css
  4. +2 −3 examples.html
  5. +119 −0 js/mosaic.1.0.1.js
  6. +10 −0 js/mosaic.1.0.1.min.js
  7. +0 −105 js/mosaic.1.0.js
  8. +0 −10 js/mosaic.1.0.min.js
View
@@ -4,6 +4,11 @@ Documentation can be found on the official project page: [http://www.buildintern
*** Changelog ***
+3/17/11 - 1.0.1 Fix
+
+ *Fixed bug with multiple boxes being triggered at the same time.
+ *Added options to define overlay and backdrop elements
+
3/16/11 - Mosaic 1.0 Released
*Automatically generate sliding boxes & captions
View
@@ -4,7 +4,7 @@
<!--
Mosaic - Sliding Boxes and Captions jQuery Plugin
- Version 1.0
+ Version 1.0.1
www.buildinternet.com/project/mosaic
By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
@@ -20,16 +20,14 @@
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
- <script type="text/javascript" src="js/mosaic.1.0.js"></script>
+ <script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
<script type="text/javascript">
jQuery(function($){
-
$('.bar').mosaic({
animation : 'slide'
});
-
});
</script>
View
@@ -1,6 +1,6 @@
/*
Mosaic - Sliding Boxes and Captions jQuery Plugin
- Version 1.0
+ Version 1.0.1
www.buildinternet.com/project/mosaic
By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
View
@@ -4,7 +4,7 @@
<!--
Mosaic - Sliding Boxes and Captions jQuery Plugin
- Version 1.0
+ Version 1.0.1
www.buildinternet.com/project/mosaic
By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
@@ -20,14 +20,13 @@
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
- <script type="text/javascript" src="js/mosaic.1.0.js"></script>
+ <script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.circle').mosaic({
-
opacity : 0.8 //Opacity for overlay (0-1)
});
View
@@ -0,0 +1,119 @@
+/*
+ Mosaic - Sliding Boxes and Captions jQuery Plugin
+ Version 1.0.1
+ www.buildinternet.com/project/mosaic
+
+ By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
+ Released under MIT License / GPL License
+*/
+
+(function($){
+
+ if(!$.omr){
+ $.omr = new Object();
+ };
+
+ $.omr.mosaic = function(el, options){
+
+ var base = this;
+
+ // Access to jQuery and DOM versions of element
+ base.$el = $(el);
+ base.el = el;
+
+ // Add a reverse reference to the DOM object
+ base.$el.data("omr.mosaic", base);
+
+ base.init = function(){
+ base.options = $.extend({},$.omr.mosaic.defaultOptions, options);
+
+ base.load_box();
+ };
+
+ // Preload Images
+ base.load_box = function(){
+ // Hide until window loaded, then fade in
+ if (base.options.preload){
+ $(base.options.backdrop, base.el).hide();
+ $(base.options.overlay, base.el).hide();
+
+ $(window).load(function(){
+ // IE transparency fade fix
+ if(base.options.options.animation == 'fade' && $(base.options.overlay, base.el).css('opacity') == 0 ) $(base.options.overlay, base.el).css('filter', 'alpha(opacity=0)');
+
+ $(base.options.overlay, base.el).fadeIn(200, function(){
+ $(base.options.backdrop, base.el).fadeIn(200);
+ });
+
+ base.allow_hover();
+ });
+ }else{
+ $(base.options.backdrop, base.el).show();
+ $(base.options.overlay , base.el).show();
+ base.allow_hover();
+ }
+ };
+
+ // Initialize hover animations
+ base.allow_hover = function(){
+ // Select animation
+ switch(base.options.animation){
+
+ // Handle fade animations
+ case 'fade':
+ $(base.el).hover(function () {
+ $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, base.options.opacity);
+ },function () {
+ $(base.options.overlay, base.el).stop().fadeTo(base.options.speed, 0);
+ });
+
+ break;
+
+ // Handle slide animations
+ case 'slide':
+ // Grab default overlay x,y position
+ startX = $(base.options.overlay, base.el).css(base.options.anchor_x) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_x) : '0px';
+ startY = $(base.options.overlay, base.el).css(base.options.anchor_y) != 'auto' ? $(base.options.overlay, base.el).css(base.options.anchor_y) : '0px';;
+
+ var hoverState = {};
+ hoverState[base.options.anchor_x] = base.options.hover_x;
+ hoverState[base.options.anchor_y] = base.options.hover_y;
+
+ var endState = {};
+ endState[base.options.anchor_x] = startX;
+ endState[base.options.anchor_y] = startY;
+
+ $(base.el).hover(function () {
+ $(base.options.overlay, base.el).stop().animate(hoverState, base.options.speed);
+ },function () {
+ $(base.options.overlay, base.el).stop().animate(endState, base.options.speed);
+ });
+
+ break;
+ };
+ };
+
+ // Make it go!
+ base.init();
+ };
+
+ $.omr.mosaic.defaultOptions = {
+ animation : 'fade',
+ speed : 150,
+ opacity : 1,
+ preload : 0,
+ anchor_x : 'left',
+ anchor_y : 'bottom',
+ hover_x : '0px',
+ hover_y : '0px',
+ overlay : '.mosaic-overlay', //Mosaic overlay
+ backdrop : '.mosaic-backdrop' //Mosaic backdrop
+ };
+
+ $.fn.mosaic = function(options){
+ return this.each(function(){
+ (new $.omr.mosaic(this, options));
+ });
+ };
+
+})(jQuery);
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -1,105 +0,0 @@
-/*
- Mosaic - Sliding Boxes and Captions jQuery Plugin
- Version 1.0
- www.buildinternet.com/project/mosaic
-
- By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
- Released under MIT License / GPL License
-*/
-
-(function($){
-
- //Mosaic
- $.fn.mosaic = function(options) {
-
- var base = this;
-
- //Default settings
- var settings = {
-
- animation : 'fade', //1-Fade, 2-Slide
- speed : 150, //Animation speed
- opacity : 1, //Opacity for overlay (0-1) *Fade animation only
- preload : 1, //Fade in overlay and backdrop when loaded
- anchor_x : 'left', //Horizontal anchor (left or right)
- anchor_y : 'bottom', //Vertical anchor (top or bottom)
- hover_x : '0px', //Horizontal position on hover
- hover_y : '0px' //Vertical position on hover
-
- };
-
- //Default elements
- var element = '.mosaic-block'; //Mosaic container
- var overlay = '.mosaic-overlay'; //Mosaic overlay
- var backdrop = '.mosaic-backdrop'; //Mosaic backdrop
-
- //Combine options with default settings
- if (options){
- var options = $.extend(settings, options);
- }else{
- var options = settings;
- }
-
- //Hide until window loaded, then fade in
- if (options.preload){
- $(backdrop, base).hide();
- $(overlay, base).hide();
-
- $(window).load(function(){
- //IE transparency fade fix
- if(options.animation == 'fade' && $(overlay, base).css('opacity') == 0 ) $(overlay, base).css('filter', 'alpha(opacity=0)');
-
- $(overlay, base).fadeIn(200, function(){
- $(backdrop, base).fadeIn(200);
- });
-
- allowHover();
- });
- }else{
- $(backdrop, base).show();
- $(overlay, base).show();
- allowHover();
- }
-
- function allowHover(){
- //Select animation
- switch(options.animation){
-
- //Handle fade animations
- case 'fade':
- $(base).hover(function () {
- $(overlay, base).stop().fadeTo(options.speed, options.opacity);
- },function () {
- $(overlay, base).stop().fadeTo(options.speed, 0);
- });
-
- break;
-
- //Handle slide animations
- case 'slide':
- //Grab default overlay x,y position
- startX = $(overlay, base).css(options.anchor_x) != 'auto' ? $(overlay, base).css(options.anchor_x) : '0px';
- startY = $(overlay, base).css(options.anchor_y) != 'auto' ? $(overlay, base).css(options.anchor_y) : '0px';;
-
- var hoverState = {};
- hoverState[options.anchor_x] = options.hover_x;
- hoverState[options.anchor_y] = options.hover_y;
-
- var endState = {};
- endState[options.anchor_x] = startX;
- endState[options.anchor_y] = startY;
-
- $(base).hover(function () {
- $(overlay, base).stop().animate(hoverState, options.speed);
- },function () {
- $(overlay, base).stop().animate(endState, options.speed);
- });
-
- break;
- };
- }
- };
-
-})(jQuery);
-
-
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit ef45e11

Please sign in to comment.