News:

Wondering if this will always be free?  See why free is better.

Main Menu

Open resized images in new window

Started by rfirevtre, April 03, 2010, 08:40:11 PM

Previous topic - Next topic

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.

// 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:
this.style.width = this.style.height = this.style.width == 'auto' ? null : 'auto';
Replace with:
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...

Quote from: Arantor on April 04, 2010, 09:03:48 AM
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...

Quote from: Arantor on April 04, 2010, 09:13:04 AM
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...

Quote from: Arantor on April 04, 2010, 09:18:15 AM
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:
Quote+ 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

Quote from: Arantor on April 04, 2010, 08:45:46 AM
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


kat

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...?

Advertisement: