Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

image reziser in topic and fast div pop up

edited March 2007 in Vanilla 1.0 Help
acording to this topic

i'm looking for a great auto resizer image extention
witch can rezise all the to big picture posted on a topic
and ad to them a link for a fast pop up

the best exemple I can show is this one

if you click on the pic you have a div pop up

for now the best speed scrip I found is this one :

<script type="text/javascript"> var maxWidth = 580; function scaleImage(im) { if (typeof im.naturalWidth == 'undefined') im.naturalWidth = im.width; if (im.naturalWidth > maxWidth) { im.width = maxWidth; = im.naturalWidth + 'px'; im.className = 'resized'; im.title = 'Taille originale'; im.onclick = unscaleImage; } } function unscaleImage() { if (this.width == maxWidth) { this.width = this.naturalWidth; = '0px'; this.title = 'Taille réduite'; } else { this.width = maxWidth; = '2px'; this.title = 'Taille originale'; } } </script>

and in the pic tag :

<img src=" URL " border="0" onload="scaleImage(this);" alt=""/>

the probleme here is that this is not an extention
and the other big true probleme is that the .js didn't detect atomaticaly the picture
then the script must be change with a read regex on all pic and then add onload="scaleImage(this);"

IF = true { thanks } else {thanks}


  • edited March 2007
    here is a javascript who parse all the mp3 link (may be use full)

    if(typeof(btp) == 'undefined') btp = {}
    btp.Mp3 = {
    playimg: null,
    player: null,
    go: function() {
    var all = document.getElementsByTagName('a')
    for (var i = 0, o; o = all[i]; i++) {
    if(o.href.match(/\.mp3$/i)) {
    var img = document.createElement('img')
    img.src = ''; img.title = 'Play'
    img.height = 56
    img.width = 283 = '0.2em' = 'pointer' = 'middle' = '0'
    img.onclick = btp.Mp3.makeToggle(img, o.href)
    o.parentNode.insertBefore(img, o)
    toggle: function(img, url) {
    if (btp.Mp3.playimg == img) btp.Mp3.destroy()
    else {
    if (btp.Mp3.playimg) btp.Mp3.destroy()
    var a = img.nextSibling, c=''
    if (document.defaultView && document.defaultView.getComputedStyle) c = document.defaultView.getComputedStyle(a,null).getPropertyValue('color')
    else if (a.currentStyle) c = a.currentStyle['color']
    c = c.replace(/^rgb|[ ()]/g, '')
    var hex = c.match(/^#?([a-f0-9]{6})$/), hexSm = c.match(/^#?([a-f0-9]{3})$/), rgb = c.match(/^([0-9]+),([0-9]+),([0-9]+)$/)
    if (rgb) { var c16 = "0123456789abcdef", c=''; for(var i=1,d;d=rgb[i];i++) { var j=d%16; c=c+c16.charAt((d-j)/16)+c16.charAt(j) } }
    else if (hex) c = hex[1]
    else if (hexSm) c = hexSm[1].charAt(0) + hexSm[1].charAt(0) + hexSm[1].charAt(1) + hexSm[1].charAt(1) + hexSm[1].charAt(2) + hexSm[1].charAt(2)
    else c = "000000"
    img.src = ''; img.title = 'Stop'; btp.Mp3.playimg = img;
    btp.Mp3.player = document.createElement('span')
    btp.Mp3.player.innerHTML = '' +
    '' +
    '' +
    '' +
    '' +
    img.parentNode.appendChild(btp.Mp3.player, img.nextSibling)
    destroy: function() {
    btp.Mp3.playimg.src = ''; btp.Mp3.playimg = null
    btp.Mp3.player.removeChild(btp.Mp3.player.firstChild); btp.Mp3.player.parentNode.removeChild(btp.Mp3.player); btp.Mp3.player = null
    makeToggle: function(img, url) { return function(){ btp.Mp3.toggle(img, url) }}

    btp.addLoadEvent = function(f) { var old = window.onload
    if (typeof old != 'function') window.onload = f
    else { window.onload = function() { old(); f() }}


  • oups here the super bad cool thing is that the betterbcccode block the onload function grrrrrrrrrr !
  • Here is a great example of an image resizer which, as I understand your needs, should be ideal.

    I use it extensively on my forum.

    Posted: Wednesday, 7 March 2007 at 7:37AM (AEDT)

  • excelent wanderer it's exactely what i'm looking for but I don't understand how to include the .js to the vanilla script do I have to include a javscript in comment.php page to detect all the to big image and parse them and them ad to them a onload"this" in the <img> ? and how to ?
  • This may not be the best way to do it but...

    In themes/head.php add this, just before </head> around line 46...
    echo $HeadString . '<script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script>

    rounded.js is the border style I chose, you may have a different preference, indeed you may wish to include all the styles.

    I also think there may be an extension that allows you to add links to js files automatically but I prefer this hard-coded method.
    You should also make a note of this in case we need to upgrade to Vanilla 1.1.2 soon. pic

    Posted: Wednesday, 7 March 2007 at 8:52AM (AEDT)

  • yes pbear (i will next time) wanderer, I just try your method But it's not exactly the script I need I guess Tell me if I'm wrong But I need a script who detect automaticaly the large picture then I don't have to insert special tag when I had the image like <img src"" onload="this" > And then resize the large picture and ad them a <div> pop up your script do that ?
  • Highslide does not do that, no.
  • edited March 2007
    Image Hosted by

    Image Hosted by
This discussion has been closed.