Membres connectés récemment
[PHPBB3] Taille gif animé
2 participants
Page 1 sur 1 • Partagez
- Version du forum :PHPBB3
- Templates modifiés :oui
- Navigateur :Firefox
Bonjour à tous les milouziens,
Ci-dessous un script sympa dont je ne me souviens plus de l'origine, et qui permet de mettre dans ses messages des gifs animés de la même façon que des smileys.
L'ajout du bouton permettant cela est inclus dans le script.
L'aide demandée ici concerne la taille des gifs animés.
Serait-il possible de leurs imposer une largeur et une hauteur maximale de 100px.
Merci pour votre aide.
Ci-dessous un script sympa dont je ne me souviens plus de l'origine, et qui permet de mettre dans ses messages des gifs animés de la même façon que des smileys.
L'ajout du bouton permettant cela est inclus dans le script.
- Code:
//Bouton pour gifs animés sur réponse rapide
(function() {
'GIFACTIF - GIPHY PLUGIN FOR THE FORUMACTIF SCEDITOR';
'REPOSITORY : https://github.com/SethClydesdale/gifactif';
'SEARCH API BY : https://github.com/Giphy/GiphyAPI';
// 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 : 'F6JCzxVGCsPAZ6NIAk7SzeSkAAycX8OL', // PUBLIC BETA KEY
limit : 26, // max image results
delay : 200, // delay before searches commence (200ms)
auto_close : true,
// general language settings
lang : {
searching : 'Recherche en cours...',
not_found : 'Aucun résultat trouvé.. <img src="https://2img.net/i/fa/i/smiles/icon_sad.gif" style="margin:0;vertical-align:middle;"/>'
},
// dropdown markup
dropDown : $(
'<div>'+
'<input type="text" id="gifactif_search" placeholder="GIF à rechercher..." 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 : 'Rechercher un GIF animé',
// 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://2img.net/i/fa//i/smiles/icon_biggrin.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);
}());
$(function(){$(function(){
$('.sceditor-button-gifactif').insertAfter('.sceditor-button-emoticon');
})});
L'aide demandée ici concerne la taille des gifs animés.
Serait-il possible de leurs imposer une largeur et une hauteur maximale de 100px.
Merci pour votre aide.
Hello Serge,
effectivement il est très sympa comme script.
Encore une belle œuvre de mon ami Ange Tuteur pour ton information:
https://fmdesign.forumotion.com/t994-gifactif-giphy-button-for-the-editor#20290
Alors pour l'affichage sur les messages, ce sera ce style Serge:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
Penses a cliquer sur le bouton
J'avais du temps ce matin alors..... .
Pour le bloc contenant les images trouvées, tu peux ajouter ceci:
effectivement il est très sympa comme script.
Encore une belle œuvre de mon ami Ange Tuteur pour ton information:
https://fmdesign.forumotion.com/t994-gifactif-giphy-button-for-the-editor#20290
Alors pour l'affichage sur les messages, ce sera ce style Serge:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:
- Code:
.postbody .content img[src*="giphy.com"]{max-width:100px;max-height:100px;}
Penses a cliquer sur le bouton
J'avais du temps ce matin alors..... .
Pour le bloc contenant les images trouvées, tu peux ajouter ceci:
- Code:
#gifactif_results div img{max-width:50px;max-height:50px;border-radius:100%;}
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum