About Scrolling Picture with Touch

[notrino]

Hello,

I'm a Xara Web Designer Premium user. You know, mobile users are using fingers for horizontal flowing images. So I want to add a widget (with 5-6 pictures) for it. But I didn't find any widget sample from Online Content Catalogue. A lot of widgets including horizontal flowing the images with touch the "arrows" or touch the "numbers". But I don't want to touch any arrow or number. I want to only dragging the picture. Thanks.

[Initiostar]

Hello,

I'm a Xara Web Designer Premium user. You know, mobile users are using fingers for horizontal flowing images. So I want to add a widget (with 5-6 pictures) for it. But I didn't find any widget sample from Online Content Catalogue. A lot of widgets including horizontal flowing the images with touch the "arrows" or touch the "numbers". But I don't want to touch any arrow or number. I want to only dragging the picture. Thanks.

There are a variety of different sliders in the demo here > https://initiostar.co.uk/demo/zNivo/ - you must have v18 or above to be able to use the touch scroll/swipe feature.

I have adapted the Simple Slider to have a horizonal scroll without controls (for a mobile/ tablet). The slider does have two variants that transition from desktop to mobile; you could delete the desktop variant or retain it.

Simple Slider - Horizontal Scroll >Simple-Slideshow-Page-Scrolling Template.xar

For the slider, you would create a separate Xara file with the first page filename anything other than "index" > you publish this document to the same directory as your main website.

Thereafter you call it through a placeholder (same dimensions as your slider page) using an iframe:

<iframe title="slider-crossfade" src="simple-slider-crossfade.htm" name="simple-slider-crossfade" height="100%" width="100%" style="border:none;"></iframe>

The source (src) is the same filename as that given to your first page in the slider.

When you preview the slider in your main website (it will suggest it cannot find it), but once both documents are published to the same directory it correctly appears.

There are lots of different ways to do this and many have been previously covered.

[Acorn]

Faith, not quite sure why you want this only for mobile touch but try: http://acorn.xara.hosting/HScroll/.

It should not display any scrollbars but it is at the moment and some images are missing.
I am wrestling with it - sorry.
UPDATE - now working - the images are just numbers here but it works with anything really.

On a non-touch device you click on the visible image and then use the left/right arrows.

Basically, I have an H-scrolling site with side-by side images, one per page, and the viewer is a Placeholder IFRAME that is set for one image/page width.

For the images:

• Create a Scrolling Horizontal Website with pages 640x640px with no page gap.
• Fill each page with a 640x640ps image or anything you want.
• Name the first page, slide01 [ignore the Xara complaint]; label the next slide02 and so on.

For the viewing page:

• Add a Placeholder 640x640px with Body code:

<div id="container">
  <iframe src="slide01.htm"></iframe>
</div>

• Include styling;

<style>
:root {
  --wide: 640px;
  --deep: 640px;
}
#container {
  width: var(--wide);
  height: var(--deep);
  overflow-y: hidden;
}
iframe {
  width: var(--wide);
  height: calc(var(--deep) + 20px);
}
</style>

• The extra 20px for the IFRAME height gets rid of the vertical scrollbar.
• Scrolling is needed so you cannot set scrolling="no".
• The Xara Placeholder size is not important but it is sensible to set it to the expected size.
• For your different image dimensions, change the :root values, --wide & --deep; all images ideally should be the same width.
• If you have differing image sizes, centre and scale on the page to fit.

Acorn

[Acorn]

I have included the detail to drive the presented image from the parent page.
The IFRAME needs name="slider" included.
The Links are set to open in 'slider' and as they are invoking a scrolling website, they need to invoke Xara anchoring, e.g., slide06 has a page address of slide01.htm#xr_page_slide06.

Not relevant to the OP ask but useful to embellish a fuller static slider.

Both these files need to be exported/published to the same folder:

• Xara - Sliders.xar
• Xara - Slide Box.xar

If you just Preview them, they are placed in separate folders by Xara.

Acorn

[Egg Bramhill]

Works well but only with a tap:
LINK

[Acorn]

Works well but only with a tap:
LINK

Egg, I like it but the OP asked for a drag.

I'm guessing that you split a next and previous call across the middle of each image.

Acorn

[Initiostar]

@ Egg
Your site responds to a "swipe" action (much as I would have expected if you were using a "Slide in" transition) and tap had the same effect.

@ Acorn, I followed the code, but with Pro X v19 >> https://initiostar.co.uk/demo/scroll-test/ - in my case, a "swipe" can leave you with part of one image and a part of another when using a scroll / horizontal transition; my preference would always be a "Slide in" with a complete picture. There were some changes to scroll in 21.6 that may not have found their way into Pro X v19 (one was an issue with vertical scrolling which caught out several TGers). I cannot tell therefore if this is working as you would have expected?

In practical terms however, if the placeholder on a mobile fills the screen width (as you might expect), the visitor sees a static picture and would have no idea there is more; if one does not want next and previous buttons or links, I think one should at least have some indication the image is more than just the static image. Page links obviously help and I placed some in the slider itself which also acts as a progress bar. You do need to be on a touch device to see the change in the progress bar (MouseOver remains highlighted until a visitor subsequently touches device).

[Acorn]

@ Egg
Your site responds to a "swipe" action (much as I would have expected if you were using a "Slide in" transition) and tap had the same effect.

@ Acorn, I followed code, but with Pro X v19 >> https://initiostar.co.uk/demo/scroll-test/ - in my case, a "swipe" can leave you with part of one image and a part of another when using a scroll / horizontal transition; my preference would always be a "Slide in" with a complete picture. There were some changes to scroll in 21.6 that may not have found there way into Pro X v19 (one was an issue with vertical scrolling which caught out several TGers). I cannot tell therefore if this is working as you would have expected?

In practical terms however, if the placeholder on a mobile fills the screen width (as you might expect), the visitor sees a static picture and would have no idea there is more; if one does not want next and previous buttons or links, I think one should at least have some indication the image is more than just the static image. Page links obviously help and I placed some in the slider itself which also acts as a progress bar. You do need to be on a touch device to see the change in the progress bar (MouseOver remains highlighted until a visitor subsequently touches device).

Gary, I appreciate your thoughts on my approach.
I, too, questioned the OP's intent as I would never leave a viewer guessing.

Both you and @Egg chose the logical method of using the intrinsic capabilities of a Xara scrolling website .
My purpose was to show how a simple drag slider would appear.

To overcome the in-between aspect of a drag, I would change the slides into a 'Concave' Transition website.
The parent page links would then have to change to this style of anchor: slide01.htm#xl_xr_page_slide0n.

The simplest 'tell' for my original would be to keep the horizontal scrollbar visible.

The original approach is one that works well for a super-wide NavBar that will not fit on the page and so can be used as an alternative to a narrow variant Hamburger menu.

Acorn

[Egg Bramhill]

First & foremost I was just trying to recreate Georges slider. It works well but as stated, apart from a 'finger pointer' there is no indication to the visitor that clicking loads another image.

I don't understand how to implement a swipe action within a Xara website?

I'm guessing that you split a next and previous call across the middle of each image.

Correct Acorn.

I could advise within pop-up to explain the navigation but I don't think this is a real solution.

I too found the swipe leaving the images half loaded.

[Initiostar]

@Egg

This was the original question from the OP:

I'm a Xara Web Designer Premium user. You know, mobile users are using fingers for horizontal flowing images. So I want to add a widget (with 5-6 pictures) for it. But I didn't find any widget sample from Online Content Catalogue. A lot of widgets including horizontal flowing the images with touch the "arrows" or touch the "numbers". But I don't want to touch any arrow or number. I want to only dragging the picture. Thanks.

I found your solution and Acorn's answered the question, but in practice, I doubt any of us would implement such a solution because a visitor would have no way of knowing it was anything different from a static image, unless there is something to tell them otherwise, OR, the slider auto scrolls (aka the old supersites).

"Swipe" was introduced in Pro X v18.0, although I don't believe the benefits were ever property explained; it works with website transitions, scroll, slide-in, crossfade being examples and is specifically for touch devices. It's there as a feature, akin to deleting an email/text message on a mobile by swiping right to left or the other way around.

I took Acorn's slider demo (without embedding it in the main site) changed scroll to slide-in and simply added a progress bar >>https://initiostar.co.uk/demo/simple...ge_slider_test

Swipe the image left to right, or right to left (only on a touch device) and it takes you to the next or previous slide; clearly the progress bar shows 5 slides in the case. On a standard desktop, just click on the progress bar (in could say 1,2,3,4,5 to make it entirely obvious).