Widget:CGGallery

.smallcg:hover { cursor: pointer; }

.smallcg .smallcgname { position: relative; width: 100%; height: 30px; line-height: 30px; top: -30px; display: block; text-align: center; background-color: white; color: black; font-weight: bolder; font-size: larger; }

.smallcgimg { display: block; width: 280px; height: 150px; overflow: hidden; }

.smallcgdesc, .smallcgfile, .smallcgimg a { display: none; }

modal-cg-body{height: calc(100vh - 100px); text-align: center;}
modal-cg-body img {width:100%; height: 100%; object-fit: contain;}
modal-cg .modal-footer{border:0}
modal-cg .modal-cg-mask{

background-size: cover; background-position: center; filter: blur(50px); opacity: 0.5; position: absolute; width: 100%; height: 80%; top: 0; z-index: 0; }

modal-cg-body > p{

background-position: center; background-size: contain; background-repeat: no-repeat; } @media (max-width:768px){

modal-cg-body{height: calc(50vh); text-align: center;}

} </style> <script> var g_cgdiv; //全局变量，记录当前显示CG的信息 //小图url转大图url function getCGurl(thumb_url) { return thumb_url.replace(/png\/.*/g, "png").replace("thumb/", ""); }

//获取CG信息 function getCGInfo(cgdiv, callback) { var cur_cgpath = ""; //获取点击CG的图片名称和描述 var cur_cgname = cgdiv.find('.smallcgname').text(); var cur_cgdesc = cgdiv.find('.smallcgdesc').text(); var cur_cgfile = cgdiv.find('.smallcgfile').html(); //获取点击CG的图片路径 var cur_cgimg = cgdiv.find('img'); if (cur_cgimg.length > 0) { cur_cgpath = getCGurl(cur_cgimg.prop('src')); } var info = { "cgname": cur_cgname, "cgpath": cur_cgpath, "cgthumb": cur_cgimg.prop('src'), "cgdesc": cur_cgdesc, "cgfile": cur_cgfile }; console.log(info); callback(info);

}

//设置CG大图展示区 function setCGInfo(cginfo) { var t_cgdiv = g_cgdiv.prev(".smallcg"); if (t_cgdiv.length > 0) $('#modal-cg-prev').css('display', 'inline-block'); else $('#modal-cg-prev').css('display', 'none');

t_cgdiv = g_cgdiv.next(".smallcg"); if (t_cgdiv.length > 0) $('#modal-cg-next').css('display', 'inline-block'); else $('#modal-cg-next').css('display', 'none');

$('#modal-cg-body').find('img')[0].onload = function(){ $('#modal-cg-body').find('img').css({"opacity": 1}); }

if (cginfo['cgpath'].length > 0) { $('.modal-cg-mask, #modal-cg-body > p').css("background-image", "url(" + cginfo['cgthumb'] + ")"); $('#modal-cg-body').find('img').attr({'src': cginfo['cgpath'], 'alt': cginfo['cgname'] }).css({"opacity": 0}); setTimeout(function(){}, 200) $('#modal-cg-body').find('img').css('display', 'inline-block'); $('#modal-cg-download').css('display', 'inline-block'); $('#modal-cg-hint').css('display', 'none'); } else { $('#modal-cg-body').find('img').css('display', 'none'); $('#modal-cg-download').css('display', 'none'); $('#modal-cg-hint').css('display', 'block'); } $('#modal-cg-hint').html(cginfo['cgfile']); $('#modal-cg-name').html(cginfo['cgname']);

var modalHeight = $(window).height() / 2 - $('#modal-cg .modal-dialog').height() / 2; $('#modal-cg .modal-dialog').css({ 'margin-top': modalHeight }); $('#modal-cg').modal('show');

}

function bindsmallCGbtn() { $('.smallcg').on('click', function (e) { g_cgdiv = $(this); getCGInfo(g_cgdiv, setCGInfo); }); }

(window.RLQ=window.RLQ||[]).push([ ["jquery"], function () { $(function(){ $('#modal-cg').appendTo("body");

$('.modal-content').prepend("

");

$(bindModalSwitch); $(bindsmallCGbtn); $(bindModalBtn); })() }]); //////////////////////////////////// //download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage // v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling. // v4 adds AMD/UMD, commonJS, and plain browser support // v4.1 adds url download capability via solo URL argument (same domain/CORS only) // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors // https://github.com/rndme/download (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define([], factory); } else if (typeof exports === 'object') { // Node. Does not work with strict CommonJS, but // only CommonJS-like environments that support module.exports, // like Node. module.exports = factory(); } else { // Browser globals (root is window) root.download = factory(); } }(this, function () { return function download(data, strFileName, strMimeType) { var self = window, // this script is only for browsers anyway... defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads mimeType = strMimeType || defaultMime, payload = data, url = !strFileName && !strMimeType && payload, anchor = document.createElement("a"), toString = function(a){return String(a);}, myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString), fileName = strFileName || "download", blob, reader; myBlob= myBlob.call ? myBlob.bind(self) : Blob ; if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback payload=[payload, mimeType]; mimeType=payload[0]; payload=payload[1]; } if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument fileName = url.split("/").pop().split("?")[0]; anchor.href = url; // assign href prop to temp anchor if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path: var ajax=new XMLHttpRequest(); ajax.open( "GET", url, true); ajax.responseType = 'blob'; ajax.onload= function(e){ download(e.target.response, fileName, defaultMime); }; setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return: return ajax; } // end if valid url? } // end if url? //go ahead and download dataURLs right away if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){ if(payload.length > (1024*1024*1.999) && myBlob !== toString ){ payload=dataUrlToBlob(payload); mimeType=payload.type || defaultMime; }else{ return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs: navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : saver(payload) ; // everyone else can save dataURLs un-processed } }//end if dataURL passed? blob = payload instanceof myBlob ? payload : new myBlob([payload], {type: mimeType}) ; function dataUrlToBlob(strUrl) { var parts= strUrl.split(/[:;,]/), type= parts[1], decoder= parts[2] == "base64" ? atob : decodeURIComponent, binData= decoder( parts.pop() ), mx= binData.length, i= 0, uiArr= new Uint8Array(mx); for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i); return new myBlob([uiArr], {type: type}); }