Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add content cross-fade effect for elastic transition

  • Loading branch information...
commit 687b01fd66e39758e2e1165c333195cac4b31d4a 1 parent 6f2442d
@c2h5oh authored
Showing with 11 additions and 10 deletions.
  1. +11 −10 colorbox/jquery.colorbox.js
View
21 colorbox/jquery.colorbox.js
@@ -87,6 +87,7 @@
$related,
$window,
$loaded,
+ $old,
$loadingBay,
$loadingOverlay,
$title,
@@ -355,7 +356,8 @@
$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
$wrap = $tag(div, "Wrapper");
$content = $tag(div, "Content").append(
- $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
+ $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden; position:absolute'),
+ $old = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden; position:absolute'),
$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
$title = $tag(div, "Title"),
$current = $tag(div, "Current"),
@@ -551,7 +553,9 @@
var callback, speed = settings.transition === "none" ? 0 : settings.speed;
- $loaded.remove();
+ $old.empty().width($loaded.width()).height($loaded.height()).show();
+ $loaded.children.appendTo($old);
+ $loaded.remove();
$loaded = $tag(div, 'LoadedContent').append(object);
function getWidth() {
@@ -567,7 +571,7 @@
$loaded.hide()
.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
- .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
+ .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden',position:'absolute'})
.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
.prependTo($content);
@@ -604,14 +608,11 @@
clearTimeout(loadingTimer);
$loadingOverlay.hide();
trigger(event_complete, settings.onComplete);
- };
+ };
+
+ $old.fadeOut(speed);
+ $loaded.fadeIn(speed);
- if (isIE) {
- //This fadeIn helps the bicubic resampling to kick-in.
- if (photo) {
- $loaded.fadeIn(100);
- }
- }
$title.html(settings.title).add($loaded).show();
Please sign in to comment.
Something went wrong with that request. Please try again.