Staff en línea
Últimos temas
[javascript] añade un boton en el editor para buscar gif animados de giphy Origin10[html]Menú de enlaces simple
por Lelu Jue Nov 28, 2019 6:30 am

[javascript] añade un boton en el editor para buscar gif animados de giphy Origin10[html]Menú dinámico
por Lelu Jue Nov 28, 2019 6:11 am

[javascript] añade un boton en el editor para buscar gif animados de giphy Origin10[html]Escaparate de imágenes sencillo
por Lelu Jue Nov 28, 2019 6:02 am

[javascript] añade un boton en el editor para buscar gif animados de giphy Origin10[Duda] ModernBB vale la pena?
por mrsrz Miér Nov 27, 2019 9:57 am

[javascript] añade un boton en el editor para buscar gif animados de giphy Origin10[Ocio] Contemos hasta el 5000
por Fibo Miér Nov 27, 2019 9:19 am

Página 1 de 2. 1, 2  Siguiente

[javascript] añade un boton en el editor para buscar gif animados de giphy
Tema iniciado por y Añadir a favoritos

staff


Última edición por Chalo el Vie Ago 26, 2016 9:29 am, editado 1 vez
[codebox]Con este code puedes añadir un botón en el editor para buscar e insertar gif de giphy, como en el chat de facebook
[javascript] añade un boton en el editor para buscar gif animados de giphy WesLjgYh
[/codebox]

[hidecode]
Código:

        (function() {
          // return if gifactif has been initialized
          if (window.gifactif) {
            if (window.console && console.warn) {
              console.warn('gifactif has already been initialized');
            }
            return;
          }
       
       
          // setup global object
          window.gifactif = {
            key : 'API_KEY', // authorization
            limit : 26, // max image results
            delay : 200, // delay before searches commence (200ms)
            auto_close : true,
       
            // general language settings
            lang : {
              searching : 'Buscando...',
              not_found : 'No se encontraron resultados.. <img src="https://illiweb.com/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
            },
       
            // dropdown markup
            dropDown : $(
              '<div>'+
                '<input type="text" id="gifactif_search" placeholder="Search for a GIF..." style="width:90%;"/>'+
                '<div id="gifactif_results" onscroll="gifactif.scrolling(this);"><div id="gifactif_images"></div></div>'+
                '<div id="giphy_attribution_mark"></div>'+
              '</div>'
            )[0],
       
       
            // initial setup of the SCEditor command
            init : function () {
              if ($.sceditor && window.toolbar) {
       
                // set the gifactif command
                $.sceditor.command.set('gifactif', {
       
                  tooltip : 'Buscar un Gif',
       
                  // Dropdown and general functionality for gifactif
                  dropDown : function (editor, caller, callback) {
                    gifactif.reset();
                    gifactif.editor = editor;
                    gifactif.callback = callback;
                    editor.createDropDown(caller, 'gifactif', gifactif.dropDown);
       
                    $('#gifactif_search', gifactif.dropDown)[0].focus(); // focus the search area
                  },
       
       
                  // WYSIWYG MODE
                  exec : function(caller) {
                    var editor = this;
       
                    $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
                      editor.insert('[img]' + gif + '[/img]');
                    });
                  },
       
       
                  // SOURCE MODE
                  txtExec : function(caller) {
                    var editor = this;
       
                    $.sceditor.command.get('gifactif').dropDown(editor, caller, function(gif) {
                      editor.insertText('[img]' + gif + '[/img]');
                    });
                  }
       
                });
       
       
                // add gifactif to the editor toolbar
                toolbar = toolbar.replace('image,', 'image,gifactif,');
       
                // add CSS for button image and dropdown
                $('head').append(
                  '<style type="text/css">'+
                    '.sceditor-button-gifactif div { background-image:url(https://i.servimg.com/u/f35/18/21/60/73/giphy10.png) !important; }'+
                    '.sceditor-button-gifactif:after, .sceditor-button-gifactif:before { content:""; }'+ // Forumactif Edge override
                    '#gifactif_results { width:300px; margin:10px auto; min-height:30px; max-height:300px; overflow-x:hidden; overflow-y:auto; }'+
                    '.gifactif_imagelist { line-height:0; column-count:2; column-gap:3px; }'+
                    '.gifactif_imagelist img { margin-bottom:3px; cursor:pointer; width:100%; }'+
                    'html #giphy_attribution_mark { background:url(https://i.servimg.com/u/f35/18/21/60/73/powere11.png) no-repeat 50% 50% transparent !important; height:22px !important; width:100%; !important; min-width:200px !important; display:block !important; visibility:visible !important; opacity:1 !important; }'+
                  '</style>'
                );
              }
       
            },
       
       
            // search for a GIPHY gif
            search : function (query) {
              if (gifactif.timeout) {
                gifactif.abort(); // abort ongoing searches and requests
              }
       
              if (query) {
       
                // set a small timeout in case the user is still typing
                gifactif.timeout = window.setTimeout(function() {
                  gifactif.reset(true, gifactif.lang.searching);
                  gifactif.query = encodeURIComponent(query);
       
                  gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
                    // update global data such as page offsets for scrolling
                    gifactif.request = null;
                    gifactif.offset = data.pagination.offset + gifactif.limit;
                    gifactif.offset_total = data.pagination.total_count;
       
                    gifactif.reset(true); // reset HTML content
                    gifactif.addGIF(data); // send data to be parsed
                  });
       
                }, gifactif.delay);
       
              } else {
                gifactif.reset(true);
              }
            },
       
       
            // abort ongoing searches and requests
            abort : function () {
              if (gifactif.timeout) {
                window.clearInterval(gifactif.timeout);
                gifactif.timeout = null;
              }
       
              if (gifactif.request) {
                gifactif.request.abort();
                gifactif.request = null;
              }
            },
       
       
            // add gifs to the result list
            addGIF : function (data, loadMore) {
              // setup data and begin parsing results
              var gif = data.data,
                  i = 0,
                  j = gif.length,
                  list = $('<div class="gifactif_imagelist" />')[0];
       
              if (j) {
                for (; i < j; i++) {
                  list.appendChild($('<img id="' + gif[i].id + '" src="' + gif[i].images.fixed_width.url + '" />').click(gifactif.insert)[0]);
                }
              } else if (!loadMore) {
                gifactif.reset(true, gifactif.lang.not_found);
              }
       
              // add results to the result list
              $('#gifactif_results', gifactif.dropDown).append(list);
            },
       
       
            // listen to the scrolling so we can add more gifs when the user reaches the bottom
            scrolling : function (that) {
              if (that.scrollHeight - that.scrollTop === that.clientHeight) {
                gifactif.loadMore();
              }
            },
       
       
            // load more results once the user has scrolled through the last results
            loadMore : function () {
              if (gifactif.offset < gifactif.offset_total) {
                gifactif.request = $.get('http://api.giphy.com/v1/gifs/search?q=' + gifactif.query + '&offset=' + gifactif.offset + '&limit=' + gifactif.limit + '&rating=pg-13&api_key=' + gifactif.key, function(data) {
                  gifactif.request = null;
                  gifactif.offset = data.pagination.offset + gifactif.limit;
                  gifactif.offset_total = data.pagination.total_count;
       
                  gifactif.addGIF(data, true); // send data to be parsed
                });
              }
            },
       
       
            // inserts the gif into the editor
            insert : function () {
              // add the gif to the editor and close the dropdown
              gifactif.callback('http://media0.giphy.com/media/' + this.id + '/giphy.gif');
       
              if (gifactif.auto_close) {
                gifactif.editor.closeDropDown(true);
                gifactif.reset();
              }
            },
       
       
            // reset the dropdown fields
            reset : function (resultsOnly, newContent) {
              $('#gifactif_results', gifactif.dropDown).html(newContent ? newContent : '');
       
              if (!resultsOnly) {
                $('#gifactif_search', gifactif.dropDown).val('');
              }
            }
          };
       
       
          // bind keyup event to search input
          $('#gifactif_search', gifactif.dropDown)[0].onkeyup = function(e) {
            var k = e.keyCode;
       
            // ignore specific key inputs to prevent unnecessary requests
            if (k && (k == 16 || k == 17 || k == 18 || k == 20 || k == 37 || k == 38 || k == 39 || k == 40)) {
              return;
            } else {
              gifactif.search(this.value);
            }
          };
       
          // initilize gifactif
          $(gifactif.init);
        }());


Posibles modificaciones

1. Limite:
La variable de limit determina la cantidad máxima de GIF que se cargan en los resultados de búsqueda a la vez. De forma predeterminada, 26 GIF se cargan en los resultados cuando busca o se desplaza hasta el final de los resultados. Incremente o disminuya este valor para mostrar más o menos resultados a la vez.

2. Delay:
La variable delay define un pequeño retraso antes de que los resultados de la búsqueda se envíen a Giphy. Esto ayuda a reducir la frecuencia de las solicitudes mientras todavía está escribiendo. Por defecto, el retraso es de 200 ms, si desea que sea más largo o más corto, simplemente modifique el valor de esta variable.

3. Autocerrado
La variable auto_close le permite elegir si el menú desplegable de búsqueda Giphy se cierra una vez que elige una imagen. Por defecto, el menú desplegable se cierra cuando elige un GIF. Si desea que el menú desplegable permanezca abierto después de elegir un GIF, simplemente cambie el valor de esta opción a falso.

4. Idioma
Si desea cambiar el idioma general de este complemento, simplemente busque y edite el objeto lang y el elemento dropDown:
El objeto lang contiene los textos básicos, mientras que dropDown se refiere a la estructura de búsqueda desplegable.

5. API key
La variable key es para la clave API proporcionada por Giphy a todos: es necesaria para enviar búsquedas de la gran maravilla que ofrece Giphy. No debería necesitar editar esta variable.

Para una correcta instalación debes obtener una API key de Giphy, Mira este tutorial para mayor información.
[/hidecode]

Codigo actualizado y optimizado por @Fibo el 01/11/2019
Chalo
Chalo

¿Que estoy pensando? :

saquen el wato..... [table class=fecha_up][td]Se modifico:8/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/374/37476.png


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7036


Puntos :

9158


Me gusta :

1053


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Oh genial, con lo que me encanta esa pagina y sus Gifs xDD
Muchas gracias por el code

+REP
YoshiGM
YoshiGM

¿Que estoy pensando? :

Renovando YFC [table class=fecha_up][td]Se modifico:16/11/19 - 11:07 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 :

1267


Puntos :

1688


Me gusta :

251


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


https://www.yoshifansclub.net/forum

Volver arriba Ir abajo

muy bueno chalo gracias
Roger
Roger

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Muy interesante, lo probaré.
Daria
Daria

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Chalo es normal que no se pueda ver el código después de haber comentado, me muero de ganas por tener esta herramienta.
Daria
Daria

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

staff
Asi es @Daria cada ves que entres al post deberás comentar para quitar el bloqueo...
Dosh
Dosh

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1698


Puntos :

2458


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

Yo tambien lo quiero
Roger
Roger

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Dosh gracias por la sugerencia, intentaré de nuevo.
Daria
Daria

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

@Dosh definitivamente era eso, gracias por la recomendación [javascript] añade un boton en el editor para buscar gif animados de giphy 953422333
Daria
Daria

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

34


Me gusta :

8


ingreso :

31/08/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Vere que tal gracias por el aporte
kuke
kuke

¿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 :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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