فتح الروابط الداخلية فى نافذة منبثقة دون الدخول الى الرابط

أعلنا أمس عن نشرنا لإضافة رائعة جدا خاصة بإظهار محتوى صفحة ويب أو محتوى رابط يتم تضمينة داخل كلمة أو جملة قبل فتحه على هيئة مربع منبثق. تلك الطريقة التى تتمتع بها مدونات ووردبريس والتى بحثت عنها كثيرا لشرحها لكم على منصة بلوجر. وها هى نقدمها بين أيديكم لمن يريد أن يقوم بالمعاينة من هنا - فقط قم بالتمرير على أى كلمة أو جملة تتضمن رابط -

اذا كنت ممن أحب تلك الإضافة عليك إذن اتباع الخطوات التالية:

أولا: خطوة إضافة كود JavaScript "فقط قم بالبحث عن </head> وقم بوضع الكود التالى فوقه أو قبله"

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

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

ثانيا: خطوة إضافة كود CSS "قم بالبحث عن كود b:skin وضعه فوقه أو قبله" اذا وجدت صعوبة فى ايجاده شاهد ذلك الشرح

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

.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 عند إنشائك موضوع ما يجب أن يكون بتلك الطريقة بحيث تقوم بتغيير جملة المحتوى هنا الى الفقرة التى تقوم بكتابتها بحيث أن تقوم بتغيير رابط مدونة أبو إياد برابط الموقع أو الصفحة التى تريد تضمينها وظهورها فى نافذة منبثقة كمثال المعاينة, وأخيرا تقوم بتغيير كلمة abuiyad blog الى الكلمة أو الجملة التى ستضمن الرابط بداخلها.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

<p id="p1">المحتوى هنا<a href="http://za2eeralarab.blogspot.com/">zaeer alarab blog</a></p>