Permalink
Browse files

newer functionality for removing all but the images on the page

some renaming too
  • Loading branch information...
1 parent f12a9eb commit 8236e364458b0eaf9302e5a3791737d49b799f03 @dguzzo committed Apr 16, 2012
Showing with 73 additions and 33 deletions.
  1. +4 −3 index.html
  2. +57 −28 javascripts/jquery.reflections.js
  3. +9 −1 javascripts/{test.js → reflections-test.js}
  4. +3 −1 stylesheets/test.css
View
@@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>Reflect Images</title>
+ <title>Reflect Images Test</title>
<link rel='stylesheet' type='text/css' href='stylesheets/test.css'/>
</head>
<body>
@@ -29,7 +29,8 @@
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="https://raw.github.com/dguzzo/reflections/master/javascripts/jquery.reflections.js"></script>
- <script src="javascripts/test.js"></script>
+ <script src="http://www.telecommutetojuryduty.com/scripts/external/jquery.masonry.min.js"></script>
+ <script src="javascripts/jquery.reflections.js"></script>
+ <script src="javascripts/reflections-test.js"></script>
</body>
</html>
@@ -17,6 +17,8 @@
// after the plugin's main function runs. also maybe could load in masonry and make bricks outta them first, but that's a bit
// more ambitious
+ var masonryRun = false;
+
function wrapImage(options){
var $image = jQuery(this),
@@ -36,77 +38,104 @@
// the meat of the process
function wrapImageInternal(options){
- $image.wrap('<div class="imageWrapper"></div>')
+ $image.wrap('<div class="reflectionsWrapper"></div>')
.after('<div class="reflection top" style="top: -'+height+'px"></div>')
.after('<div class="reflection right" style="right: -'+width+'px"></div>')
.after('<div class="reflection bottom" style="bottom: -'+height+'px"></div>')
.after('<div class="reflection left" style="left: -'+width+'px"></div>');
- var $reflections = $image.closest('.imageWrapper').find('.reflection');
+ var $reflections = $image.closest('.reflectionsWrapper').find('.reflection');
$reflections.append($image.clone()); // put images into each of the four reflection containers
$reflections.css('opacity', options.opacity );
// have some fun:
- $image.closest('.imageWrapper').css('-webkit-transform', 'rotate('+options.rotation+'deg)');
-
- jQuery('html').css('overflow', 'hidden');
-
- if (options.stripLinks ){
- var $link = $image.closest('a'),
- $linkChildren = $link.children();
-
- $link.replaceWith($linkChildren);
- }
-
+ $image.closest('.reflectionsWrapper').css('-webkit-transform', 'rotate('+options.rotation+'deg)');
}
}
// set things back to the way they were before the plugin was run
function destroyReflection(){
console.log('destroyReflection');
- jQuery(this).siblings('div').remove();
- jQuery(this).unwrap('.imageWrapper');
- jQuery('html').css('overflow', 'auto');
+
+ var wrapperSelector = '.reflectionsWrapper',
+ $wrapper = jQuery(this).closest(wrapperSelector);
+
+ if( $wrapper.length > 0 ){
+ $wrapper.find('.reflection').remove();
+ jQuery(this).unwrap(wrapperSelector);
+ jQuery('html').css('overflow', 'auto');
+ }
+ }
+
+ function removeAllButImages(){
+ console.log('removeAllButImages');
+ var $images = jQuery('body img');
+ $images = $images.clone();
+ jQuery( 'body *' ).remove();
+ jQuery('body').append($images);
+ jQuery(window).scrollTop(0);
}
+
$.fn.reflectImages = function(options){
var defaults = {
'rotation' : 45,
'opacity' : 0.5,
- 'stripLinks' : false,
'destroyAllButImages' : false // todo
},
- item = null;
+ item = null,
+ options = options || {};
// todo to flesh out this plugin, other parameterized things (rotation, opacity, etc).
- if (options) {
- $.extend(defaults, options);
- }
+ options = $.extend(defaults, options);
- if( defaults.delay ){
+ if( options.delay ){
var waitTime = 0;
}
+ if( options.stripAllButImages ){
+ removeAllButImages();
+
+ jQuery('img').reflectImages(jQuery.extend(true, {}, options, {'stripAllButImages' : false}));
+
+ jQuery('.reflectionsWrapper').css('float', 'left');
+
+ // leave things in place if run a second time
+ if( !masonryRun ){
+ jQuery('body').masonry({
+ itemSelector : '.reflectionsWrapper',
+ columnWidth : 260,
+ isFitWidth: true
+ });
+ }
+
+ masonryRun = true;
+
+ return;
+ }
+
this.each( function(){
item = this;
- if( defaults.destroy ){
+ if( options.destroy ){
destroyReflection.call(item);
return;
}
else{
- if( defaults.delay ){
- defaults.delaySpecific = waitTime;
- waitTime += defaults.delay; // need to tell the internal functions how much time to wait
+ if( options.delay ){
+ options.delaySpecific = waitTime;
+ waitTime += options.delay; // need to tell the internal functions how much time to wait
}
- wrapImage.call(item, defaults);
+ wrapImage.call(item, options);
}
});
- };
+ jQuery('html').css('overflow', 'hidden');
+
+ }; // end $.fn.reflectImages
})(jQuery);
@@ -3,8 +3,16 @@ jQuery( function(){
jQuery(document).delegate('body', 'keyup', function(e){
try{
switch( e.which ){
+ case 32: // spacebar
case 39: // right key
- jQuery('li img').reflectImages({ 'delay': 80, 'rotation' : -130, 'opacity' : 0.4, 'stripLinks' : true });
+ e.preventDefault();
+
+ jQuery('img').reflectImages({
+ 'delay': 0,
+ 'rotation' : 45,
+ 'opacity' : 0.4,
+ 'stripAllButImages' : true }
+ );
break;
case 37: // left key
jQuery('li img').reflectImages({'destroy' : true });
View
@@ -24,4 +24,6 @@ li{float: left; margin-right: 240px; margin-bottom: 40px;}
.reflection{
position: absolute;
/* opacity: 0.5;*/
-}
+}
+
+.reflectionsWrapper{position: relative;}

0 comments on commit 8236e36

Please sign in to comment.