foto popup within a popup layer

[zawadil]

Hello Acorn,

Within a popup layer I have a product photos and tried to use the foto-popup function to give the visitor a bigger/better view.

Popup open/close works as expected, if the magnifier is not used.
If the magnifier is used in the popup layer to see the bigger size of the photo and NOT closed seperately before closing the popup layer, the bigger sized photo remains visible even after closing the popup layer.

I understand, that the ´photo popup´ function creates a seperate special layer, as it can be astonishingly be moved as well.

Within the last 10 years I have used so many version of WebDesigner (currently Xara Designer Pro+ v23.6.0.68432) and I cannot remember, if this is an old behavior.

Anyway .. I just want to know, if there is a possiblity to close the photo after somebody used the magnifier together with the popup layer.

Kind regards
Erwin

[Acorn]

Erwin, thank you for targeting me but you ought to ask of the TG Community.

You have not described if your popup layer is automatically closed or if you have the Black Close icon top right corner of the popup.
It does not produce a special layer, it just unhides and scales an image, all driven by code.

I added the Default image to a popup layer (Image) and added a MouseOff linked object to open the Image popup layer.
The enlarged image as set to be 4000px wide and was set to close automatically.

Its behaviour was as expected:

• Click the Link - image popup layer opens. Magnify icon on hover.
• Click off the image - Image popup layer closes.
• Click the Magnify icon - Default image expands to the height of the browser. It shows a Full Size icon bottom right. Demagnify icon on hover.
• Click outside of the image - nothing happens.
• Click the Demagnify icon - Image popup layer is again revealed.
• Click the Magnify icon and then the Full Size icon - Default image now shows at 100% scaling. Demagnify icon on hover.

I have not been able to close the popup and leave the expanded image.

If it is not set to close automatically, the popup layer stays open.
If you click the Close icon, the image opens up again but closes on a second click and the popup layer has gone too.
This is a Xara Bug. I avoid this setting because of this. If I use it i use CSS to hide the Close icon and add another blob with link, popup: close instead.

Hope this helps.

If you want to experiment, offer up a text design and we can try to replicate what you have described.

Acorn

[zawadil]

Hi Acorn,
thank you for your reply, I have tried it with different settings and was not successful at all.
Maybe I oversee something.
I´ll send you a sample xar tomorrow.
Kind regards
Erwin

[Acorn]

Hi Acorn,
thank you for your reply, I have tried it with different settings and was not successful at all.
Maybe I oversee something.
I´ll send you a sample xar tomorrow.
Kind regards
Erwin

Erwin, that's the best approach.

Acorn

[zawadil]

Hi Acorn,
I upload my test.xar, which includes in total three issues

1. the problem with the popup-foto within a popup layer. I have two versions automatic/manually close of the popup layer ... but there is no difference between them two.
2. Positioning of the ´Link to Headline´ on a different page with sticky objects on the top of all pages. You already helped me to find a solution for this (THX) about 1 year ago. I just want to give you a feedback about a limitation, if working with a desktop and a mobile version. My test.xar therefore contains both versions .. see my comment.
3. I found a problem using a shadow with png pictures. I think this is a BUG as I´m using this with nearly any product picture on my site and never have seen this in the previous versions.


Thank you in advance for your assistance.
Kind regards
Erwin

[Chris M]

3 questions, 3 solutions, but 0 actual answers to the questions.

1) I don't see why you want to click to open the rear view, then click again to make it slightly bigger. I just made the rear view bigger and removed the zoom.
2) Remove the code and add a rectangle, then Utilities > Name and give it a name. Select your link and Utilities > Web Properties > Link (tab) > Link To Anchor and select the name of the rectangle from the drop-down list.
3) I think this more to do with the actual picture, as one can normally crop a pixel or two to remove the lines. However, in this case, simple save the image as JPEG and use that instead.

1) I only changed 'Prod1pup'
2) I made the rectangle bright yellow so you can see it. You would either make the same colour as your background, or give it a 99% transparency. I named it 'Trigger1' because I have no imagination.
3) Again, I only changed 'Pod1'

>>> zawadil.xar <<<

[Acorn]

Hi Acorn,
I upload my test.xar, which includes in total three issues

1. the problem with the popup-foto within a popup layer. I have two versions automatic/manually close of the popup layer ... but there is no difference between them two.
2. Positioning of the ´Link to Headline´ on a different page with sticky objects on the top of all pages. You already helped me to find a solution for this (THX) about 1 year ago. I just want to give you a feedback about a limitation, if working with a desktop and a mobile version. My test.xar therefore contains both versions .. see my comment.
3. I found a problem using a shadow with png pictures. I think this is a BUG as I´m using this with nearly any product picture on my site and never have seen this in the previous versions.


Thank you in advance for your assistance.
Kind regards
Erwin

Erwin

1. I am still puzzling over the popups. The HighslideJS library is moribund so I would try not to use it for a customer.
2. The limitation you've found with the links could be fixed with yet more code to determine which variant the call is from but it is the easier is just not to share the link.
3. The final image one requires you to forces Xara to render the image as a PNG with Web Properties > Image > Web image type: Lossless...

Acorn

[Acorn]

I think HighSlideJS is overkill for what you want.

My demo file, CSS - Scaling Images.xar, has to pure CSS approach.
Both use a hover effect rather than a click but will work on a phone with a touch.
The Front/Rear images have a Name of htmlclass="bigger" added. That's it.

The rightmost set is placed in a !Magnified layer (this is not a popup). The larger image is given a Name, htmlclass="tobeRevealed"
Each named image is pair with a thumbnail that has a dummy link with the larger image being on top, so you must have them adjacent and Soft-Grouped for the code in Website Head to work.

You could look at the Xara Landscape Cloud Inner Zoom (Inner Zoom 1) widget. I find these widgets hard to modify as Xara leaves little guidance.

Acorn

[zawadil]

Hi Acorn,

for the PNG problem I have opened a new thread, as I´m now sure that this is a XARA bug and the title of this thread is missleading for this issue.

Thread Title: PNG with transparent background and shadow .. no longer handled correctly.

Kind regards
Erwin

Thank everybody for the suggestions concerning the foto popup, I will check them to find out, which one fits to our design concerns with minimum work to have it on several pages within the desktop and mobile version.