replacing Servimg with Photobucket or Imageshack for image uploads

I have seen a few forums where the image upload was changed to imageshack or another image hosting service, Is there any code or script for me to do this to my forum? I'm running PunnBB on my Server

Hi BlackScorpion,

I have written up a quick draft, you can find it below.

Modules > Javascript codes management > create a new script

Title : Your choice
Placement : In the topics, or in all pages
Paste the code below and save :

Code:

$(window).load(function() {
    var settings = {
        image : 'http://i56.servimg.com/u/f56/18/21/60/73/icon10.png', // button image
        upload : 'http://photobucket.com/upload', // iframe upload url
        height : '250px', // iframe height
        width : '500px' // iframe width
    };
    
    $('.sceditor-button-servimg').after('<a class="sceditor-button sceditor-button-pb"><div style="background-image:url(' + settings.image + ')"></div></a>');
    $('body').append('<div id="pb_container" class="sceditor-dropdown" style="display:none;"></div>');
    
    $('.sceditor-button-pb').click(function() {
        var X = $('.sceditor-button-pb').offset().left;
        var Y = $('.sceditor-button-pb').offset().top + 25;
        
        if (!document.getElementById('pb_frame') && $('#pb_container').css('display') == 'none') $('#pb_container').show().css('left',X + 'px').css('top',Y + 'px').append('<iframe id="pb_frame" style="border:none;height:' + settings.height + ';width:' + settings.width + ';" src="' + settings.upload + '"></iframe>');
        else if ($('#pb_container').css('display') == 'none') $('#pb_container').show().css('left',X + 'px').css('top',Y + 'px');
        else $('#pb_container').hide();
    });
    
    $('.sceditor-button:not(.sceditor-button-pb), .sceditor-container textarea, .sceditor-container iframe').click(function() { $('#pb_container').hide() });
    $('.sceditor-container iframe').contents().mousedown(function() { $('#pb_container').hide() });
    $('.sceditor-button-source').click(function() { $('.sceditor-button-pb').removeClass('disabled') });
});

There are some settings at the top which let you customize it :

Code:

   var settings = {
        image : 'http://i56.servimg.com/u/f56/18/21/60/73/icon10.png', // button image
        upload : 'http://photobucket.com/upload', // iframe upload url
        height : '250px', // iframe height
        width : '500px' // iframe width
    };

They're marked with comments so they should be self explanatory, just make sure that your content is always between the single quotes to prevent bugs.

Ooh if you want to hide the old upload button, just add this to your Stylesheet :

Code:

.sceditor-button-servimg { display:none !important; }

Thank you Ange, as always, you saved me again.   

Solved.