PortaMx

PortaMx Development => SMF 2, Modifications and PortaMx => Topic started by: feline on 29.12.11, 14:50:06

Title: [TIP] HighSlide for rescaled inline images
Post by: feline on 29.12.11, 14:50:06

With two small changes you can use the PortaMx HighSlide for rescaled (smaller) inline images (img tags).
Step 1.. Open the file /Sources/Subs.php and find (~ Line 1269)

Code: [Select]

'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" />',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),

Replace with:

Code: [Select]

'content' => '<a href="$1" class="highslide" title="Click to enlarge" onclick="return hs.expand(this, {align: \'center\', headingEval: \'this.thumb.alt\'})"><img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" /></a>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),

Step 2.. Open the file /Themes/default/scripts/theme.js and find (~ Line 39)

Code: [Select]

// Add a load event for the function above.
addLoadEvent(smc_toggleImageDimensions);

Replace with:

Code: [Select]

// Add a load event for the function above.
// addLoadEvent(smc_toggleImageDimensions);

(http://portamx.com/img/FScap0256.png)Now go to Admin - Features and Options - Layout:

Set Max width of posted pictures and Max height of posted pictures to a smaller value, as example 200

Now all NEW inserted images are resized to 200px and can expand in HighSlide with a click on the image.
For exiting images in topics, edit the topic and save it again (without any change).

Title: Re: [TIP] HighSlide for rescaled inline images
Post by: agent47 on 25.01.12, 15:15:30

This is pretty damn awesome! Love it! Thanks a load feline.