Advertisement
abuiyad

Simple Thumb Link preview javascript

Apr 4th, 2015
1,411
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type='text/javascript'>
  2. //<![CDATA[
  3. $(function() {
  4.   $('#p1 a').miniPreview({ prefetch: 'pageload' });
  5.   $('#p2 a').miniPreview({ prefetch: 'parenthover' });
  6.   $('#p3 a').miniPreview({ prefetch: 'none' });
  7. });
  8.  
  9. (function($) {
  10.   var PREFIX = 'link-preview';
  11.  
  12.   $.fn.miniPreview = function(options) {
  13.     return this.each(function() {
  14.       var $this = $(this);
  15.       var miniPreview = $this.data(PREFIX);
  16.       if (miniPreview) {
  17.         miniPreview.destroy();
  18.       }
  19.  
  20.       miniPreview = new MiniPreview($this, options);
  21.       miniPreview.generate();
  22.       $this.data(PREFIX, miniPreview);
  23.     });
  24.   };
  25.  
  26.   var MiniPreview = function($el, options) {
  27.     this.$el = $el;
  28.     this.options = $.extend({}, this.defaultOptions, options);
  29.     this.counter = MiniPreview.prototype.sharedCounter++;
  30.   };
  31.  
  32.   MiniPreview.prototype = {
  33.     sharedCounter: 0,
  34.    
  35.     defaultOptions: {
  36.       width: 256,
  37.       height: 144,
  38.       scale: .25,
  39.       prefetch: 'pageload'
  40.     },
  41.        
  42.     generate: function() {
  43.       this.createElements();
  44.       this.setPrefetch();
  45.     },
  46.  
  47.     createElements: function() {
  48.       var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
  49.       var $loading = $('<div>', { class: PREFIX + '-loading' });
  50.       var $frame = $('<iframe>', { class: PREFIX + '-frame' });
  51.       var $cover = $('<div>', { class: PREFIX + '-cover' });
  52.       $wrapper.appendTo(this.$el).append($loading, $frame, $cover);
  53.      
  54.       $wrapper.css({
  55.         width: this.options.width + 'px',
  56.         height: this.options.height + 'px'
  57.       });
  58.      
  59.       var inversePercent = 100 / this.options.scale;
  60.       $frame.css({
  61.         width: inversePercent + '%',
  62.         height: inversePercent + '%',
  63.         transform: 'scale(' + this.options.scale + ')'
  64.       });
  65.  
  66.       var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
  67.       var top = (this.$el.height() + fontSize) / 2;
  68.       var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
  69.       $wrapper.css({
  70.         left: left + 'px'
  71.       });
  72.     },
  73.    
  74.     setPrefetch: function() {
  75.       switch (this.options.prefetch) {
  76.         case 'pageload':
  77.           this.loadPreview();
  78.           break;
  79.         case 'parenthover':
  80.           this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
  81.             this.loadPreview.bind(this));
  82.           break;
  83.         case 'none':
  84.           this.$el.one(this.getNamespacedEvent('mouseenter'),
  85.             this.loadPreview.bind(this));
  86.           break;
  87.         default:
  88.           throw 'Prefetch setting not recognized: ' + this.options.prefetch;
  89.           break;
  90.       }
  91.     },
  92.    
  93.     loadPreview: function() {
  94.       this.$el.find('.' + PREFIX + '-frame')
  95.         .attr('src', this.$el.attr('href'))
  96.         .on('load', function() {
  97.           $(this).css('background-color', '#fff');
  98.         });
  99.     },
  100.    
  101.     getNamespacedEvent: function(event) {
  102.       return event + '.' + PREFIX + '_' + this.counter;
  103.     },
  104.  
  105.     destroy: function() {
  106.       this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
  107.       this.$el.off(this.getNamespacedEvent('mouseenter'));
  108.       this.$el.find('.' + PREFIX + '-wrapper').remove();
  109.     }
  110.   };
  111. })(jQuery);
  112. //]]>
  113. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement