I've installed Magic Zoom in to my Big Cartel website, the zoom function works fine however the product is not actually zooming in?
http://www.generyanart.com/product/house-by-the-sea this is the website - I was just wondering what i needed to do to fix this issue, as i would like the zoom function to show the detail of the piece!
thanks
There are 2 issues:
1: To zoom an image, one image has to be larger than the other. Your two images are the same size. Look carefully at the href and src here and you'll see they reference the same image:
`<img src="http://images.cdn.bigcartel.com/bigcartel/product_images/142875802/max_h-1000+max_w-1000/House-By-The-Sea-A32.jpg" alt="Image of House By The Sea"/>`
Either make your main image (src) smaller in width/height or make your large image (href) bigger in width/height.
2: You must also fix some CSS. The following CSS rule in your stylesheet is reducing the zoom image to the width of the zoom window.
To display the image at its original (larger) size, add the following CSS:
.MagicZoomBigImageCont img { max-width:none !important; }
3: Not required, but because this particular image zoom is so large, it would look good enlarged to full-screen. That's possible on click if you use Magic Zoom Plus instead of Magic Zoom.
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I have a web slider with an image in it. I've asked my designers for an image of the highest possible dimensions that I'd like to support (1920x1080 browser window).
This looks great at the highest resolution, but as the browser window gets smaller and smaller the image doesn't scale appropriately. I'm not sure what techniques I should be performing to make sure an image like the one in the example above is scaled down appropriately as the window size changes.
Should I ask for various resolutions of the same image from our designer? And swap out the image using media queries in css? Or is there some other way to properly do this in CSS using background image size, etc?
Edit:
So the image was created with text and graphics. The problem may be that there's no way to support this on various device sizes. How do other people/companies handle images with text/graphics as part of the image, and not over on top of it?
Try Applying max-height:100% & max-width:100% to the element you wish to remain scaled.
I.E
<div class ="wrapper">
<div class ="image">
</div>
</div>
CSS
.image{
max-height:100%
max-width:100%
}
i'm starting to build this bootstrap site where I have flash animation on my fontpage. --> http://testi9.aada.fi/index.php?cID=180
My animation size is 1472px x 485px. Now I want it to be 100% width on bootstrap site so that it would strech nicely on different screen sizes.
I added this css code on bootstrap css file:
#swfcontent169 {
border:solid thin #f00;
width:100%;
}
Now my flash animation is 100% but somehow those "symbols" that are
on my flash animation on each side are visible too and animation is not stretched as i would like it to be (full width).
Can someone help me out with this?
// Mika
You need to set the proper scaling mode for the flash object. (the scale embed property) or stage.scaleMode through AS3 code.
Here is a visual rundown of the options: (you will likely want exact fit or no border)
Let's say this is your document:
We have four boxes (one per corner), and some gray boxes that are off the stage.
Here are you options:
Show All:
Show all scales the content so the whole stage fits, but then you get a gutter if it's not the right size and objects off stage may be visible.
No Border:
This will scale it so the whole content will fill the bounds (keeping aspect), but then if it's not the exact size, you'll get cropping of the stage, see how the boxes are being cropped on the top bottom? You can change the way it aligns the cropped stage with the stageAlign property.
Exact Fit
This will just make the whole stage fit in the area defined, but it will not honor your aspect ratio and things could looked squished/stretched.
No Scale
This won't scale the stage AT ALL. So if the defined area is smaller than the stage, it will crop it, if larger, you'll get gutters.
You probably want exact fit or no border - depending on if you need the aspect ratio to be fixed. You can also use no-scale and use code to align your contents the way you want.
You can align the content several ways too using the align embed parameter.
You can adjust these in your embed code. There are also options in the FlashPro publish settings (when you click on the HTML Wrapper Format), or you can use an online tool like: http://embed-swf.org/embed-swf.php
I'm making a basic html5/css web page. For some reason, when I view the page in the browser, the thumbnail image is showing up as full size. To create the thumbnail, I opened the large original in paint. I resized it to a width of 150px and it calculated the height as 185px. Then I saved it with the thumb name.
Then, in my html code, I have the following:
<img src="../media/tinCanBookCover_thumb.jpg" height="185" width="150" alt="Tin Can Crafts Book" title="Tin Can Crafts Book" >
However, when I view the page, I can tell I'm viewing a small image at a larger size because of the pixels showing. Clicking the image is showing the full size image as expected. Any ideas why it's not showing my thumbnail as thumbnail size? I've done this elsewhere and it worked. I know the page validates, except it's having trouble finding the stylesheet, but I do see the stylesheet changes when I view the page.
I figured it out! I had css to make img 100%. I changed it so it was attached to a class instead of the generic image.
I'm trying to make a page that can scale down to support small browsers, but take advantage of the majority of browser sizes that most visitors are using.
I have a background image that is bigger than 1024x728, but the most important parts of the image are contained within 1024x728... It's like a magazine's bleed - there's extra image there if its needed (and it looks better if fully expanded) but it's not necessary.
I have included an example to illustrate what I mean:
http://tinypic.com/r/24l5she/7
The "background image" is the entire red box in the larger browser window, and there's a repeating texture it sits within (the blue). The "white box with red arrows" is the "minimum size" I want to accept. What I am trying to do, depending on the size of the user's browser, is cut out parts of the image until the browser reaches some specific minimum size.
Can this be done within a framework like 960.gs?
Really looking forward to your responses!
Cheers,
Put your page in a fixed-width wrapper div, then add a centered background-image to the body tag.
With CSS3's background-size property, you can force the image to stay a constant size. Then it's just a matter of a no-repeat center center bit in your background declaration.
div {
background: url('yourpic.jpg') no-repeat center center;
background-size: 1024px 768px
}
You didn't really want to support IE<=8, did you?
Not an answer but more of a food for thought...
Seeing as your background image is so large, you may want to just remove it from mobile devices. While most of them can handle it, it's just extra data that needs to be transferred and most mobile carriers have strict data limits.
Like I said, just something to consider. :)