From Design pattern
Jump to: navigation, search
 
(3 intermediate revisions by one user not shown)
Line 34: Line 34:
  
  
$('elements').onScreen({
 
  container: window,
 
  direction: 'vertical',
 
  doIn: function() {
 
    // Do something to the matched elements as they come in
 
  },
 
  doOut: function() {
 
    // Do something to the matched elements as they get off scren
 
  },
 
  tolerance: 0,
 
  throttle: 50,
 
  toggleClass: 'onScreen',
 
  lazyAttr: null,
 
  lazyPlaceholder: 'someImage.jpg',
 
  debug: false
 
});
 
  
 +
/*! LazyYT (lazy load Youtube videos plugin) - v0.3.3 - 2014-05-19
 +
* Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-width="300" data-height="200" data-parameters="rel=0">loading...</div>
 +
* Copyright (c) 2014 Tyler Pearson; Licensed MIT */
  
  
 +
;(function ($) {
 +
    'use strict';
  
 +
    function setUp($el) {
 +
        var width = $el.data('width'),
 +
            height = $el.data('height'),
 +
            id = $el.data('youtube-id'),
 +
            youtubeParameters = $el.data('parameters') || '';
  
 
+
        if (typeof width === 'undefined' || typeof height === 'undefined' || typeof id === 'undefined') {
  function lazyLoad() {
+
            throw new Error('lazyYT is missing a required data attribute.');
    /*
+
        }
    To use the lazy loader, you must initialize onScreen and tell it
+
 
    which HTML attribute to look for.
+
        $el.css({
    onScreen will then replace the SRC value with the one from lazyAttr.
+
            'position': 'relative',
    */
+
            'height': height,
    $('div.postAttachment img').onScreen({
+
            'width': width,
      lazyAttr: 'data-lazy'
+
            'background': 'url(http://img.youtube.com/vi/' + id + '/0.jpg) center center no-repeat',
    });
+
            'cursor': 'pointer',
  }
+
            '-webkit-background-size': 'cover',
 
+
            '-moz-background-size': 'cover',
  function animatePosts() {
+
            '-o-background-size': 'cover',
    /*
+
            'background-size': 'cover'
    In this example I used onScreen to animate the posts as
+
        })
    they become visible. I set the tolerance to 50 so the posts
+
            .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
    start animating once they're 50px inside the viewport.
+
            .addClass('lazyYT-image-loaded');
    */
+
 
    $('article.post').onScreen({
+
        $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
      doIn: function() {
+
            $('#lazyYT-title-' + id).text(data.entry.title.$t);
        $(this).animate({
+
        });
          top: 0,
+
 
          opacity: 1
+
        $el.on('click', function (e) {
        },500);
+
            e.preventDefault();
      },
+
            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
      tolerance: 50
+
                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" frameborder="0" allowfullscreen></iframe>')
    });
+
                    .removeClass('lazyYT-image-loaded')
  }
+
                    .addClass('lazyYT-video-loaded');
 
+
            }
  $(function(){
+
        });
 
+
 
    animatePosts()
+
    }
    lazyLoad();
+
 
      
+
    $.fn.lazyYT = function () {
  });
+
        return this.each(function () {
 +
            var $el = $(this).css('cursor', 'pointer');
 +
            setUp($el);
 +
        });
 +
     };
 +
 
 +
}(jQuery));
 +
 
 +
 
 +
 
 +
$('.js-lazyYT').lazyYT();

Latest revision as of 18:39, 30 May 2014

$("#mw-content-text h3").each(function(){

$(this).wrap("<div class=example></div>");
var ex_div=$(this).closest("DIV");
//ex_div.css("border","1px solid red");
//console.log(ex_div);
while(ex_div.next().length && !ex_div.next().prop("tagName").match(/h3|h2|div/i)){
	nextobj=ex_div.next();
	//console.log(nextobj.prop("tagName"));
ex_div.append(nextobj);
}

});

$("div.example").each(function(){

var video=$("iframe,object",this);
if(video.length){
	//console.log(video.eq(0),video.eq(0).prop("clientWidth"));
if(video.eq(0).prop("clientWidth")<=300){
	video.insertAfter($("h3",this));
	$(this).css("width",300).css("float","left").css("margin","0 30px 0 0");

	//console.log($(this).next().prop("className"));
	if($(this).next().prop("className")!="example") $(this).after("<br clear=both>");
}else {
$(this).before("<br clear=both>");

}
}

});




/*! LazyYT (lazy load Youtube videos plugin) - v0.3.3 - 2014-05-19
* Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-width="300" data-height="200" data-parameters="rel=0">loading...</div>
* Copyright (c) 2014 Tyler Pearson; Licensed MIT */


;(function ($) {
    'use strict';

    function setUp($el) {
        var width = $el.data('width'),
            height = $el.data('height'),
            id = $el.data('youtube-id'),
            youtubeParameters = $el.data('parameters') || '';

        if (typeof width === 'undefined' || typeof height === 'undefined' || typeof id === 'undefined') {
            throw new Error('lazyYT is missing a required data attribute.');
        }

        $el.css({
            'position': 'relative',
            'height': height,
            'width': width,
            'background': 'url(http://img.youtube.com/vi/' + id + '/0.jpg) center center no-repeat',
            'cursor': 'pointer',
            '-webkit-background-size': 'cover',
            '-moz-background-size': 'cover',
            '-o-background-size': 'cover',
            'background-size': 'cover'
        })
            .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
            .addClass('lazyYT-image-loaded');

        $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
            $('#lazyYT-title-' + id).text(data.entry.title.$t);
        });

        $el.on('click', function (e) {
            e.preventDefault();
            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" frameborder="0" allowfullscreen></iframe>')
                    .removeClass('lazyYT-image-loaded')
                    .addClass('lazyYT-video-loaded');
            }
        });

    }

    $.fn.lazyYT = function () {
        return this.each(function () {
            var $el = $(this).css('cursor', 'pointer');
            setUp($el);
        });
    };

}(jQuery));



$('.js-lazyYT').lazyYT();