إضافة تأثير ظهور الصور على الروابط

إضافة تأثير ظهور الصور على الروابط

السلام عليكم ورحمة الله وبركاتو

في هذه التدوينة اقدم لكم إضافة جميلة ورائعة تخص الروابط التي تستخدمونها على مدونتكم

تعمل هذه الإضافة على إظهار صورة مصغرة للموقع الماخوذ منه الرابط

لتوضيع الأمر أكثر أترككم مع معاينة حية للإضافة

معاينة الإضافة

كيفية إضافة هذه الميزة

قم بالبحث عن هذا الوسم   </body>
و ضع الكود التالي قبله/فوقه

 <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> 

قم بالبحث عن هذا الوسم   ]]></b:skin>
و ضع الكود التالي قبله/فوقه

 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;
} 

عندما تريد استخدام الميزة بأحد مواضيعك
قم بتحويل نمط الكتابة الى HTML استخدم الكود التالي

 
.<p id="p1"> <a href="http://arabic3professional.blogspot.com/">مدونة احتراف عربي</a></p> 

قم بتغيير الربط و الكلمات بما يناسبك

في امان الله