image reziser in topic and fast div pop up

laurent107

acording to this topic
http://lussumo.com/community/discussion/673/possible-to-automatically-resize-post-images/#Comment_60749

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
http://spirale.aneantis.com/message-javascript_image_resiser-198518.html

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.style.maxWidth = im.naturalWidth + 'px'; im.className = 'resized'; im.title = 'Taille originale'; im.onclick = unscaleImage; } } function unscaleImage() { if (this.width == maxWidth) { this.width = this.naturalWidth; this.style.borderWidth = '0px'; this.title = 'Taille réduite'; } else { this.width = maxWidth; this.style.borderWidth = '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}

laurent107

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 = 'http://laurent.gandhi.free.fr/theplay.gif'; img.title = 'Play'
img.height = 56
img.width = 283
img.style.marginRight = '0.2em'
img.style.cursor = 'pointer'
img.style.verticalAlign = 'middle'
img.style.border = '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 = 'http://laurent.gandhi.free.fr/thestop.gif'; 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 = 'http://laurent.gandhi.free.fr/theplay2.gif'; 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() }}
}

btp.addLoadEvent(btp.Mp3.go)



laurent107

oups here the super bad cool thing is that the betterbcccode block the onload function grrrrrrrrrr !

Wanderer

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)

laurent107

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 ?

Wanderer

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="http://path.to./highslide.js"></script> <script type="text/javascript" src="http://path.to./rounded.js"></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.

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

laurent107

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 ?

Stash

Highslide does not do that, no.

laurent107