• Welcome to Simple Machines Community Forum. Please login or sign up.
November 29, 2021, 05:26:28 PM

News:

Want to get involved in developing SMF, then why not lend a hand on our github!


Highslide Image Viewer

Started by digger, October 07, 2008, 09:37:35 PM

Previous topic - Next topic

Nao 尚

Quote from: kosaic on March 23, 2010, 09:05:48 PM
I'm such an idiot .... "Install in Other Themes" and chose my theme ... all is fine and it works like a charm in 2.0 RC3.
(As long as you're not using Aeva Media, of course.)
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

kosaic

Snap, I never even thought to check that.

Your right, Aeva is now broken ... Initial highslide functionality works on first click, but when you zoom, just goes full window in IE.

Any workaround, or do I have to uninstall the Highslide mod for Aeva to be ok again ?

Nao 尚

I don't know. Try replacing this mod's Highslide JS file with the same as in Aeva Media's aeva subfolder. Might work, dunno.
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

kosaic

so if I remove the highslide.js file (from the new Highslide folder), Aeva all works fine again, but the new highslide mod fails of course.

I copied the highslide.js from Aeva, and put it in place of the new highslide file ... Aeva is still broken, but the highslidemod works fine as if nothing changed.

So, answer is no :(

Nao 尚

You must copy the highslide-2.js file and rename it to highslide.js on your Highslide mod. Just to be sure you're doing it correctly.
highslide.js is still included in the AeMe package because of plans to allow people to downgrade Highslide in the future. Not implemented yet, though.
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

kosaic

Just tried highslide-2.js (renamed to highslide.js)

Does not work. Aeva is still not working properly when I do this.

Nao 尚

Let me be clear on the way I would do it (bear in mind that I never tried Highslide Image Viewer myself):

- Download highslide-2.js from Themes\default\aeva
- Rename it to highslide.js
- Upload it to replace your Highslide Image Viewer's highslide.js copy (NOT in default\aeva, of course.)
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

kosaic

Exactly what I did, and Aeva still function's improperly.

After this change, when I click on an image in Aeva, it "highslides" , but when I click on Zoom, it just jumps to full screen in IE8.

Also from the album view, pictures jump to full screen with no highslide at all.

Nao 尚

Hmm well, some other incompatibility then I guess.
I will not make any deals with you. I've resigned. I will not be pushed, filed, stamped, indexed, briefed, debriefed or numbered.

Aeva Media rocks your life.

tycms

I would like to customize this mod so that Highslide will only grab images within certain bbcode tags, [hs][/hs] for example. Is this possible?

nikan

April 07, 2010, 07:45:53 PM #510 Last Edit: April 08, 2010, 06:40:55 PM by nikan
Quote from: budun on April 06, 2010, 04:56:56 AM
I would like to customize this mod so that Highslide will only grab images within certain bbcode tags, [hs][/hs] for example. Is this possible?

Updated to add the button and text

Copy the attached image to Themes/default/images/bbc

Open Themes/default/languages/Modifications.english.php
Find:
?>
Add before:
$txt['hs'] = 'Highslide Image';

Open Sources/Subs-Editor.php
Find:
array(
'image' => 'img',
'code' => 'img',
'before' => '[img]',
'after' => '[/img]',
'description' => $txt['image']
),

Add before:
array(
'image' => 'hs',
'code' => 'hs',
'before' => '[hs width=300 height=300]',
'after' => '[/hs]',
'description' => $txt['hs']
),


Open Sources/Subs.php
Find:
array(
'tag' => 'img',
'type' => 'unparsed_content',
'parameters' => array(
'alt' => array('optional' => true),
'width' => array('optional' => true, 'value' => ' width="$1"', 'match' => '(\d+)'),
'height' => array('optional' => true, 'value' => ' height="$1"', 'match' => '(\d+)'),
),
'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img"/>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),
'disabled_content' => '($1)',
),

Add before:
array(
'tag' => 'hs',
'type' => 'unparsed_content',
'parameters' => array(
'width' => array('optional' => true, 'value' => ' width="$1"', 'match' => '(\d+)'),
'height' => array('optional' => true, 'value' => ' height="$1"', 'match' => '(\d+)'),
),
'content' => '<a href="$1" class="highslide" onclick="return hs.expand(this)"><img src="$1" alt=""{width}{height} /></a>',
'validate' => create_function('&$tag, &$data, $disabled', '
$data = strtr($data, array(\'<br />\' => \'\'));
if (strpos($data, \'http://\') !== 0 && strpos($data, \'https://\') !== 0)
$data = \'http://\' . $data;
'),
'disabled_content' => '($1)',
),


It will still affect img tagged images when they are resized to smaller size and you must set max width and height of posted pictures to (0 = disable).
Or just use my hack for disabling the image toggle and don't use this.


Use the new button as the Insert Image button.
Only images that inserted with Highslide Image button will affected by the highslide effect.

[hs width=300][/hs]

or

[hs height=300][/hs]

to keep proportion.
The value 300 of width and height is for reference, change it with a value you like.

aw06

Highslide is very slow in IE. anybody else have this problem ?
:: ShopinJA.com Powered by SMF 1.1.19 | Ig-Oh Theme by Koni | 70 Rock Solid Error Free Mods | Many Custom Edits & Tweaks ::
- Host Unlimited Websites - Free Website Builder & Templates - Unlimited Disk Space & Bandwidth

nikan

Works fine here. Maybe something wrong with your IE

aw06

Quote from: nikan on April 07, 2010, 08:05:11 PM
Works fine here. Maybe something wrong with your IE

using IE8 on Win7
:: ShopinJA.com Powered by SMF 1.1.19 | Ig-Oh Theme by Koni | 70 Rock Solid Error Free Mods | Many Custom Edits & Tweaks ::
- Host Unlimited Websites - Free Website Builder & Templates - Unlimited Disk Space & Bandwidth

nikan

Win7 and WinXP with IE8 works fine

nikan

April 08, 2010, 09:38:30 AM #515 Last Edit: April 08, 2010, 02:48:39 PM by nikan
Actually i have created a new mod out of this tag integration (thanks budun for the idea)
The Highslide BBCode and Image Viewer is a new mod and you have to uninstall Highslide Image Viewer mod.

tycms

April 09, 2010, 05:51:18 AM #516 Last Edit: April 09, 2010, 06:11:27 AM by budun
Quote from: nikan on April 07, 2010, 07:45:53 PM
Use the new button as the Insert Image button.
Only images that inserted with Highslide Image button will affected by the highslide effect.

[hs width=300][/hs]

or

[hs height=300][/hs]

to keep proportion.
The value 300 of width and height is for reference, change it with a value you like.

Quote from: nikan on April 08, 2010, 09:38:30 AM
Actually i have created a new mod out of this tag integration (thanks budun for the idea)
The Highslide BBCode and Image Viewer is a new mod and you have to uninstall Highslide Image Viewer mod.

Thank you very much nikan.  :) This is exactly what I was thinking of. I saw the previous version (the one still affecting img tagged images) and I was planning to work on it and give feedback. I was planning to use this for thumbnails and leaving SMF 2.0 RC3's image resizer to handle other pictures. Now that is solved. I still didn't have time to test it though. And yes, this is a new mod: Highslide BBCode and Image Viewer. :) I guess we need a new topic for this.

If that's ok for you, I will try to customize it a bit more. Perhaps adding the option to include captions (like the examples on http://highslide.com/) such as:

[hs caption="image description" width=300][/hs]

Perhaps previous & next functionality...

First I have to test and see what's going on. Thank you again. :)

ProfDrDenis

one question..

we are talking from highslide and Aeva. Aeva works very nice with a youtube video. Is this not going with a pic like highslide?

Let Aeva do the job with the pic and we delete highslide Or?

nikan

QuoteAnd yes, this is a new mod: Highslide BBCode and Image Viewer. :) I guess we need a new topic for this.
I'm waiting for approval  :o

QuoteIf that's ok for you, I will try to customize it a bit more. Perhaps adding the option to include captions (like the examples on http://highslide.com/) such as:
[hs caption="image description" width=300][/hs]
Perhaps previous & next functionality...
Be my guest  ;)


tycms

Nikan,

I tested it on SMF 2.0 RC3. It works fine and does not interfere with the built-in image resizer of SMF. This is great.

One thing about the modifications for SMF 2.0 RC3:

Sources/Subs.php


'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img"/>',


This should be


'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" />',


for SMF 2.0 RC3.


Quote from: ProfDrDenis on April 09, 2010, 07:09:06 AM
one question..

we are talking from highslide and Aeva. Aeva works very nice with a youtube video. Is this not going with a pic like highslide?

Let Aeva do the job with the pic and we delete highslide Or?

So you are talking about Aeva auto-embedding image links similar to Youtube links? I think this wouldn't be convenient at all. Think of it like this: Maybe we would be avoiding a few tags, but we lose control over images. Maybe someone will prefer to post the link only, not the image itself. Also, Aeva auto-embedding image links feature would grab every image link preventing indivual preferences about the visible dimensions of the image. There will be one global setting set by the administrator and that's it. On the other hand, using [img width=x height=y] or [hs width=x height=y], it is possible to set these parameters manually.

Advertisement: