Developing the Highslide capability

[letsgofishing]

LGF, you didn't apply Image > Pop-up to the very thing needed to launch the Slideshow.

On !Thumbs, select the third image, ClassName t03, and tick Photo pop-up in Web Properties > Image.

It then works like a charm.

Acorn

Aaaah....errmm... yes Forgot that I added an extra pic!

[Initiostar]

@LGF

@Initiostar -so I add "UsesJQuery" as a second name on one of my pics?

No - I simply highlighted that Acorn had an image with the name "UsesJQuery" as well as "tnn"- so when you deleted all the original images and replaced them with your own, you would have deleted the name UsesJQuery - hence it did not work.

I selected your three images and enabled the Image Popup. As you only have ONE link, you need to set an additional option within the Image popup dialogue box to show gallery browser controls, else your link will only show the one image.

XAR attached and BTW you can change the background colour should you wish - the code is in the page HTML (head).

Gary

[letsgofishing]

Thanks Initiostar - all good.
Ummm - how do I get the "crossfade" to work in the "transitions" section of the script?
I deleted "expand" and the square [] ] brackets- left: hs.transitions = 'crossfade'; nothing changed
Thanks everyone for your patience

[Initiostar]

Thanks Initiostar - all good.
Ummm - how do I get the "crossfade" to work in the "transitions" section of the script?
I deleted "expand" and the square [] ] brackets- left: hs.transitions = 'crossfade'; nothing changed
Thanks everyone for your patience

"hs.transitions" does not work that way - it is an array with three possible values: http://highslide.com/ref/hs.transitions. When Xara's Highslide Popup is enabled the default setting is "hs.transitions = ["expand", "crossfade"];". The expand and crossfade are already enabled - just delete that code line and you will see nothing changes (or at least I did not see it). You can try "hs.transitions = ["expand", "fade"]; ". This however will mean you briefly see the background behind the image popup; unlikely to be desirable. "Expand" has to be present or this does not work, but it is already enabled.

The values I have used in a standard photo grid remove the rounded border and change the dimming opacity : https://initiostar.co.uk/demo/Gallery/. In this example, you have a variant transition from 5 columns wide to 3 columns wide, change a photo in one variant and it changes in all.

Gary

[Acorn]

@LGF, crossfade is there and visible if you have not centred your pop-ups. The crossfade is the visible pop-up moving over to the po-up location of the next one presented. You might see something of your pop-ups are of greatly different sizes.

The expand transition happens on opening or closing the pop-up or slideshow..

The fade transition is more like a CSS FadeIn/FadeOut action.

Acorn

[Acorn]

"hs.transitions" does not work that way - it is an array with three possible values: http://highslide.com/ref/hs.transitions. When Xara's Highslide Popup is enabled the default setting is "hs.transitions = ["expand", "crossfade"];". The expand and crossfade are already enabled - just delete that code line and you will see nothing changes (or at least I did not see it). You can try "hs.transitions = ["expand", "fade"]; ". This however will mean you briefly see the background behind the image popup; unlikely to be desirable. "Expand" has to be present or this does not work, but it is already enabled.
The values I have used in a standard photo grid remove the rounded border and change the dimming opacity : https://initiostar.co.uk/demo/Gallery/. In this example, you have a variant transition from 5 columns wide to 3 columns wide, change a photo in one variant and it changes in all.
Gary

Gary, I like your presentation, especially the use of CSS for the drop shadow.

Acorn

[letsgofishing]

@LGF, crossfade is there and visible if you have not centred your pop-ups. The crossfade is the visible pop-up moving over to the po-up location of the next one presented. You might see something of your pop-ups are of greatly different sizes.

The expand transition happens on opening or closing the pop-up or slideshow..

The fade transition is more like a CSS FadeIn/FadeOut action.

Acorn

Thanks as usual for explaining Acorn!