[javascript] Mejor "image resizer" que el de foroactivo
Tema iniciado por y Añadir a favoritosResuelto

17/04/2014

[codebox]

[javascript] Mejor "image resizer" que el de foroactivo A66dSMI

[/codebox]

[hidecode]

Código:: (function () { window.fa_img_resizer = { max_width: 400, // maximum image width (400px) max_height: 250, // maximum image height (250px) selector: '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img', // where images should be resized options: { bar: true, // resized image options bar toggler: true, // Enlarge / Reduce Image full_size: true, // Show full size download: true, // Download image link lightbox: true // lightbox effect }, // texts lang: { full_size: '<i class="fa fa-external-link"></i> Mostrar en tamaño real', enlarge: '<i class="fa fa-search-plus"></i> Agrandar imagen', reduce: '<i class="fa fa-search-minus"></i> Reducir imagen', download: '<i class="fa fa-download"></i> Descargar imagen', tooltip: 'Click to view full image' }, // resize all images inside the "resizeIn" elements resize: function () { for (var a = $(fa_img_resizer.selector), i = 0, j = a.length; i < j; i++) { if (!a[i].alt && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) { a[i].className += ' fa_img_reduced'; // make the image a "link" if it's not wrapper with one if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') { a[i].style.cursor = 'pointer'; a[i].title = fa_img_resizer.lang.tooltip; a[i].onclick = function () { fa_img_resizer.lightbox(this); }; } // create the resize bar if (fa_img_resizer.options.bar) { (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin', '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">' + (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '') + (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '') + (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '') + '</div>' ); } } } }, // toggle between enlarged and reduced image sizes toggle: function (that) { var img = that.parentNode.nextSibling; if (img.tagName == 'A') { img = img.getElementsByTagName('IMG')[0]; } if (/fa_img_reduced/.test(img.className)) { that.innerHTML = fa_img_resizer.lang.reduce; that.className = 'fa_img_reduce'; img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged'); } else { that.innerHTML = fa_img_resizer.lang.enlarge; that.className = 'fa_img_enlarge'; img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced'); } that.parentNode.style.width = img.width - 8 + 'px'; }, // lightbox effect lightbox: function (that) { var frag = document.createDocumentFragment(), overlay = $('<div id="fa_img_lb_overlay" />')[0], img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0]; overlay.onclick = fa_img_resizer.kill_lightbox; img.onclick = fa_img_resizer.kill_lightbox; frag.appendChild(overlay); frag.appendChild(img); document.body.appendChild(frag); document.body.style.overflow = 'hidden'; img.style.marginTop = '-' + (img.height / 2) + 'px'; img.style.marginLeft = '-' + (img.width / 2) + 'px'; }, // kill the lightbox kill_lightbox: function () { var overlay = document.getElementById('fa_img_lb_overlay'), img = document.getElementById('fa_img_lb_image'); overlay && document.body.removeChild(overlay); img && document.body.removeChild(img); document.body.style.overflow = ''; } }; // write styles into the document head document.write( '<style type="text/css">' + fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }' + '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }' + '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }' + '.fa_img_resizer a { margin:0 3px; }' + '.fa_img_resizer i { font-size:14px; vertical-align:middle; }' + '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }' + '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }' + '</style>' + (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome ); // begin modifying images when the page is loaded $(window).load(fa_img_resizer.resize); // kill forumactif's image resizer if (window.resize_images) { window.resize_images = function () { return false; }; } }());

[/hidecode]