Simple Thumb Link preview - Ok this time I will share tips on how to install a simple thumb preview link on the blog.
This preview link the application of thumb I've ever met before at a premium template created MKR Site. The function of these effects is quite simple: give the appearance of a web page / blog which is applied through the web page links to provide a certain class.
Here's how its application:
Please apply the script below just above the </ body> or </ 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);
miniPreview var = $ 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>Then apply the code below before the </ 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;
}Save the template.
The application of the posting:
Wrap writing with the class id = "p1" or id = "p2" or id = "p3" examples of the application as below
<p id = "p1"> Donec at dolor mi. Pellentesque ornare sit amet risus. Fusce ut turpis sed semper varius. In ut est et interdum gravida nec enim id quam <a href="http://arlinadesign.blogspot.com"> Arlina Design </a> </ p>The result will look like the demo below
0 Comment to "Simple Thumb Link Preview"
Post a Comment