XamVL Image Gallery and Video Player
// ==UserScript==
// @name XamvlMedia
// @version 1.0
// @description XamVL Image Gallery and Video Player
// @namespace XamVL Media Player
// @author Deface
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js
// @resource lazyload-any https://raw.githubusercontent.com/emn178/jquery-lazyload-any/master/src/jquery.lazyload-any.js
// @resource masonry https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.3/masonry.pkgd.min.js
// @resource imagesloaded https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.min.js
// @resource play http://emn178.github.io/jquery-lazyload-any/samples/youtube/play.png
// @resource play-hover http://emn178.github.io/jquery-lazyload-any/samples/youtube/play-hover.png
// @resource iconURL https://cdn2.iconfinder.com/data/icons/ballicons-2-vol-2/100/picture-48.png
// @icon http://i.imgur.com/c6eKIFI.png
// @grant GM_getResourceText
// @grant GM_getResourceURL
// @grant unsafeWindow
// @include /^http?://xamvl\.com/.*$/
// @run-at document-end
// ==/UserScript==
this.$ = this.jQuery = jQuery.noConflict(true);
// Do not run on frames or iframes
if (window.top !== window.self) {
return;
}
// MAIN
document.addEventListener('DOMContentLoaded', function() {
ngamgai();
render('youtube');
render('webm');
});
/*
/
/
Scroll down to see the functions.
/
/
*/
// Functions --->
function ngamgai() {
var withoutLZL = (typeof $('body').attr('data-XamvlMedia') === "undefined");
var findIMG = withoutLZL? $('td[id^="td_post_"] img:not([src^="images/"]):not([src^="/images/"]):not([src^="http://xamvl.com/images/"]):not([src^="http://xamvl.com/images/"])') : $('td[id^="td_post_"] div.XamvlMedia.data-img');
var havePicture = findIMG.length ? 1 : 0;
var gallery = {
play: [],
download: []
};
var page = {
play: [],
download: []
};
if (!withoutLZL) setTimeout(function() {
nginx_lazyload();
}, 500);
findIMG.each(function() {
var img = withoutLZL ? $(this).attr('src') : $(this).attr('data-src');
var post = $(this).closest('td[id^="td_post_"]').attr('id').replace('td_post_', '');
if (withoutLZL) {
$(this).attr('title','Click vào để xem size lớn hơn').attr('alt','Loading...').attr('onload','').addClass('XamvlMedia src');
}
if (img.indexOf('attachment.php?attachmentid=') === 0) {
img = img.replace('thumb=1', 'thumb=0');
}
$(this)[0].outerHTML = '<a class="XamvlMedia onebyone" rel="group" href="' + img + '" post="' + post + '">' + $(this)[0].outerHTML + '</a>';
});
if (havePicture) {
var galleryW = 1203;
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />');
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />');
$('head').append('<style>a#XamvlMedia, a.XamvlMedia.single {color: #ffffff; cursor: pointer;} a#XamvlMedia {display:block; bottom:5px; right:5px; position: fixed; opacity:0.5; transition: opacity 0.5s;} a#XamvlMedia:hover {opacity:1;} </style>');
$('head').append('<script type="text/javascript">' + GM_getResourceText('masonry') + '</script>');
$('head').append('<script type="text/javascript">' + GM_getResourceText('imagesloaded') + '</script>');
var script;
script = '<script type="text/javascript">';
script += 'function refresh_div_gallery() {';
script += 'container = document.querySelector("#gallery");';
script += 'msnry = new Masonry(container, {columnWidth: 300, gutter: 1, itemSelector: ".XamvlMedia.item"});';
script += 'imagesLoaded(container, function() {window.postMessage("XamvlMedia;loaded","http://xamvl.com"); msnry.layout();});';
script += '};';
script += 'function download(from,to) {window.postMessage("XamvlMedia;download;"+from+";"+to+"","http://xamvl.com");};';
script += '</script>';
$('head').append(script);
$('body').append('<a id="XamvlMedia" accesskey="a" title="Phím tắt:\n Chrome: Alt+A \n Firefox: Alt+Shift+A"><img src="' + GM_getResourceURL('iconURL') + '" /></a>');
// click vào ảnh trên trang --->
$('a.XamvlMedia.onebyone').fancybox({
'type': 'image',
afterLoad: function() {
this.title = '(Ảnh ' + (this.index + 1) + '/' + this.group.length + ') ';
this.title += '<a class="XamvlMedia single" href="#" post="' + $(this.element).attr('post') + '"> Đến bài viết.</a> ';
$('body').on('click', 'a.XamvlMedia.single', function() {
var post = $(this).attr('post');
$.fancybox.close();
$('html,body').animate({
scrollTop: $('table#post' + post).offset().top
});
});
},
padding: 0,
helpers: {
title: {
type: 'outside'
},
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.9)'
}
}
}
});
// <--- click vào ảnh trên trang
// Xem ảnh nhanh --->
$('body').on('click', 'a#XamvlMedia', function() {
var div_gallery = '<div id="gallery" style="min-width:' + galleryW + 'px; background:#201F25"></div>';
var loading;
$.fancybox($(div_gallery), {
padding: 0,
ooverlay: {
css: {
'type': 'html',
'background': 'rgba(0, 0, 0, 0.9)'
}
},
helpers: {
title: {
type: 'outside'
},
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.9)'
}
}
},
beforeShow: function() {
$('.fancybox-inner').css('background', '#201F25');
},
afterShow: function() {
loading = 0;
update_gallery($('body'), 'append');
this.title = 'test';
// cuộn để lấy thêm ảnh --->
page.play = {
nav: $('div.pagenav')
};
if (page.play.nav.length) {
page.play.back = page.play.next = Number(page.play.nav.find('strong:not(:contains("«")):not(:contains("»"))').html());
page.play.url = page.play.nav.find('a:first').attr('href') + '&page=';
$('.fancybox-inner').on('scroll', function() {
if (loading === 0) {
// scroll up
if ($(this).scrollTop() === 0) {
if (1) {
loadMore(page.play.url + (page.play.next + 1), 'prepend');
page.play.next++;
}
}
// scroll down
if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
if (page.play.back > 0) {
loadMore(page.play.url + (page.play.back - 1), 'append');
page.play.back--;
}
}
}
});
}
// <--- cuộn để lấy thêm ảnh
},
afterClose: function() {
gallery.play = [];
loading = 0;
$.fancybox.hideLoading();
}
});
// click vào ảnh trong gallery --->
$('body').on('click', 'a.XamvlMedia.gallery', function() {
var post = $(this).attr('post');
var src = $(this).find('img').attr('src');
var inCurrentPage = withoutLZL ? $('a.XamvlMedia.onebyone img').filter('[src="' + src + '"]') : $('div.XamvlMedia.data-img').filter('[data-src="' + src + '"]');
if (inCurrentPage.length) {
inCurrentPage.parent().click();
} else {
$.fancybox(src, {
'type': 'image',
afterLoad: function() {
this.title += '<a class="XamvlMedia single" href="http://xamvl.com/showpost.php?p=' + post + '"> Đến bài viết.</a> ';
},
padding: 0,
helpers: {
title: {
type: 'outside'
},
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.9)'
}
}
}
});
}
});
// <--- click vào ảnh trong gallery
});
// <--- xem ảnh nhanh
}
window.addEventListener('message', waitLoading, false);
function update_gallery(html, type) {
var ignoreList = [
'http://togif.com/wp-content/uploads/2012/04/doggy.gif'
];
var newContent = '';
var store = (type === 'download') ? 'download' : 'play';
html.find(withoutLZL? 'td[id^="td_post_"] img:not([src^="images/"]):not([src^="/images/"]):not([src^="http://xamvl.com/images/"]):not([src^="http://xamvl.com/images/"])' : 'td[id^="td_post_"] div.XamvlMedia.data-img').each(function() {
var img = withoutLZL ? $(this).attr('src') : $(this).attr('data-src');
var post = $(this).closest('td[id^="td_post_"]').attr('id').replace('td_post_', '');
if (img.indexOf('attachment.php?attachmentid=') === 0) {
img = img.replace('thumb=1', '');
}
if (gallery[store].indexOf(img) === -1 && ignoreList.indexOf(img) === -1) {
gallery[store][gallery[store].length] = img;
newContent = '<div class="XamvlMedia item">' + '<a class="XamvlMedia gallery" href="#" post="' + post + '">' + '<img src="' + img + '" style="width:300px; height:auto; max-width:300px; max-height:1000px;"/></a></div>' + newContent;
}
});
if (type !== 'download') {
if (type === 'prepend') {
$('#gallery').prepend(newContent);
} else {
$('#gallery').append(newContent);
}
$.fancybox.showLoading();
loading = 1;
unsafeWindow.refresh_div_gallery();
}
}
function loadMore(url, type) {
$.fancybox.showLoading();
$.ajax({
type: 'GET',
async: type !== 'download',
url: url,
success: function(html) {
update_gallery($(html), type);
}
});
}
function waitLoading(event) {
var data = [];
data = event.data.split(';');
if (data[0] === 'XamvlMedia') {
if (data[1] === 'loaded') {
loading = 0;
$.fancybox.hideLoading();
} else if (data[1] === 'download') {
download(data[2], data[3]);
}
}
}
function download(from, to) {
page.download = {
nav: $('div.pagenav:first'),
url: window.location.href
};
page.download.url = (page.download.nav.length) ? page.download.nav.find('a:first').attr('href') + '&page=' : page.download.url;
$('html').html('<div class="XamvlMedia download"><h2>Đang tạo link ảnh...</h2><img src="https://1.bp.blogspot.com/-hdHnzbTmU-4/U7l9JZVybkI/AAAAAAAAAuM/u5c9SgVF730/s1600/4.png"></div>');
for (i = from; i <= to; i++) {
console.log('Getting page: ' + i + '/' + to);
loadMore(page.download.url + i, 'download');
}
var download_link = '';
for (i = 0; i < gallery.download.length; i++) {
download_link += '<li><a target="_blank" href="' + gallery.download[i] + '">' + gallery.download[i] + '</a></li>';
}
setTimeout(function() {
$('html').html('<div class="XamvlMedia download"><h2>Xong! Dùng IDM hoặc app tương tự để down.<br>Tổng cộng: ' + gallery.download.length + ' ảnh</h2><ul>' + download_link + '</ul></div>');
}, 2000);
}
}
function render(what) {
var data = {
'youtube': {
'selector': 'a[href*="youtube.com"], a[href*="youtu.be"]',
'tpl': '<div class="XamvlMedia youtube" style="width:560px; height:315px; margin:5px auto; text-align:center; position:relative;">' +
'<div class="lazyload-thumbnail"><!--<div style="with:100%; height:100%; background-image:url(http://img.youtube.com/vi/{yid}/0.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position:center;"></div><span class="play"></span>--></div>' +
'<!--<div class="XamvlMedia youtube" style="margin:5px; text-align:center; position:relative;"><iframe width="560" height="315" src="https://www.youtube.com/embed/{yid}?autoplay=1" frameborder="0" allowfullscreen></iframe></div>-->' +
'</div><center>{yurl}</center>',
'out': function(str, url) {
url = url.replace(/&.*$/, '');
var yid = url.replace(/^.+((watch\?v=)|(youtu.be\/))/i, '');
var isIgnored = (/(\.com|\.be|\/|testtube|html5)+$/i).test(url);
var embed = str.replace('{yid}', yid).replace('{yid}', yid);
url = '<a href="' + url + '" target="blank">' + url + '</a>';
embed = embed.replace('{yurl}', url);
return isIgnored ? url : embed;
},
'afterOut': function() {
function load(img) {
img.fadeOut(0, function() {
img.fadeIn(1000);
});
}
eval(GM_getResourceText('lazyload-any'));
$('.lazyload-thumbnail').lazyload({
load: load
});
$('.XamvlMedia.youtube').lazyload({
trigger: 'click'
});
$('head').append('<style>.XamvlMedia .play {position: absolute; width: 64px; height: 64px; top: 50%; left: 50%; margin: -32px 0 0 -32px; ' +
'background-image: url(' + GM_getResourceURL('play') + '); -moz-opacity: 0.70; opacity: 0.70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);}' +
'.XamvlMedia.youtube:hover .play {background-image: url(' + GM_getResourceURL('play-hover') + '); -moz-opacity: 1; opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);}' +
'</style>');
}
},
'webm': {
'selector': 'a[href*=".webm"]',
'tpl': '<div class="XamvlMedia html5"><div style="cursor:default; font-weight:bold; font-size:25px; color:#2c3e50; margin:5px;">web<div style="display:inline; color:#2980b9;">▶</div>m<div style="display:inline-block; color:#7f8c8d; font-size:10px; margin-left:5px;">hover <br>to play</div></div><!--<video style="display:block; max-width:900px; max-height:600px; margin:5px auto;" src="{url}" controls></video><center><a href="{url}" target="blank">{url}</a></center>--></div>',
'out': function(str, url) {
return str.replace(/{url}/g, url);
},
'afterOut': function() {
eval(GM_getResourceText('lazyload-any'));
$('.XamvlMedia.html5').lazyload({
trigger: 'mouseenter'
});
}
}
};
function rr(url) {
url = unescape(url);
var redirect = /[?=]http/i;
if (redirect.test(url)) {
url = url.replace(/^.+[?=]http/i, 'http');
}
return url;
}
$(data[what].selector).each(function(i) {
var url = rr($(this).attr('href'));
$(this)[0].outerHTML = data[what].out(data[what].tpl, url);
});
if (Object.keys(data[what]).indexOf('afterOut') !== -1) data[what].afterOut();
}
function nginx_lazyload() {
eval(GM_getResourceText('lazyload-any'));
$('.XamvlMedia.lzWrapper').lazyload({
threshold: 0,
load: function(img) {
img.css("opacity",0).animate({opacity:1},500);
}
});
}
// END MAIN