Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1

    Default 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

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: How to make this manual slider??? If even possible.

    Quote Originally Posted by Tazz View Post
    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.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  3. #3

    Default 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

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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


    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: How to make this manual slider??? If even possible.

    Quote Originally Posted by Egg Bramhill View Post
    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 Photo_Block.xar 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!
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default 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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: How to make this manual slider??? If even possible.

    Excellent Gary & Acorn. Scratched my head for 2 hours re this.

    Would be curious to know whether a preview works for you?
    Gary, yes indeed it did thankyou.

    @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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: How to make this manual slider??? If even possible.

    Quote Originally Posted by Tazz View Post
    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.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  9. #9
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: How to make this manual slider??? If even possible.

    Quote Originally Posted by Egg Bramhill View Post
    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
    Made the same mistake myself Egg when I created a new document Great effect courtesy of Acorn.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

  10. #10
    Join Date
    Oct 2004
    Location
    Mönchengladbach
    Posts
    252

    Default Re: How to make this manual slider??? If even possible.

    Quote Originally Posted by Tazz View Post
    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
    no sicknature. for nearly 20 years. omg ...
    For many problems there are simple and easy-to-understand solutions that do not work.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •