Skip to content
Extraits de code Groupes Projets
Valider 8ad2e640 rédigé par arno@rezo.net's avatar arno@rezo.net
Parcourir les fichiers

Les scripts lazy-oembed utilisés sur Seenthis.

parent
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
.gitattributes 0 → 100644
+ 4
− 0
Voir le fichier @ 8ad2e640
* text=auto !eol
/cekoi.txt -text
javascript/jquery.lazyoembed.js -text
javascript/jquery.oembed.mod.js -text
cekoi.txt 0 → 100644
+ 17
− 0
Voir le fichier @ 8ad2e640
jquery.oembed.mod.js charge des documents distants (vidéos, photos, sons) lorsqu'il trouve un lien vers un site tel que Youtube, Flickr...
Je n'appelle pas ce script directement, sinon il chargerait l'intégralité des documents distants référencés; ce que je veux éviter (sur Seenthis, les pages de liens sont très longues).
J'ai donc modifié LazyLoad:
jquery.lazyoembed.js
Lazyload est censé charger les images au fur et à mesure de leur apparition à l'écran. Ici, ce ne sont pas les images, mais les documents distants oembed qui sont appelés.
Ce script déclenche les oembed sur les éléments définis dans la fonction suivante:
function afficher_oe() {
$(".texte a.spip_out").lazyload({ threshold : 200 });
}
Je déclenche la fonction afficher_oe() au document.ready.
javascript/jquery.lazyoembed.js 0 → 100644
+ 206
− 0
Voir le fichier @ 8ad2e640
/* Basé sur:
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2009 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
* Version: 1.5.0
*
*/
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold : 0,
failurelimit : 0,
event : "scroll",
effect : "show",
container : window
};
if(options) {
$.extend(settings, options);
}
/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
this.each(function() {
var self = this;
/* Save original only if it is not defined in HTML. */
if (undefined == $(self).attr("original")) {
$(self).attr("original", $(self).attr("src"));
}
if ("scroll" != settings.event ||
undefined == $(self).attr("src") ||
settings.placeholder == $(self).attr("src") ||
($.abovethetop(self, settings) ||
$.leftofbegin(self, settings) ||
$.belowthefold(self, settings) ||
$.rightoffold(self, settings) )) {
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
} else {
$(self).removeAttr("src");
}
self.loaded = false;
} else {
self.loaded = true;
}
/* When appear is triggered load original image. */
$(self).one("appear", function() {
if (!this.loaded) {
afficher_oe_el ($(this));
};
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
function oembed_redim(el) {
el.parent(".lien_lien").find(".oembed-container").hide().each (function(){
if (
$(this).hasClass("oembed-container-YouTube")
|| $(this).hasClass("oembed-container-Vimeo")
|| $(this).hasClass("oembed-container-Flickr")
|| $(this).hasClass("oembed-container-Dailymotion")
|| $(this).hasClass("oembed-container-screenr")
) {
var largeur = $(this).children("object").attr("width");
var hauteur = $(this).children("object").attr("height");
if (largeur > 440) {
$(this).children("object").attr("width", 440);
$(this).children("object").children("embed").attr("width", 440);
hauteur = Math.round(hauteur / largeur * 440);
$(this).children("object").attr("height", hauteur);
$(this).children("object").children("embed").attr("height", hauteur);
}
} else if ($(this).hasClass("oembed-container-TwitPic")) {
$(this).find("img").hide().css("max-width", "440px");
}else {
$(this).remove();
}
});
}
function afficher_oe_el (el) {
el.oembed(null,
{
embedMethod: "append",
maxWidth: 440,
maxHeight: 350,
autoplay: false
}
);
}
function afficher_oe() {
$(".texte a.spip_out").lazyload({ threshold : 200 });
//afficher_oe_el($(".texte a.spip_out"));
}
javascript/jquery.oembed.mod.js 0 → 100755
+ 230
− 0
Voir le fichier @ 8ad2e640
/*
* http://code.google.com/p/jquery-oembed/
*/
(function($) {
$.fn.oembed = function(url, options, callback) {
options = $.extend(true, $.fn.oembed.defaults, options);
return this.each(function() {
var container = $(this),
resourceURL = (url != null) ? url : container.attr("href"),
provider;
if (!callback) callback = function(container, oembed) {
$.fn.oembed.insertCode(container, options.embedMethod, oembed);
};
if (resourceURL != null) {
provider = getOEmbedProvider(resourceURL);
if (provider != null) {
provider.params = getNormalizedParams(options[provider.name]) || {};
provider.maxWidth = options.maxWidth;
provider.maxHeight = options.maxHeight;
provider.embedCode(container, resourceURL, callback);
return;
}
}
callback(container, null);
});
};
// Plugin defaults
$.fn.oembed.defaults = {
maxWidth: null,
maxHeight: null,
embedMethod: "replace" // "auto", "append", "fill"
};
$.fn.oembed.insertCode = function(container, embedMethod, oembed) {
if (oembed == null)
return;
switch(embedMethod)
{
case "auto":
if (container.attr("href") != null) {
$.fn.oembed.insertCode(container, "append", oembed);
}
else {
$.fn.oembed.insertCode(container, "replace", oembed);
};
break;
case "replace":
container.replaceWith(oembed.code);
break;
case "fill":
container.html(oembed.code);
break;
case "append":
var oembedContainer = container.next();
if (oembedContainer == null || !oembedContainer.hasClass("oembed-container")) {
oembedContainer = container
.after('<div class="oembed-container"></div>')
.next(".oembed-container");
if (oembed != null && oembed.provider_name != null)
oembedContainer.toggleClass("oembed-container-" + oembed.provider_name);
}
oembedContainer.html(oembed.code);
break;
}
};
$.fn.oembed.getPhotoCode = function(url, data) {
var alt = data.title ? data.title : '';
alt += data.author_name ? ' - ' + data.author_name : '';
alt += data.provider_name ? ' - ' +data.provider_name : '';
var code = '<div><a href="' + url + '" target="_blank"><img src="' + data.url + '" alt="' + alt + '"/></a></div>';
if (data.html)
code += "<div>" + data.html + "</div>";
return code;
};
$.fn.oembed.getVideoCode = function(url, data) {
var code = data.html;
return code;
};
$.fn.oembed.getRichCode = function(url, data) {
var code = data.html;
return code;
};
$.fn.oembed.getGenericCode = function(url, data) {
var title = (data.title != null) ? data.title : url,
code = '<a href="' + url + '">' + title + '</a>';
if (data.html)
code += "<div>" + data.html + "</div>";
return code;
};
$.fn.oembed.isAvailable = function(url) {
var provider = getOEmbedProvider(url);
return (provider != null);
};
/* Private Methods */
function getOEmbedProvider(url) {
for (var i = 0; i < providers.length; i++) {
if (providers[i].matches(url))
return providers[i];
}
return null;
}
function getNormalizedParams(params) {
if (params == null)
return null;
var normalizedParams = {};
for (var key in params) {
if (key != null)
normalizedParams[key.toLowerCase()] = params[key];
}
return normalizedParams;
}
var providers = [
new OEmbedProvider("fivemin", "5min.com"),
new OEmbedProvider("amazon", "amazon.com"),
new OEmbedProvider("flickr", "flickr", "http://flickr.com/services/oembed", "jsoncallback"),
new OEmbedProvider("googlevideo", "video.google."),
new OEmbedProvider("hulu", "hulu.com"),
// new OEmbedProvider("imdb", "imdb.com"),
new OEmbedProvider("metacafe", "metacafe.com"),
new OEmbedProvider("qik", "qik.com"),
new OEmbedProvider("revision3", "revision3.com"),
new OEmbedProvider("slideshare", "slideshare.net"),
new OEmbedProvider("twitpic", "twitpic.com"),
new OEmbedProvider("viddler", "viddler.com"),
new OEmbedProvider("vimeo", "vimeo.com", "http://vimeo.com/api/oembed.json"),
// new OEmbedProvider("wikipedia", "wikipedia.org"),
// new OEmbedProvider("wordpress", "wordpress.com"),
new OEmbedProvider("youtube", "youtube.com"),
new OEmbedProvider("dailymotion", "dailymotion.com"),
new OEmbedProvider("vids.myspace.com", "vids.myspace.com", "http://vids.myspace.com/index.cfm?fuseaction=oembed"),
new OEmbedProvider("screenr", "screenr.com", "http://screenr.com/api/oembed.json")
/* Crado pour forcer format=js */
new OEmbedProvider("soundcloud", "soundcloud", "http://soundcloud.com/oembed", "format=js&callback"),
];
function OEmbedProvider(name, urlPattern, oEmbedUrl, callbackparameter) {
this.name = name;
this.urlPattern = urlPattern;
this.oEmbedUrl = (oEmbedUrl != null) ? oEmbedUrl : "http://oohembed.com/oohembed/";
this.callbackparameter = (callbackparameter != null) ? callbackparameter : "callback";
this.maxWidth = 500;
this.maxHeight = 400;
this.matches = function(externalUrl) {
// TODO: Convert to Regex
return externalUrl.indexOf(this.urlPattern) >= 0;
};
this.getRequestUrl = function(externalUrl) {
var url = this.oEmbedUrl;
if (url.indexOf("?") <= 0)
url = url + "?";
else
url = url + "&";
var qs = "";
if (this.maxWidth != null && this.params["maxwidth"] == null)
this.params["maxwidth"] = this.maxWidth;
if (this.maxHeight != null && this.params["maxheight"] == null)
this.params["maxheight"] = this.maxHeight;
for (var i in this.params) {
// We don't want them to jack everything up by changing the callback parameter
if (i == this.callbackparameter)
continue;
// allows the options to be set to null, don't send null values to the server as parameters
if (this.params[i] != null)
qs += "&" + escape(i) + "=" + this.params[i];
}
url += "format=json&url=" + escape(externalUrl) +
qs +
"&" + this.callbackparameter + "=?";
return url;
};
this.embedCode = function(container, externalUrl, callback) {
var request = this.getRequestUrl(externalUrl);
$.getJSON(request, function(data) {
var oembed = data;
var code, type = data.type;
switch (type) {
case "photo":
oembed.code = $.fn.oembed.getPhotoCode(externalUrl, data);
break;
case "video":
oembed.code = $.fn.oembed.getVideoCode(externalUrl, data);
break;
case "rich":
oembed.code = $.fn.oembed.getRichCode(externalUrl, data);
break;
default:
oembed.code = $.fn.oembed.getGenericCode(externalUrl, data);
break;
}
callback(container, oembed);
});
};
}
})(jQuery);
\ No newline at end of file
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site