Staff en línea

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

staff
[codebox]

[/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]
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6715


Puntos :

8782


Me gusta :

1010


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Gracias por compartirlo con todos :3
YoshiGM
avatar

¿Que estoy pensando? :

Aquí Sigo .w. [table class=fecha_up][td]Se modifico:12/07/18 - 17:29 hrs. [/td][/table]


Banner en temas :

https://i.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

1129


Puntos :

1503


Me gusta :

214


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://www.yoshifansclub.net

Volver arriba Ir abajo

Lo probare porque ocupo muchas imagenes gracias
kuke
avatar

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

206


Me gusta :

38


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Espero que ayude a los demás
porque me ayudó bastante.
muykay
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

67


Puntos :

69


Me gusta :

2


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

me interesa gracias amigo
tecnomaster
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

69


Puntos :

77


Me gusta :

4


ingreso :

08/05/2016


Sexo :

Masculino

Plataforma :

punbb


Navegador :

firefox


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.