Browse files

content non-specific resizing

  • Loading branch information...
1 parent 2de0ec4 commit af7ce988ee272d5d1a3e57166ba908c6e0117509 @Mottie Mottie committed Jun 10, 2011
View
20 README.markdown
@@ -9,14 +9,24 @@
(Only the most recent changes are shown below, see the [wiki page](https://github.com/chriscoyier/MovingBoxes/wiki/Change-Log) for a complete listing)
+###Version 2.1 (6/10/2011)
+* The script now prevents changing slides before it completes initialization. Fix for [issue #29](https://github.com/chriscoyier/MovingBoxes/issues/29).
+* Removed element specific resizing:
+ * Removed `imageRatio` option. Set the image using a percentage width and it will adjust the height automatically to maintain the image's aspect ratio.
+ * In the script, the portion which set the height of images was removed. So now all panel content is set using css percentage values (or "em" for font sizes).
+ * Moved CSS, including `.mb-inside img {}` to the demo.css since the layout now allows images of any size inside the panels. The dimensions should now be set in the css using a percentage value.
+ * MovingBoxes will update a second time once the page has completely loaded. This now causes a vertical height resizing animation in webkit browsers. One way to work around this is to set the image height of the "current" panel - see the demo.css file.
+* Removed `panelType` options as the script now automatically looks for immediate children of the initialized element. You shouldn't even notice a difference.
+* Moved all demo related files into a demo folder.
+
###Version 2.0.5 (6/9/2011)
-* Fixed margins when MovingBoxes gets updated. Fix for issue #30.
+* Fixed margins when MovingBoxes gets updated. Fix for [issue #30](https://github.com/chriscoyier/MovingBoxes/issues/30).
###Version 2.0.4 (5/7/2011)
* Fixed hash tags which apparently broke in the last version =/
###Version 2.0.3 (4/22/2011)
-* Adjusted width of MovingBoxes internal wrapper to fix issue #24.
+* Adjusted width of MovingBoxes internal wrapper to fix [issue #24](https://github.com/chriscoyier/MovingBoxes/issues/24).
* Restructured the plugin to allow updating MovingBoxes after adding or removing a panel.
* To use, simply call the plugin a second time without any options: `$('.slider').movingBoxes();`
* These new changes now require a minimum of jQuery version 1.4.2 (due to the use of "delegate()").
@@ -35,9 +45,9 @@
* Added a separate IE stylesheet for versions < 9. Older IE versions will use a background image to add an inner shadow. It is using a png file, so it may not work properly in all older versions.
###Version 2.0.1 (3/31/2011)
-* Added more width to the scroll container. Fix for issue #19.
-* Centered the image... silly css problem. Fix for issue #20.
-* Moving boxes will no longer scroll when using the space bar or arrow keys inside an input, selector or textarea. Fix for issue #22.
+* Added more width to the scroll container. Fix for [issue #19](https://github.com/chriscoyier/MovingBoxes/issues/19).
+* Centered the image... silly css problem. Fix for [issue #20](https://github.com/chriscoyier/MovingBoxes/issues/20).
+* Moving boxes will no longer scroll when using the space bar or arrow keys inside an input, selector or textarea. Fix for [issue #22](https://github.com/chriscoyier/MovingBoxes/issues/22).
###Version 2.0 (3/11/2011)
* Made all css class name more unique by adding a "mb-" in front. Fix for [issue #15](https://github.com/chriscoyier/MovingBoxes/issues/15).
View
31 css/demo.css
@@ -1,31 +0,0 @@
-/* Moving Boxes demo CSS */
-* {
- margin: 0;
- padding: 0;
-}
-
-body {
- font: 11px Helvetica, Arial, sans-serif;
-}
-
-#wrapper {}
-
-/* Moving Boxes title image wrapper */
-#title {
- text-align: center;
-}
-#title img {
- border: 0;
-}
-
-/* Add/remove panels buttons */
-.buttons {
- padding: 5px 10px;
- text-align: center;
-}
-
-/* direct link styling */
-.dlinks {
- text-align: center;
- font-size: 20px;
-}
View
30 css/movingboxes.css
@@ -39,6 +39,7 @@
width: 350px; /* default, this is overridden by script settings */
margin: 5px 0;
padding: 5px;
+ display: block;
cursor: pointer;
float: left;
list-style: none;
@@ -56,33 +57,8 @@
border: 1px solid #999;
}
-.mb-inside img {
- display: block;
- border: 1px solid #666;
- margin: 0 auto;
- width: 100%;
-}
-
-.mb-inside h2 {
- font-weight: normal;
- color: #000;
- font-size: 140%; /* Adjust panel header font size using em or % */
- margin: 0 0 8px 0;
-}
-
-.mb-inside p {
- font-size: 100%; /* Adjust panel text font size using em or % */
- color: #444;
-}
-
-.mb-inside a {
- color: #333;
- text-decoration: none;
- border-bottom: 1px dotted #ccc;
-}
-
-.mb-inside a:hover {
- border-bottom: 1px solid #999;
+.mb-inside * {
+ max-width: 100%;
}
/*** Left & Right Navigation Arrows ***/
View
0 images/1.jpg → demo/1.jpg 100755 → 100644
File renamed without changes
View
0 images/2.jpg → demo/2.jpg 100755 → 100644
File renamed without changes
View
0 images/3.jpg → demo/3.jpg 100755 → 100644
File renamed without changes
View
0 images/4.jpg → demo/4.jpg 100755 → 100644
File renamed without changes
View
0 images/5.jpg → demo/5.jpg 100755 → 100644
File renamed without changes
View
0 images/6.jpg → demo/6.jpg
File renamed without changes
View
0 images/7.jpg → demo/7.jpg
File renamed without changes
View
59 demo/demo.css
@@ -0,0 +1,59 @@
+/* Moving Boxes demo CSS */
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font: 11px Helvetica, Arial, sans-serif;
+}
+
+#wrapper {}
+
+/* Moving Boxes title image wrapper */
+#title {
+ text-align: center;
+}
+#title img {
+ border: 0;
+}
+
+/* panel images */
+.mb-inside img {
+ width: 100%;
+}
+
+
+#slider-two .current img {
+ /* height of the placeholder until image completely loads - needed for
+ webkit browsers, add this only if you don't want the height animation
+ on startup.
+
+ 326px measures the height of the current image when enlarged
+
+ height: 326px;
+
+ */
+}
+
+/* panel links */
+.mb-inside a {
+ color: #333;
+ text-decoration: none;
+ border-bottom: 1px dotted #ccc;
+}
+.mb-inside a:hover {
+ border-bottom: 1px solid #999;
+}
+
+/* Add/remove panels buttons */
+.buttons {
+ padding: 5px 10px;
+ text-align: center;
+}
+
+/* direct link styling */
+.dlinks {
+ text-align: center;
+ font-size: 20px;
+}
View
11 js/demo.js → demo/demo.js
@@ -7,32 +7,29 @@ $(function(){
$('#slider-one').movingBoxes({
startPanel : 4, // start with this panel
width : 300, // overall width of movingBoxes (not including navigation arrows)
- imageRatio : 1, // Image ration set to 1:1 (square image)
wrap : true, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav : true, // if true, navigation links will be added
- panelType : '> li', // selector to find the immediate ">" children "li" of "#slider-one" in this case
navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
});
$('#slider-two').movingBoxes({
startPanel : 3, // start with this panel
- width : 600, // overall width of movingBoxes (not including navigation arrows)
+ width : 650, // overall width of movingBoxes (not including navigation arrows)
panelWidth : .7, // current panel width adjusted to 70% of overall width
- imageRatio : 16/9, // Image ratio set to 16:9
buildNav : true, // if true, navigation links will be added
navFormatter : function(index, panel){ return panel.find('h2 span').text(); } // function which gets nav text from span inside the panel header
});
// Add a slide
- var imageNumber = 1,
- panel = '<li><img src="images/*.jpg" alt="picture" /><h2>News Heading #*</h2><p>A very short exerpt goes here... <a href="#">more</a></p></li>',
+ var imageNumber = 0,
+ panel = '<li><img src="demo/*1.jpg" alt="picture" /><h2>News Heading #*2</h2><p>A very short exerpt goes here... <a href="#">more</a></p></li>',
// to test adding/removing panels to the second slider, comment out the line above and uncomment out the line below - slider-two uses divs instead of UL & LIs
// panel = '<div><img src="images/*.jpg" alt="picture" /><h2>News Heading #<span>*</span></h2><p>A very short exerpt goes here... <a href="#">more</a></p></div>',
slider = $('#slider-one'); // $('#slider-two'); // second slider
$('button.add').click(function(){
slider
- .append(panel.replace(/\*/g, (++imageNumber%7 + 1)))
+ .append( panel.replace(/\*2/g, ++imageNumber).replace(/\*1/g, (imageNumber%7 + 1)) )
.movingBoxes(); // update movingBoxes
});
View
0 images/movingboxes.png → demo/movingboxes.png 100755 → 100644
File renamed without changes
View
56 index.html
@@ -13,18 +13,18 @@
<![endif]-->
<!-- Required script -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" charset="utf-8"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.movingboxes.js" charset="utf-8"></script>
<!-- Demo only -->
- <link type="text/css" href="css/demo.css" media="screen" charset="utf-8" rel="stylesheet" />
- <script type="text/javascript" src="js/demo.js"></script>
+ <link type="text/css" href="demo/demo.css" media="screen" charset="utf-8" rel="stylesheet" />
+ <script type="text/javascript" src="demo/demo.js"></script>
</head>
<body>
<div id="wrapper">
<div id="title">
- <a href="http://github.com/chriscoyier/MovingBoxes"><img src="images/movingboxes.png" alt="moving boxes" /></a>
+ <a href="http://github.com/chriscoyier/MovingBoxes"><img src="demo/movingboxes.png" alt="moving boxes" /></a>
</div>
<br><br>
@@ -43,45 +43,45 @@
<ul id="slider-one">
<li>
- <img src="images/1.jpg" alt="picture" />
+ <img src="demo/1.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</li>
<li>
- <img src="images/2.jpg" alt="picture" />
+ <img src="demo/2.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
</li>
<li>
- <img src="images/3.jpg" alt="picture" />
+ <img src="demo/3.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</li>
<li>
- <img src="images/4.jpg" alt="picture" />
+ <img src="demo/4.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</li>
<li>
- <img src="images/5.jpg" alt="picture" />
+ <img src="demo/5.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
</li>
<li>
- <img src="images/6.jpg" alt="picture" />
+ <img src="demo/6.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="#">more</a></p>
+ <p>Add a short exerpt here... <a href="#">more</a></p>
</li>
<li>
- <img src="images/7.jpg" alt="picture" />
+ <img src="demo/7.jpg" alt="picture" />
<h2>News Heading</h2>
- <p>A very short exerpt goes here... <a href="#">more</a></p>
+ <p>Add a short exerpt here... <a href="#">more</a></p>
</li>
</ul> <!-- end Slider #1 -->
@@ -92,33 +92,33 @@
<div id="slider-two">
<div>
- <img src="images/5.jpg" alt="picture" />
+ <img src="demo/5.jpg" alt="picture" />
<h2>News Heading - <span>Lisa</span></h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
</div>
<div>
- <img src="images/4.jpg" alt="picture" />
+ <img src="demo/4.jpg" alt="picture" />
<h2>News Heading - <span>Monica</span></h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</div>
<div>
- <img src="images/3.jpg" alt="picture" />
+ <img src="demo/3.jpg" alt="picture" />
<h2>News Heading - <span>Lin</span></h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
</div>
<div>
- <img src="images/2.jpg" alt="picture" />
+ <img src="demo/2.jpg" alt="picture" />
<h2>News Heading - <span>Shiela</span></h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
</div>
<div>
- <img src="images/1.jpg" alt="picture" />
+ <img src="demo/1.jpg" alt="picture" />
<h2>News Heading - <span>Joanne</span></h2>
- <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
+ <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
</div>
</div>
View
77 js/jquery.movingboxes.js
@@ -1,5 +1,5 @@
/*
- * Moving Boxes v2.0.5
+ * Moving Boxes v2.1
* by Chris Coyier
* http://css-tricks.com/moving-boxes/
*/
@@ -24,12 +24,12 @@
base.$el.wrap('<div class="movingBoxes mb-wrapper"><div class="mb-scroll" /></div>');
// defaults
- base.$window = base.$el.parent();
- base.$wrap = base.$window.parent()
+ base.$window = base.$el.parent(); // mb-scroll
+ base.$wrap = base.$window.parent() // mb-wrapper
.css({ width : base.options.width }) // override css width
.prepend('<a class="mb-scrollButtons mb-left"></a>')
.append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>');
- base.$panels = base.$el.find(base.options.panelType).addClass('mb-panel');
+ base.$panels = base.$el.children().addClass('mb-panel');
base.runTime = $('.mb-slider').index(base.$el) + 1; // Get index (run time) of this slider on the page
base.regex = new RegExp('slider' + base.runTime + '=(\\d+)', 'i'); // hash tag regex
@@ -39,6 +39,7 @@
// code to run to update MovingBoxes when the number of panels change
base.update();
+ $(window).load(function(){ base.update(false); }); // animate height after all images load
// Set up click on left/right arrows
base.$wrap.find('.mb-right').click(function(){
@@ -85,28 +86,29 @@
// Set up "Current" panel
var startPanel = (base.options.hashTags) ? base.getHash() || base.options.startPanel : base.options.startPanel;
+ // Bind Events
+ $.each('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes'.split(' '), function(i,o){
+ var evt = o.split('.')[0];
+ if ($.isFunction(base.options[evt])){
+ base.$el.bind(o, base.options[evt]);
+ }
+ });
+
// animate to chosen start panel - starting from the first panel makes it look better
setTimeout(function(){
base.change(startPanel, function(){
-
- // Bind Events
- $.each('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes'.split(' '), function(i,o){
- var evt = o.split('.')[0];
- if ($.isFunction(base.options[evt])){
- base.$el.bind(o, base.options[evt]);
- }
- });
-
base.initialized = true;
base.$el.trigger( 'initialized.movingBoxes', [ base, startPanel ] );
});
}, base.options.speed * 2 );
+
};
- base.update = function(){
+ // update the panel, flag is used to prevent events from firing
+ base.update = function(flag){
var t;
// Set up panes & content sizes; default: panelWidth = 50% of entire width
- base.$panels = base.$el.find(base.options.panelType)
+ base.$panels = base.$el.children()
.addClass('mb-panel')
.css({ width : base.options.width * base.options.panelWidth, margin: 0 })
// inner wrap of each panel
@@ -120,24 +122,20 @@
// save 'cur' numbers (current larger panel size), use stored sizes if they exist
t = base.$panels.eq(base.curPanel - 1);
base.curWidth = base.curWidth || t.outerWidth();
- base.curImgWidth = base.curImgWidth || t.find('img').outerWidth(true);
- base.curImgHeight = base.curImgHeight || base.curImgWidth / base.options.imageRatio; // set images fit a 4:3 ratio
// save 'reg' (reduced size) numbers
base.regWidth = base.curWidth * base.options.reducedSize;
- base.regImgWidth = base.curImgWidth * base.options.reducedSize;
- base.regImgHeight = base.curImgHeight * base.options.reducedSize;
// set image heights so base container height is correctly set
- base.$panels
- .css({ width: base.curWidth, fontSize: '1em' }) // make all panels big
- .find('img').css({ height: base.curImgHeight, width: base.curImgWidth });
+ base.$panels.css({ width: base.curWidth, fontSize: '1em' }); // make all panels big
// save each panel height... script will resize container as needed
+ // make sure current panel css is applied before measuring
+ base.$panels.eq(base.curPanel-1).addClass(base.options.currentPanel);
base.heights = base.$panels.map(function(i,e){ return $(e).outerHeight(true); }).get();
- base.returnToNormal(base.curPanel, true); // resize new panel
- base.growBigger(base.curPanel, true);
+ base.returnToNormal(base.curPanel, 0); // resize new panel, animation time
+ base.growBigger(base.curPanel, 0, flag);
// make base container wide enough to contain all the panels
base.$el.css({
@@ -191,29 +189,37 @@
};
// Resize panels to normal
- base.returnToNormal = function(num, quick){
+ base.returnToNormal = function(num, time){
base.$panels.not(':eq(' + (num-1) + ')')
.removeClass(base.options.currentPanel)
- .animate({ width: base.regWidth, fontSize: base.options.reducedSize + 'em' }, (quick) ? 0 : base.options.speed)
- .find('img').animate({ width: base.regImgWidth, height: base.regImgHeight }, (quick) ? 0 : base.options.speed);
+ .animate({ width: base.regWidth, fontSize: base.options.reducedSize + 'em' }, (time === 0) ? time : base.options.speed);
};
// Zoom in on selected panel
- base.growBigger = function(num, quick){
+ base.growBigger = function(num, time, flag){
base.$panels.eq(num-1)
- .addClass(base.options.currentPanel)
- .animate({ width: base.curWidth, fontSize: '1em' }, (quick) ? 0 : base.options.speed)
- .find('img').animate({ width: base.curImgWidth, height: base.curImgHeight }, (quick) ? 0 : base.options.speed, function(){
+ .animate({ width: base.curWidth, fontSize: '1em' }, (time === 0) ? time : base.options.speed, function(){
// completed event trigger
// even though animation is not queued, trigger is here because it is the last animation to complete
- if (base.initialized) { base.$el.trigger( 'completed.movingBoxes', [ base, num ] ); }
+ if (base.initialized) {
+ $(this).addClass(base.options.currentPanel); // add current panel class after animating in case it has sizing parameters
+ if (flag !== false) { base.$el.trigger( 'completed.movingBoxes', [ base, num ] ); }
+ }
});
};
// go forward/back
- base.goForward = function(){ base.change(base.curPanel + 1); };
+ base.goForward = function(){
+ if (base.initialized) {
+ base.change(base.curPanel + 1);
+ }
+ };
- base.goBack = function(){ base.change(base.curPanel - 1); };
+ base.goBack = function(){
+ if (base.initialized) {
+ base.change(base.curPanel - 1);
+ }
+ };
// Change view to display selected panel
base.change = function(curPanel, callback, flag){
@@ -263,7 +269,6 @@
complete : function(){
base.curPanel = curPanel;
if (base.initialized) {
-// base.$panels.eq(curPanel - 1).find('a').focus();
base.$window.scrollTop(0); // Opera fix - otherwise, it moves the focus link to the middle of the viewport
}
base.currentlyMoving = false;
@@ -320,7 +325,6 @@
width : 800, // overall width of movingBoxes
panelWidth : 0.5, // current panel width adjusted to 50% of overall width
reducedSize : 0.8, // non-current panel size: 80% of panel size
- imageRatio : 4/3, // Image ratio set to 4:3
fixedHeight : false, // if true, slider height set to max panel height; if false, slider height will auto adjust.
// Behaviour
@@ -334,7 +338,6 @@
// Selectors & classes
currentPanel : 'current', // current panel class
tooltipClass : 'tooltip', // added to the navigation, but the title attribute is blank unless the link text-indent is negative
- panelType : '> div', // selector to find the immediate (">") children "div" of the movingBoxes object)
// Callbacks
initialized : null, // callback when MovingBoxes has completed initialization
View
4 js/jquery.movingboxes.min.js
@@ -1,7 +1,7 @@
/*
- * Moving Boxes v2.0.5 minified
+ * Moving Boxes v2.1 minified
* by Chris Coyier
* http://css-tricks.com/moving-boxes/
*/
-(function(c){c.movingBoxes=function(e,h){var a=this;a.$el=c(e).addClass("mb-slider");a.el=e;a.$el.data("movingBoxes",a);a.init=function(){a.options=c.extend({},c.movingBoxes.defaultOptions,h);a.$el.wrap('<div class="movingBoxes mb-wrapper"><div class="mb-scroll" /></div>');a.$window=a.$el.parent();a.$wrap=a.$window.parent().css({width:a.options.width}).prepend('<a class="mb-scrollButtons mb-left"></a>').append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>'); a.$panels=a.$el.find(a.options.panelType).addClass("mb-panel");a.runTime=c(".mb-slider").index(a.$el)+1;a.regex=RegExp("slider"+a.runTime+"=(\\d+)","i");a.initialized=!1;a.currentlyMoving=!1;a.curPanel=1;a.update();a.$wrap.find(".mb-right").click(function(){a.goForward();return!1}).end().find(".mb-left").click(function(){a.goBack();return!1});a.$el.delegate(".mb-panel","click",function(){a.change(a.$panels.index(c(this))+1)});a.$wrap.click(function(){a.active()});a.$panels.delegate("a","focus",function(){a.$panels.index(c(this).closest(".mb-panel"))+ 1!==a.curPanel&&a.change(a.$panels.index(c(this).closest(".mb-panel"))+1,{},!1)});c(document).keyup(function(b){if(!b.target.tagName.match("TEXTAREA|INPUT|SELECT"))switch(b.which){case 39:case 32:a.$wrap.is(".mb-active-slider")&&a.goForward();break;case 37:a.$wrap.is(".mb-active-slider")&&a.goBack()}});var b=a.options.hashTags?a.getHash()||a.options.startPanel:a.options.startPanel;setTimeout(function(){a.change(b,function(){c.each("initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes".split(" "), function(b,d){var e=d.split(".")[0];c.isFunction(a.options[e])&&a.$el.bind(d,a.options[e])});a.initialized=!0;a.$el.trigger("initialized.movingBoxes",[a,b])})},a.options.speed*2)};a.update=function(){var b;a.$panels=a.$el.find(a.options.panelType).addClass("mb-panel").css({width:a.options.width*a.options.panelWidth,margin:0}).each(function(){c(this).find(".mb-inside").length===0&&c(this).wrapInner('<div class="mb-inside" />')});a.totalPanels=a.$panels.length;b=a.$panels.eq(a.curPanel-1);a.curWidth= a.curWidth||b.outerWidth();a.curImgWidth=a.curImgWidth||b.find("img").outerWidth(!0);a.curImgHeight=a.curImgHeight||a.curImgWidth/a.options.imageRatio;a.regWidth=a.curWidth*a.options.reducedSize;a.regImgWidth=a.curImgWidth*a.options.reducedSize;a.regImgHeight=a.curImgHeight*a.options.reducedSize;a.$panels.css({width:a.curWidth,fontSize:"1em"}).find("img").css({height:a.curImgHeight,width:a.curImgWidth});a.heights=a.$panels.map(function(a,b){return c(b).outerHeight(!0)}).get();a.returnToNormal(a.curPanel, !0);a.growBigger(a.curPanel,!0);a.$el.css({position:"absolute",width:(a.curWidth+100)*a.totalPanels+(a.options.width-a.curWidth)/2,height:Math.max.apply(this,a.heights)+10});a.$window.css({height:a.options.fixedHeight?Math.max.apply(this,a.heights):a.heights[a.curPanel-1]});a.$panels.eq(0).css({"margin-left":(a.options.width-a.curWidth)/2});a.buildNav();a.change(a.curPanel,{},!1)};a.buildNav=function(){a.$navLinks={};a.$nav&&a.$nav.remove();if(a.options.buildNav&&a.totalPanels>1){a.$nav=c('<div class="mb-controls"><a class="mb-testing"></a></div>').appendTo(a.$wrap); var b,f="",d=c.isFunction(a.options.navFormatter),e=parseInt(a.$nav.find(".mb-testing").css("text-indent"),10)<0;a.$panels.each(function(g){b=g+1;f+='<a href="#" class="mb-panel'+b;d?(g=a.options.navFormatter(b,c(this)),f+=e?" "+a.options.tooltipClass+'" title="'+g:"",f+='">'+g+"</a> "):f+='">'+b+"</a> "});a.$navLinks=a.$nav.html(f).find("a").bind("click",function(){a.change(a.$navLinks.index(c(this))+1);return!1})}};a.returnToNormal=function(b,c){a.$panels.not(":eq("+(b-1)+")").removeClass(a.options.currentPanel).animate({width:a.regWidth, fontSize:a.options.reducedSize+"em"},c?0:a.options.speed).find("img").animate({width:a.regImgWidth,height:a.regImgHeight},c?0:a.options.speed)};a.growBigger=function(b,c){a.$panels.eq(b-1).addClass(a.options.currentPanel).animate({width:a.curWidth,fontSize:"1em"},c?0:a.options.speed).find("img").animate({width:a.curImgWidth,height:a.curImgHeight},c?0:a.options.speed,function(){a.initialized&&a.$el.trigger("completed.movingBoxes",[a,b])})};a.goForward=function(){a.change(a.curPanel+1)};a.goBack=function(){a.change(a.curPanel- 1)};a.change=function(b,c,d){b=parseInt(b,10);a.initialized&&(a.active(),a.$el.trigger("initChange.movingBoxes",[a,b]));if(a.options.wrap){if(b<1)b=a.totalPanels;b>a.totalPanels&&(b=1)}else if(b<1&&(b=1),b>a.totalPanels)b=a.totalPanels;if(a.initialized&&a.curPanel===b&&!d)return!1;if(!a.currentlyMoving)a.currentlyMoving=!0,d=a.$panels.eq(b-1).position().left-(a.options.width-a.curWidth)/2,b>a.curPanel&&(d-=a.curWidth-a.regWidth),d=a.options.fixedHeight?{scrollLeft:d}:{scrollLeft:d,height:a.heights[b- 1]},a.initialized&&a.$el.trigger("beforeAnimation.movingBoxes",[a,b]),a.$window.animate(d,{queue:!1,duration:a.options.speed,easing:a.options.easing,complete:function(){a.curPanel=b;a.initialized&&a.$window.scrollTop(0);a.currentlyMoving=!1;typeof c==="function"&&c(a)}}),a.returnToNormal(b),a.growBigger(b),a.options.hashTags&&a.initialized&&a.setHash(b);a.$wrap.find(".mb-controls a").removeClass(a.options.currentPanel).eq(b-1).addClass(a.options.currentPanel)};a.getHash=function(){var b=window.location.hash.match(a.regex); return b===null?"":parseInt(b[1],10)};a.setHash=function(b){var c="slider"+a.runTime+"=",d=window.location.hash;if(typeof d!=="undefined")window.location.hash=d.indexOf(c)>0?d.replace(a.regex,c+b):d+"&"+c+b};a.active=function(){c(".mb-active-slider").removeClass("mb-active-slider");a.$wrap.addClass("mb-active-slider")};a.currentPanel=function(b,c){typeof b!=="undefined"&&a.change(b,c);return a.curPanel};a.init()};c.movingBoxes.defaultOptions={startPanel:1,width:800,panelWidth:0.5,reducedSize:0.8, imageRatio:4/3,fixedHeight:!1,speed:500,hashTags:!0,wrap:!1,buildNav:!1,navFormatter:null,easing:"swing",currentPanel:"current",tooltipClass:"tooltip",panelType:"> div",initialized:null,initChange:null,beforeAnimation:null,completed:null};c.fn.movingBoxes=function(e,h){var a,b=this.data("movingBoxes");return this.each(function(){(typeof e).match("object|undefined")?b?b.update():new c.movingBoxes(this,e):/\d/.test(e)&&!isNaN(e)&&b&&(a=typeof e==="number"?e:parseInt(c.trim(e),10),a>=1&&a<=b.totalPanels&& b.change(a,h))})};c.fn.getMovingBoxes=function(){return this.data("movingBoxes")}})(jQuery);
+(function(c){c.movingBoxes=function(e,h){var a=this;a.$el=c(e).addClass("mb-slider");a.el=e;a.$el.data("movingBoxes",a);a.init=function(){a.options=c.extend({},c.movingBoxes.defaultOptions,h);a.$el.wrap('<div class="movingBoxes mb-wrapper"><div class="mb-scroll" /></div>');a.$window=a.$el.parent();a.$wrap=a.$window.parent().css({width:a.options.width}).prepend('<a class="mb-scrollButtons mb-left"></a>').append('<a class="mb-scrollButtons mb-right"></a><div class="mb-left-shadow"></div><div class="mb-right-shadow"></div>'); a.$panels=a.$el.children().addClass("mb-panel");a.runTime=c(".mb-slider").index(a.$el)+1;a.regex=RegExp("slider"+a.runTime+"=(\\d+)","i");a.initialized=!1;a.currentlyMoving=!1;a.curPanel=1;a.update();c(window).load(function(){a.update(!1)});a.$wrap.find(".mb-right").click(function(){a.goForward();return!1}).end().find(".mb-left").click(function(){a.goBack();return!1});a.$el.delegate(".mb-panel","click",function(){a.change(a.$panels.index(c(this))+1)});a.$wrap.click(function(){a.active()});a.$panels.delegate("a", "focus",function(){a.$panels.index(c(this).closest(".mb-panel"))+1!==a.curPanel&&a.change(a.$panels.index(c(this).closest(".mb-panel"))+1,{},!1)});c(document).keyup(function(b){if(!b.target.tagName.match("TEXTAREA|INPUT|SELECT"))switch(b.which){case 39:case 32:a.$wrap.is(".mb-active-slider")&&a.goForward();break;case 37:a.$wrap.is(".mb-active-slider")&&a.goBack()}});var b=a.options.hashTags?a.getHash()||a.options.startPanel:a.options.startPanel;c.each("initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes".split(" "), function(b,d){var e=d.split(".")[0];c.isFunction(a.options[e])&&a.$el.bind(d,a.options[e])});setTimeout(function(){a.change(b,function(){a.initialized=!0;a.$el.trigger("initialized.movingBoxes",[a,b])})},a.options.speed*2)};a.update=function(b){var f;a.$panels=a.$el.children().addClass("mb-panel").css({width:a.options.width*a.options.panelWidth,margin:0}).each(function(){c(this).find(".mb-inside").length===0&&c(this).wrapInner('<div class="mb-inside" />')});a.totalPanels=a.$panels.length;f=a.$panels.eq(a.curPanel- 1);a.curWidth=a.curWidth||f.outerWidth();a.regWidth=a.curWidth*a.options.reducedSize;a.$panels.css({width:a.curWidth,fontSize:"1em"});a.$panels.eq(a.curPanel-1).addClass(a.options.currentPanel);a.heights=a.$panels.map(function(a,b){return c(b).outerHeight(!0)}).get();a.returnToNormal(a.curPanel,0);a.growBigger(a.curPanel,0,b);a.$el.css({position:"absolute",width:(a.curWidth+100)*a.totalPanels+(a.options.width-a.curWidth)/2,height:Math.max.apply(this,a.heights)+10});a.$window.css({height:a.options.fixedHeight? Math.max.apply(this,a.heights):a.heights[a.curPanel-1]});a.$panels.eq(0).css({"margin-left":(a.options.width-a.curWidth)/2});a.buildNav();a.change(a.curPanel,{},!1)};a.buildNav=function(){a.$navLinks={};a.$nav&&a.$nav.remove();if(a.options.buildNav&&a.totalPanels>1){a.$nav=c('<div class="mb-controls"><a class="mb-testing"></a></div>').appendTo(a.$wrap);var b,f="",d=c.isFunction(a.options.navFormatter),e=parseInt(a.$nav.find(".mb-testing").css("text-indent"),10)<0;a.$panels.each(function(g){b=g+1; f+='<a href="#" class="mb-panel'+b;d?(g=a.options.navFormatter(b,c(this)),f+=e?" "+a.options.tooltipClass+'" title="'+g:"",f+='">'+g+"</a> "):f+='">'+b+"</a> "});a.$navLinks=a.$nav.html(f).find("a").bind("click",function(){a.change(a.$navLinks.index(c(this))+1);return!1})}};a.returnToNormal=function(b,c){a.$panels.not(":eq("+(b-1)+")").removeClass(a.options.currentPanel).animate({width:a.regWidth,fontSize:a.options.reducedSize+"em"},c===0?c:a.options.speed)};a.growBigger=function(b,f,d){a.$panels.eq(b- 1).animate({width:a.curWidth,fontSize:"1em"},f===0?f:a.options.speed,function(){a.initialized&&(c(this).addClass(a.options.currentPanel),d!==!1&&a.$el.trigger("completed.movingBoxes",[a,b]))})};a.goForward=function(){a.initialized&&a.change(a.curPanel+1)};a.goBack=function(){a.initialized&&a.change(a.curPanel-1)};a.change=function(b,c,d){b=parseInt(b,10);a.initialized&&(a.active(),a.$el.trigger("initChange.movingBoxes",[a,b]));if(a.options.wrap){if(b<1)b=a.totalPanels;b>a.totalPanels&&(b=1)}else if(b< 1&&(b=1),b>a.totalPanels)b=a.totalPanels;if(a.initialized&&a.curPanel===b&&!d)return!1;if(!a.currentlyMoving)a.currentlyMoving=!0,d=a.$panels.eq(b-1).position().left-(a.options.width-a.curWidth)/2,b>a.curPanel&&(d-=a.curWidth-a.regWidth),d=a.options.fixedHeight?{scrollLeft:d}:{scrollLeft:d,height:a.heights[b-1]},a.initialized&&a.$el.trigger("beforeAnimation.movingBoxes",[a,b]),a.$window.animate(d,{queue:!1,duration:a.options.speed,easing:a.options.easing,complete:function(){a.curPanel=b;a.initialized&& a.$window.scrollTop(0);a.currentlyMoving=!1;typeof c==="function"&&c(a)}}),a.returnToNormal(b),a.growBigger(b),a.options.hashTags&&a.initialized&&a.setHash(b);a.$wrap.find(".mb-controls a").removeClass(a.options.currentPanel).eq(b-1).addClass(a.options.currentPanel)};a.getHash=function(){var b=window.location.hash.match(a.regex);return b===null?"":parseInt(b[1],10)};a.setHash=function(b){var c="slider"+a.runTime+"=",d=window.location.hash;if(typeof d!=="undefined")window.location.hash=d.indexOf(c)> 0?d.replace(a.regex,c+b):d+"&"+c+b};a.active=function(){c(".mb-active-slider").removeClass("mb-active-slider");a.$wrap.addClass("mb-active-slider")};a.currentPanel=function(b,c){typeof b!=="undefined"&&a.change(b,c);return a.curPanel};a.init()};c.movingBoxes.defaultOptions={startPanel:1,width:800,panelWidth:0.5,reducedSize:0.8,fixedHeight:!1,speed:500,hashTags:!0,wrap:!1,buildNav:!1,navFormatter:null,easing:"swing",currentPanel:"current",tooltipClass:"tooltip",initialized:null,initChange:null,beforeAnimation:null, completed:null};c.fn.movingBoxes=function(e,h){var a,b=this.data("movingBoxes");return this.each(function(){(typeof e).match("object|undefined")?b?b.update():new c.movingBoxes(this,e):/\d/.test(e)&&!isNaN(e)&&b&&(a=typeof e==="number"?e:parseInt(c.trim(e),10),a>=1&&a<=b.totalPanels&&b.change(a,h))})};c.fn.getMovingBoxes=function(){return this.data("movingBoxes")}})(jQuery);

0 comments on commit af7ce98

Please sign in to comment.