Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Sep 2020
    Location
    Wiltshire, England
    Posts
    16

    Default Moving a graphic within a frame on a published site

    Hi,
    I've had a look around the forum and can't find anything on this. What I want to achieve is to have a graphic/photo on my website that can be moved within its frame by, for example, right clicking and dragging it or dragging it using two fingers on a mobile device. Much like many website have a location map on their 'where to find us' page.

    Can this be done straight from the box in WD17 Premium, or does it need some supplementary coding?

    Thank in advance for hints or guidance.

    Mike

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,706

    Info Re: Moving a graphic within a frame on a published site

    Best I can do at present: Roo the Day.xar

    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

  3. #3
    Join Date
    Sep 2020
    Location
    Wiltshire, England
    Posts
    16

    Default Re: Moving a graphic within a frame on a published site

    Thanks Acorn, you never cease to impress with your knowledge.
    At first glance it looks like it's exactly what I'm trying to achieve, but I just know I'll be back with more questions once I get to play with it.

    Cheers.... mike

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,706

    Info Re: Moving a graphic within a frame on a published site

    It was late so I failed to document anything.
    • Code is in Page > HTML code (body).
    • Large images are in the Image layer.
      • One has a Link to the same Layer - this hides the images but ensures they publish.
      • Each image has an Image Filename roo. In v17, multiple roos get a number added. I should have just named each a different name.

    • Each image Placeholder is a scaled-down dimensioned box.
      • The Placeholder HTML code (body) reflects the Image Filename:

    Code:
    <div data-zoom data-zoom-max="3">
    <img src="index_htm_files/roo.jpg" width=100% height=100%;" />
    </div>
    • Set data-zoom-max to a number of clicks to get to the maximum zoom.

    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

  5. #5
    Join Date
    Sep 2020
    Location
    Wiltshire, England
    Posts
    16

    Default Re: Moving a graphic within a frame on a published site

    Thanks for the info Acorn.

    I managed to just about work my way through it before I read your reply, but it might make you a smile because I couldn't for the life of me work out how the heck the image files found their way onto my server. It was only when I returned to XD and zoomed out that I saw the images on the desktop, then of course saw the image layer, so from there it started to make a bit of sense. I assume the image pop up layer is part of the widget.
    I wasn't aware about your comment "One has a Link to the same Layer - this hides the images but ensures they publish" so still very much a novice here with a lot to learn

    Later today I'll try resizing everything and loading my own images -- which are large group photographs of 100+ people..

    Thanks again.... Mike

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

    Default Re: Moving a graphic within a frame on a published site

    Quote Originally Posted by Weeble View Post
    I wasn't aware about your comment "One has a Link to the same Layer - this hides the images but ensures they publish" so still very much a novice here with a lot to learn
    Mike, glad you found it useful.

    The "trick" is objects on Layers are effectively on sheets of acetate so will all appear when published. When you link from a thing to a layer, the layer becomes a pop-up so everything on the layer is hidden until it is called.
    If you put the calling object into the same layer, the pop-up still works but can never be called as the calling object is hidden with the layer.

    Regardless of being hidden, the layer's objects are still published.

    There are other hiding mechanisms but this is one of the cleanest.

    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
    Sep 2020
    Location
    Wiltshire, England
    Posts
    16

    Default Re: Moving a graphic within a frame on a published site

    Acorn,
    Thanks for that snippet.

    As a matter of courtesy I just thought I'd report back regarding the widget.

    I've managed to upload it to my server with the image attached and everything works correctly so many thanks. I'm still toying with problems sizing the image correctly though and I'm not too sure where the widget's limitations lie. What I'm basically after is to initially show the image within the widget frame at 100% with the widget sized to the full width of the variant page, then to be able to enlarge the image within the frame up to 200%. At the moment, if I make the image full page width (outside the widget) it fails to load, and if I resize the widget to full page width it also fails to load the image (regardless if the image size). I'm beginning to wonder if my image is at too low a resolution to begin with. But I shall persevere.

    I know my terminology might be a little off-track but I hope this makes some sort of sense.

    Cheers.... mike

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,886

    Default Re: Moving a graphic within a frame on a published site

    Hi Mike, I think the problem lays with the publishing. If you publish with the Image layer non-visible the images within that layer aren't loaded into the index_html_files folder. If the layer is visible then they do get exported.

    One way around this is to place a link on the MouseOff layer to the image layer but place it behind the placeholder so it's not visible. It doesn't matter then whether the Image layer is visible or not. You don't need the links on the photos on the Image layer then either.

    DEMO
    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

  9. #9
    Join Date
    Sep 2020
    Location
    Wiltshire, England
    Posts
    16

    Default Re: Moving a graphic within a frame on a published site

    Thanks Egg,
    At first sight that appears to work exactly at the size I wanted. I'm beginning to get to grips with uploading hidden layers now. I think I might have been a bit misleading in my previous message; Acorn's solution worked OK and the graphics loaded into the index_html_files folder correctly, the problem I had was getting the files to load (show) in the placeholder (I'll stop calling it a widget!). If I resized either/both the image or placeholder to be the full page width. All I got on screen was an empty, single line frame with a 'missing file' type icon.

    Getting back to your demo, I uploaded it to a test folder and it worked well and I think I've fathomed out how it's done (a bit mystified at first as to how I uploaded two image files -- but got it now!) but before I try to adapt it to my own needs I wonder if you could explain the reason behind having two placeholders on the mobile variant. My logic can't figure out a reason for this. I hope it's just a case of forgetting to delete one but I'm standing-by for further education.

    Many thanks again. Great forum!

    Mike

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,706

    Info Re: Moving a graphic within a frame on a published site

    Egg & Weeble - the simplest method of ensuring images or any objects on a layer is to prefix it with a bang (!) - !layername and hide the layer.

    There was only a single Link to Layer set on one image in my original; this does not affect the rollover.

    @Weeble - make your image double the size of the widget width / Variant width. Ensure this is on a !layer and that is hidden.

    In the widget code set data-zoom-max=1. This set the number of + (zoom) clicks to just the one. My original has data-zoom-max=3 so you had a cycle of (+, +, +, -) with the last one a Zoom out to the original. With is set to 1, you just have a toggle action (+, -).

    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

 

 

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
  •