I have my magnifier set up. Take a look.
http://www.omarhabash.com/twyla
Looks like all works except it is not magnifying... Can some one tell me exactly what I am missing to magnify the image in the magnifier cursor?
It looks like you're using Bootstrap's "magnify" plugin.
Its docs say "If you want to show the large preview at a 200% ratio, just use an image twice the size of its container." In your website, you are already displaying the image at its full size, which is why the "magnified" version is identical to the original.
Just use a larger image and in the html set its size to the same pixel dimensions you currently have; the plugin will do the rest for you.
Related
I have a problem with my project, and it is about converting the html file to pdf. I have one question, how can we alter the size of image in jspdf because when i'm downloading the pdf, it show that the image is not fit in the page and only show half of it for A4.then, i'm trying using the A0 size but the font will become very small even though the image is right. can some one tell how to fit the image or maybe changing the font size?
(and also i'm using HTMLfromPdf.js)
You can resize the canvas image using the method parameters,
pdf.addImage(imgData,'JPEG',0,0,canvas.width*0.2,canvas.height*0.2,"a","FAST");
You can calculate the required ratio and replace the image width and height parameters.
You can use dimensions for jsPDF directly from canvas object like described there
https://stackoverflow.com/a/65124814/9026103.
In my website zoom feature is not working. On hovering over an image the selected area shown is a complete image and zoom image also seems to be the same.
Is there any way I can select a small area of the original image that will be zoomed when hovering?
i think your js are conflict to each other
Try this :
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>jQuery.noConflict();</script>
Magento 1.9 - zoom and selecting options not working
It looks like the zoom is working because in your screenshot, the zoomed image is slightly larger than the main image.
The problem is probably either:
A) Your original image is too small. To resolve this, upload a larger image, at least 800px width preferably (and as much as 1500px width).
or:
B) Your template is not fetching the largest version of your image. You can choose which image is displayed as your zoom image and it should almost always be the largest version. This can be adjusted in your Magento admin settings or coded manually in your template (depending on what theme you're using).
For a more detailed answer, please provide the URL of your page.
So I have YouTube video thumbnails displayed on a website, but they seem to have letterboxing at the top and bottom. I need to crop this, but I can't just crop x many pixels because of the reponsive design.
How would I crop images dynamically based on their width? Would I have to do it using Javascript during resize? Or is there a simpler approach?
I had a similar issue. I solved it by drawing the image to a canvas, iterating through rows of pixels and checking if they were black. The first time a colored pixel was detected marked the edge of the letterbox. I used this information to crop the image and draw it to another canvas.
It's not a perfect solution, but it worked for me. I hope this helps.
You can use object-fit css but it's not full browser compatible, however a polyfill exist
Else you can use div with background-image and background-size with cover or contain, that have a better support
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.