How to make a pop-up pop up

[Acorn]

Great stuff Acon/Gary. How would you go about this zoom-in effect but maintain the same border demesions. i.e. instead of the complete image zooming-in and getting larger, the zoom-in does the same zoom but remains within the original photo h & W ?

Egg, I think you are asking how to achieve the Simple Gallery zooming of the entire image effect.

This is a separate, simpler CSS effect.

Use the CSS script in the Website Head:
<style>
.scaled {
transform: scale(1.0);
border: 2px solid red;
transition: 1.2s ease-in-out;
}
.scaled:hover {
transform: scale(2.0);
border: 4px solid blue;
}
</style>

Add Name htmlclass="scaled" to any object, including text.
I added 'border' just for the hell of it to show tweaks are not that scary.

If you are asking about zoom and pan, that is more complex.

Acorn

[Initiostar]

Longer term I don't want to have to update the index page picture/s as much as the catalogue
pictures. Those I intend to remove when sold unless their removal (rather than marking as
'sold') gives a wrong impression of the range of instruments we sell. I quite like the present
catalogue layout but propose to make a new layout to be vertically scrolled for the narrow
format catalogue page.

Philip, understand where you're coming from now; the Gallery you created is not I assume a Xara widget, but a grid you created using a MouseOver animation (bulge maybe?). It is still relatively easy to transpose the desktop variant to one that works in a mobile format, particularly since your photos are in portrait format anyway.



One of the outcomes from playing around was the inner-zoom here: https://initiostar.co.uk/demo/inzoom-test/. Try it on your mobile? But the process of creating your mobile variant equivalent is exactly the same; take your current grid for example, Share with other Variants, and transpose the grid from (say) 5 columns to 2 columns. You can resize to fit and thereafter, when you change a photo it automatically changes in the other variants. (I think) you could do this with your grid without too much hassle.

WRT the Navbar I think you need to add the index landing page, else there is no way back once you move from it (e.g. a Home link).

Probably best to start a new thread now, since we have drifted from audio popups to photo grids.

Good to see the site taking shape.

Gary

[flip]

May I revert to the audio insertions topic once more?

I'm currently making the mobile version of my site. The Infostop layer wasn't created automatically so I copied it manually in its assigned position. It seems OK but now starts as soon as the page opens, not when the 'trigger' graphic is clicked.

It's obviously something I've done since when I play the page within XWD with the main version that also starts as soon as the page opens.

Other pages that I've not tampered with remain 'correct'.

Can you tell me what I've done wrong please?

Flip

[Acorn]

May I revert to the audio insertions topic once more?

I'm currently making the mobile version of my site. The Infostop layer wasn't created automatically so I copied it manually in its assigned position. It seems OK but now starts as soon as the page opens, not when the 'trigger' graphic is clicked.
It's obviously something I've done since when I play the page within XWD with the main version that also starts as soon as the page opens.
Other pages that I've not tampered with remain 'correct'.
Can you tell me what I've done wrong please? Flip

Flip, I simply created a Variant and all pages and layers copied over.

You mention layer Infostop; it needs to be Info(lock), the (lock) part is important.

I would delete and retry as fixing what you have will be awkward unless it is just the layer name.

Acorn

[Egg Bramhill]

Thanks Acorn & Gary. Yes these work excellently. Thanks for your time.

[flip]

Hmm. Clearly I'm still doing something wrong. I deleted the mobile variant, created a new one and the mobile variant was indeed created with the various elements in various places, some in the new narrow page, others outside it..

The loudspeaker, text group and the placeholder and the ellipse were outside the page area when I tested the single page. They didn't play either automatically or on the trigger.

I dragged the speaker symbol and the text into the mobile page - same result.

Finally I dragged the widget and the ellipse into the page - and when I tested the page, once again the sound started as soon as the page opened.

It seems to me that I'm not being offered the option to play automatically or delay when the trigger is clicked but the action starts as soon as the page opens.

I've corrected all my Info(lock) stupidity also.

Thanks

Flip

[Initiostar]

Hmm. Clearly I'm still doing something wrong. I deleted the mobile variant, created a new one and the mobile variant was indeed created with the various elements in various places, some in the new narrow page, others outside it..

The loudspeaker, text group and the placeholder and the ellipse were outside the page area when I tested the single page. They didn't play either automatically or on the trigger.

I dragged the speaker symbol and the text into the mobile page - same result.

Finally I dragged the widget and the ellipse into the page - and when I tested the page, once again the sound started as soon as the page opened.

It seems to me that I'm not being offered the option to play automatically or delay when the trigger is clicked but the action starts as soon as the page opens.

I've corrected all my Info(lock) stupidity also.

Thanks

Flip

Flip,

I'll take a look later and get back to you - there is no reason it should not work, but I'll check later.

Gary

[Initiostar]

Flip,

OK - tried and tested the approach here: https://initiostar.co.uk/demo/variant_popup_test/ Design test file: Variant_Popup.xar

As before you will need to replace the audio widget with your own sounds - better if you try and test the function in a new document to satisfy yourself that it works before you implement it in your main site; a lot less hassle!

All I did was to create the desktop, create a variant, drag and resize objects to a fit a mobile format. I created a normal text style for the variant and added a simple background rectangle on the popup, else likely the popup may not be that clear if it resides on top of other content.

I would do the same with your gallery page too; test the desktop to mobile transition in a separate document; https://initiostar.co.uk/demo/simple_grid/ - this is I think the same format at your gallery page, using a grid of bulge animations.

Gary

[flip]

Gary

Many thanks. I'll get to this first thing tomorrow and confirm that I can handle the tech.

I did test the gallery format - that works fine.

Very much obliged.

Philip

[flip]

Gary

Thanks for your help.

Unfortunately, I still have the same problem with your new file after I delete your sound file and import my sound file - the test in XWD plays immediately the page opens and neither the sound file nor the explanation text appears. I assume I should be 'importing' the sound file?

Philip