I have implemented a functionality where I am displaying background image in div and plotting different elements on the image dynamically using javascript.
Now, need to implement zoom in & zoom out.
While implementing zoom in/zoom out facing problem that both image and elements not getting zoom in/zoom out in proportion.
If dynamic element gets zoom in /zoom out - image getting fixed.
if image getting zoom in / zoom out - element get fixed.
Expected output - both image and elements should get zoom in/zoom out dynamically in proportion
Your help is appreciated.
Related
I have WPBakery installed on my wordpress website, and I have tried to have two images in a single widget in a row divided into 5 columns, the two images being in a single column.
One of the images however is a sort of a custom stylized picture frame for the other image. I managed to partially solve the issue by applying a margin of "-140%" on the top margin. Unfortunately I can't get the image to stretch out to fit the frame, also when changing the viewport to be smaller (mobile sized for example), the frame scales proportionally as it should, while the image it self shrinks.
Can anyone help me out on making the image scale proportionally with the image, and also making sure it stretches to the size of the frame?
Note: The images might not be the same resolution as the frame, but i need the image to be stretched to those dimensions.
Here is how it looks on a 1080p monitor, notice how its not stretched to the frame
When it is shrunk to a mobile viewport
In my professional opinion of over 13 years of web development in a business setting, my answer to you is use ONE image. Have a .PSD project for these. Have your image frame as one layer, and use your normal images in another layer on top. When you want to create one of these images, open up the .PSD project, highlight the image to be replaced, and import the new. You may have to crop the new to be the dimensions of the last one and play with the centering x and y. Then, save your new image at full size. It will scale down because it is ONE image, not one image with a hacktastic image background.
Apologies if this has been answered before, I didn't see anything that matched it perfectly. I've found a ton of resources for sliders that snap to the edge of the current frame, but not my requirements below.
What is the best way to build a simple webpage that has the following:
A top layer, that fills the entire screen, with a 'hole' showing a background layer.
The background layer must be draggable/swipeable horizontally.
The background layer is many time wider than the viewport, so I don't want any snapping until the edges of the image are reached.
I made a little gif mockup to try to show what I'm on about.
Thanks for any help!
I am creating a website that has a small map of a part of a town.
The map should have markers (icons) that mark the most important attractions and it should have zoom in/out capabilities. It also has to cover the full page (responsive, depending on the resolution).
What i have right now:
I used a div with the .svg image set as background. Icons are absolute positioned small divs that are set to needed places using margins.
Now the problem is that when someone resizes the page or views the page in some other resolution, the markers move and don't show the needed location anymore.
How can I set them fixed to the div, so when the div is resized the icons stay in the needed place on the map? Also how to make the background image zoom in?
I have image map that can I move, but this map will be so big, so I would like to load it dynamically like google maps or maps in browser games.
But i dont know how does it work, can you help me?
I need just word solution not code
Thanks
Edit: i have 1 idea, maybe try to make div with width and heigth about 20000px and while moving the map add there new divs, but if is it this good idea how can i control loading new divs?
Divide your image in tiles. Then add them to your scrolling area as they come into the viewable area, and remove them as they go outside it. This scrolling area could be as simple as a div with a certain size and overflow:scroll;, with a child div much larger.
I'm trying to implement a zoom to component option where the user presses the 'e' key and it zooms right onto the component. I only want there to be one zoom level for this, since I am doing a zoom slider for when the user wants to zoom the entire svg at an incremental pace.
Here are some screenshots of examples
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom2.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom2.png
For each of the above examples, I'm selecting the component with the text "testing" and zooming in on it.
Here is the jsfiddle of what I have so far
http://jsfiddle.net/6Jg2A/3/
By component, I mean a within the svg. Which contains an image, text, and rect.
It isn't fully working yet. For example, if you select the pink component and press e to zoom you can see that it doesn't really zoom to it correctly.
I think that I need to translate the components as well, I'm just trying to wrap my head around how to do that.
Wondering if anyone could help. Thanks.
Edit: Also, the zoom factor should be dynamic based on component size I think. In other words, when zooming in on a component the end result should be a zoomed component that isn't dependent on the actual size of itself. (I hope this makes sense)
It will be easier to zoom the entire svg canvas, not each element separately. You'll also want to grab the transform from the element you're zooming to and adjust the translate property of the canvas as well.
I've updated your JSFiddle to show a quick and dirty alternative that works: http://jsfiddle.net/6Jg2A/5/