Simple Thumb Link Preview

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

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

Berikut cara penerapannya :

Silahkan terapkan script di bawah ini sempurna 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 instruksi 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 goresan pena dengan class id="p1" atau id="p2" atau id="p3" rujukan penerapan ibarat 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"></a></p>

Hasilnya akan terlihat ibarat demo di bawah ini

Result

Keterangan

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

Tweet

Subscribe to receive free email updates: