Topic: Open resized images in new window

[rfirevtre]

Hi everyone
I was wondering if it's possible to make resized images open in a new window when you click on them.
I found the following script in theme.js and figured that it can probably be edited to open images in a new window on click.

Code: [Select]

// Toggles the element height and width styles of an image.
function smc_toggleImageDimensions()
{
var oImages = document.getElementsByTagName('IMG');
for (oImage in oImages)
{
// Not a resized image? Skip it.
if (oImages[oImage].className == undefined || oImages[oImage].className.indexOf('bbc_img resized') == -1)
continue;

oImages[oImage].style.cursor = 'pointer';
oImages[oImage].onclick = function() {
this.style.width = this.style.height = this.style.width == 'auto' ? null : 'auto';
};
}
}
Anyone who can help me?

[flapjack]

nope. you should search a place from where this code is being called. there you will be able to do what you want.

[Arantor]

That code is solely for attachments being resized, not for the code you're thinking of.

Looking at that, I'd say SMF 2.0?

[rfirevtre]

Yeah, I'm running SMF 2.0 RC3. Not sure where to find the code though

[Arantor]

It's in Sources/Subs-Post.php.

All you need to do is modify the bbcode generated which includes the new size.

Code: (find) [Select]

$replaces[$matches[0][$match]] = '[img' . (!empty($desired_width) ? ' width=' . $desired_width : '') . (!empty($desired_height) ? ' height=' . $desired_height : '') . ']' . $matches[4][$match] . '[/img]';

Code: (replace) [Select]

$replaces[$matches[0][$match]] = '[url=' . $matches[4][$match] . '][img' . (!empty($desired_width) ? ' width=' . $desired_width : '') . (!empty($desired_height) ? ' height=' . $desired_height : '') . ']' . $matches[4][$match] . '[/img][/url]';
This wraps the code inside a the URL bbcode to force it to open in a new window. Will only apply on newly posted images though.

[Yağız...]

Or if you want a popup, find this in ./Themes/default/scripts/theme.js:

Code: [Select]

this.style.width = this.style.height = this.style.width == 'auto' ? null : 'auto';Replace with:

Code: [Select]

window.open(this.src, 'image', 'menubar=0,resizable=1,width=' + this.style.width + ',height=' + this.style.height + '');

[Arantor]

Um... Yagiz, that's referring again to the attachments, not to images that are just resized in a post body.

[Yağız...]

Um... Yagiz, that's referring again to the attachments, not to images that are just resized in a post body.

Sure? I tried on my local, and it worked
 

[Arantor]

Looks like the code in the attachments handler to me, unless you've found something else in the code... (or using a non standard theme)

[Yağız...]

Looks like the code in the attachments handler to me, unless you've found something else in the code... (or using a non standard theme)

Using Curve on a fresh install

[Arantor]

Hrm. If it works, great. I just didn't remember seeing that in the code, but I tend to avoid the JS (there's enough in the other thousands upon thousands of lines to remember )

[Yağız...]

Hrm. If it works, great. I just didn't remember seeing that in the code, but I tend to avoid the JS (there's enough in the other thousands upon thousands of lines to remember )

Changelog says that they have added this on January:

+ Allow toggling of full size versions of resized images. (theme.js)

[Arantor]

That'd be why; I've not had to go back through the code (nor turned it on in a forum) since before the new year came in... so I'd never have noticed it...

[rfirevtre]

I did like Yağız suggested and it worked just like I wanted
Thanks for the quick response

[Ashelia]

It's in Sources/Subs-Post.php.

All you need to do is modify the bbcode generated which includes the new size.

Code: (find) [Select]

$replaces[$matches[0][$match]] = '[img' . (!empty($desired_width) ? ' width=' . $desired_width : '') . (!empty($desired_height) ? ' height=' . $desired_height : '') . ']' . $matches[4][$match] . '[/img]';

Code: (replace) [Select]

$replaces[$matches[0][$match]] = '[url=' . $matches[4][$match] . '][img' . (!empty($desired_width) ? ' width=' . $desired_width : '') . (!empty($desired_height) ? ' height=' . $desired_height : '') . ']' . $matches[4][$match] . '[/img][/url]';
This wraps the code inside a the URL bbcode to force it to open in a new window. Will only apply on newly posted images though.

Sorry for bumping an old thread.. but I just tried using this code, and it worked. My problem is that while images do open in new tabs when clicked, they still enlarge inside the post too.

Is there a way for it to only show the full image in a new tab, instead of inside the post?

[Ashelia]

Bump! I still haven't found a solution to this ><

[Ashelia]

Bumpybump! Still need help

[K@]

Sorry, man!

As this has been marked as being solved, everybody's ignoring this, assuming that everything's been figured-out.

Might be best to start a new topic and refer to your previous posts...?