Simple Thumb Link Preview

12/06/2014

Simple Thumb Link preview - Ok kali ini Saya akan berbagi tips tentang cara memasang simple thumb link preview pada blog.

Penerapan thumb link preview ini pernah Saya temui sebelumnya di template premium yang dibuat MKR Site. Fungsi dari efek ini cukup sederhana yaitu memberikan tampilan suatu halaman web / blog yang diterapkan melalui link halaman web tersebut dengan memberikan class tertentu.

Berikut cara penerapannya :

Silahkan terapkan script di bawah ini tepat di atas </body>  atau  </head>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('#p1 a').miniPreview({ prefetch: 'pageload' });
  $('#p2 a').miniPreview({ prefetch: 'parenthover' });
  $('#p3 a').miniPreview({ prefetch: 'none' });
});

(function($) {
  var PREFIX = 'link-preview';
  
  $.fn.miniPreview = function(options) {
    return this.each(function() {
      var $this = $(this);
      var miniPreview = $this.data(PREFIX);
      if (miniPreview) {
        miniPreview.destroy();
      }

      miniPreview = new MiniPreview($this, options);
      miniPreview.generate();
      $this.data(PREFIX, miniPreview);
    });
  };
  
  var MiniPreview = function($el, options) {
    this.$el = $el;
    this.options = $.extend({}, this.defaultOptions, options);
    this.counter = MiniPreview.prototype.sharedCounter++;
  };
  
  MiniPreview.prototype = {
    sharedCounter: 0,
    
    defaultOptions: {
      width: 256,
      height: 144,
      scale: .25,
      prefetch: 'pageload'
    },
        
    generate: function() {
      this.createElements();
      this.setPrefetch();
    },

    createElements: function() {
      var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
      var $loading = $('<div>', { class: PREFIX + '-loading' });
      var $frame = $('<iframe>', { class: PREFIX + '-frame' });
      var $cover = $('<div>', { class: PREFIX + '-cover' });
      $wrapper.appendTo(this.$el).append($loading, $frame, $cover);
      
      $wrapper.css({
        width: this.options.width + 'px',
        height: this.options.height + 'px'
      });
      
      var inversePercent = 100 / this.options.scale;
      $frame.css({
        width: inversePercent + '%',
        height: inversePercent + '%',
        transform: 'scale(' + this.options.scale + ')'
      });

      var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
      var top = (this.$el.height() + fontSize) / 2;
      var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
      $wrapper.css({
        left: left + 'px'
      });
    },
    
    setPrefetch: function() {
      switch (this.options.prefetch) {
        case 'pageload':
          this.loadPreview();
          break;
        case 'parenthover':
          this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        case 'none':
          this.$el.one(this.getNamespacedEvent('mouseenter'),
            this.loadPreview.bind(this));
          break;
        default:
          throw 'Prefetch setting not recognized: ' + this.options.prefetch;
          break;
      }
    },
    
    loadPreview: function() {
      this.$el.find('.' + PREFIX + '-frame')
        .attr('src', this.$el.attr('href'))
        .on('load', function() {
          $(this).css('background-color', '#fff');
        });
    },
    
    getNamespacedEvent: function(event) {
      return event + '.' + PREFIX + '_' + this.counter;
    },

    destroy: function() {
      this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
      this.$el.off(this.getNamespacedEvent('mouseenter'));
      this.$el.find('.' + PREFIX + '-wrapper').remove();
    }
  };
})(jQuery);
//]]>
</script>

Kemudian terapkan kode di bawah ini sebelum </style>

.break {
    text-align: center;
}

.link-preview-wrapper {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    margin-top: -4px;
    border: 1px solid #aaa;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.3);
    transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}

a:hover .link-preview-wrapper {
    z-index: 2;
    opacity: 1;
    margin-top: 6px;
    transition: opacity .3s, margin-top .3s;
}

.link-preview-loading, .link-preview-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.link-preview-loading {
    display: table;
    height: 100%;
    width: 100%;
    font-size: 15px;
    text-align: center;
    color: #999;
    background-color: #e5e5e5;
}

.link-preview-loading::before {
    content: 'Loading...';
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.link-preview-cover {
    background-color: rgba(0,0,0,0);
}

.link-preview-frame {
    border: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Simpan template.


Penerapan pada postingan :

Bungkus tulisan dengan class id="p1" atau id="p2" atau id="p3" contoh penerapan seperti di bawah ini


<p id="p1">Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam <a href="http://arlinadesign.blogspot.com">Arlina Design</a></p>


Hasilnya akan terlihat seperti demo di bawah ini


Keterangan

id="p1" = Thumbnail akan tampil saat hover pada link.
id="p2" = Thumbnail tidak akan tampil sebelum hover pada area tulisan.
id="p3" = Thumbnail akan tampil jika diperlukan, yang akan menghemat bandwidth namun akan memerlukan waktu saat hover kembali pada link.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.