Printable View
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
Best I can do at present: Attachment 128692
Acorn
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
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
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
Mike, glad you found it useful.Quote:
Originally Posted by Weeble
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,
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
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
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
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
Mike, your logic is spot on. I was unaware there were two placeholders, must have duplicated one along the way. Just delete the lower one.Quote:
I wonder if you could explain the reason behind having two placeholders on the mobile variant.
@ Acorn - Understood.
Thanks both, all understood.
Cheers....