How to make this manual slider??? If even possible.
Good morning to everyone (or afternoon, evening depending what corner of the world you're in),
So I have a question. Does anyone know if this is possible? It's the image slider/slideshow (not sure what it's called) that is seen on MLS real estate listings at the top of the properties landing page. This is one actually on images I took for an agent, and she just uploads them to MLS and this slider thing is made automatically. I'm wondering if it's possible to replicate this in Xara Designer Pro? It's manual as you can see, but the images are each then clickable to enlarge. They even put my virtual tour in there that I created. Hmmmm.
https://www.letsgocoastalnc.com/idx/...sland-NC-28531
Thank you to anyone that can share their knowledge that far surpasses mine.
Tazz
Re: How to make this manual slider??? If even possible.
Quote:
Originally Posted by
Tazz
Good morning to everyone (or afternoon, evening depending what corner of the world you're in),
So I have a question. Does anyone know if this is possible? It's the image slider/slideshow (not sure what it's called) that is seen on MLS real estate listings at the top of the properties landing page. This is one actually on images I took for an agent, and she just uploads them to MLS and this slider thing is made automatically. I'm wondering if it's possible to replicate this in Xara Designer Pro? It's manual as you can see, but the images are each then clickable to enlarge. They even put my virtual tour in there that I created. Hmmmm.
https://www.letsgocoastalnc.com/idx/...sland-NC-28531
Thank you to anyone that can share their knowledge that far surpasses mine.
Tazz
You could replicate the slider using Xara without too much difficulty - the downside of the current implementation is the slider does not adjust to the width of the browser; it truncates itself depending on the browser width. A visitor will therefore have a slightly different viewing experience depending on the device being used to view the site. This does resolve itself when viewed on a mobile device as the transition moves to show just one image at a time. The virtual tour could added and you could have any other video, animations or graphics of your choice per photo. You can combine the left and right manual buttons with a toggle for auto slide, as required. The number of photos visible in the gallery at any one time would be fixed to ensure the visitor only sees complete photos, not ones that are truncated on the right.
Here is a link to just some of the slider alternatives: https://initiostar.co.uk/demo/superslider/
Any of the photos can have links, popups or zooms: e.g. https://initiostar.co.uk/demo/hoverZoom/
What in practise one is doing here is to create a slider website that is embedded in the main website; both would use 'scale-to-fit-width'
There are other ways of doing this as well.
Re: How to make this manual slider??? If even possible.
Initiostar, Thank you for the awesome reply. VERY useful and lot's of superb info. I do have to play around a bit with it. The biggest issue I see is that, every sample shows one image on each slide, and I have to get numerous images on a slide and have each image clickable to, for example, enlarge. I know i can easily build an image (a slide) with numerous smaller images but the clickable part might be a problem to achieve. Experimental time, hope i don't blow up the lab LOL
1 Attachment(s)
Re: How to make this manual slider??? If even possible.
Hi Gary, looking at your instructions on the link below.
I'm trying to get an inner zoom working as you have on your telephone boxes image but I can't get it to work. I attach my xar file.
One issue is you name the UserJQuery but I think this should be UsesJQuery however at present neither work. You help would be appreciated.
YOUR LINK
1 Attachment(s)
Re: How to make this manual slider??? If even possible.
Quote:
Originally Posted by
Egg Bramhill
Hi Gary, looking at your instructions on the link below.
I'm trying to get an inner zoom working as you have on your telephone boxes image but I can't get it to work. I attach my xar file.
One issue is you name the UserJQuery but I think this should be UsesJQuery however at present neither work. You help would be appreciated.
YOUR LINK
Hi Egg,
You are correct: UserJQuery sb UsesJQuery; my typo in the notes (but it is correct in the code).
I could add your photo to my existing demo Attachment 132101 and publish it: https://initiostar.co.uk/demo/hoverZoom/
However, when I tried to create a new document with the same code, it did not work which is I expect what you found. My original demo was created in Pro X18 so I am not sure what changed under the covers to prevent the inner demo working. Would be curious to know whether a preview works for you?
@Acorn - a bit baffled here - any thoughts? It might of course just be me!
Re: How to make this manual slider??? If even possible.
@Egg, en route you picked up Xara's smart quotes around htmlclass=”inzoom” so the ClassName became ”inzoom” and not inzoom.
I altered it and all works.
You can use either htmlclass="inzoom" or htmlclass=inzoom.
I always use a text editor and never copy from a Xara text area.
I also have smart quotes disabled.
It is possible the same punctuation muck-up can occur in any JavaScript as it is heavily dependent on quoting, more so that CSS.
Acorn
Re: How to make this manual slider??? If even possible.
Excellent Gary & Acorn. Scratched my head for 2 hours re this.
Quote:
Would be curious to know whether a preview works for you?
Gary, yes indeed it did thankyou.
Quote:
@Egg, en route you picked up Xara's smart quotes around htmlclass=”inzoom” so the ClassName became ”inzoom” and not inzoom.
I altered it and all works.
You can use either htmlclass="inzoom" or htmlclass=inzoom.
That can be very frustrating, smart quotes would be somewhere I'd never look.
But thanks both of you, it's now working fine =D>
Re: How to make this manual slider??? If even possible.
Quote:
Originally Posted by
Tazz
Initiostar, Thank you for the awesome reply. VERY useful and lot's of superb info. I do have to play around a bit with it. The biggest issue I see is that, every sample shows one image on each slide, and I have to get numerous images on a slide and have each image clickable to, for example, enlarge. I know i can easily build an image (a slide) with numerous smaller images but the clickable part might be a problem to achieve. Experimental time, hope i don't blow up the lab LOL
There is an example here at the bottom of the page: https://initiostar.co.uk/demo/zNivo/
There are better ways to this, but the idea is a gallery slider. In this example each photo can be enlarged with standard Xara. You could add a few lines of code, have each image enlarge and have a link where required. I'd play with a few ideas and see what works for your design.
Re: How to make this manual slider??? If even possible.
Quote:
Originally Posted by
Egg Bramhill
Excellent Gary & Acorn. Scratched my head for 2 hours re this.
Gary, yes indeed it did thankyou.
That can be very frustrating, smart quotes would be somewhere I'd never look.
But thanks both of you, it's now working fine =D>
Made the same mistake myself Egg when I created a new document :confused: Great effect courtesy of Acorn.
Re: How to make this manual slider??? If even possible.
Quote:
Originally Posted by
Tazz
Good morning to everyone (or afternoon, evening depending what corner of the world you're in),
So I have a question. Does anyone know if this is possible? I
Tazz
look at this, high end but very good.
https://www.zitronenwolf.com/index.php
