Galleria thumbnails not displaying correctly - jquery-plugins

I have a galleria implementation with the Twelve premium theme.
I am having a real problem with the thumbnail rendering on galleries with mixed portrait and landscape images. The thumbnails for the portrait images are being cropped top and bottom, with only the centre showing. The image appears to display OK in lightbox and fullscreen mode but occasionally also appears cropped in the main stage area.
See here for example.
Any idea why this is happening?

Have you tried setting thumbCrop to false in the theme settings?
Galleria.addTheme({
...
defaults: {
...
thumbCrop: false,
}
...
}

Related

How can I change an Image in different screen size with swiper?

Good evening guys, I wish to change some image in swiper slide when resizing the screen. For example when the breakpoint are more than 1200px, I have some image when I resize the screen in responsive mode, I've another image.
I do this in script js or can I do this from css and html?
Thanks to everyone!

Firefox Addon manager blurry icons

I created an extension for Firefox and made a simple icon for it.
But when I tested it in the Addon manager the icon appeared blurry despite my source image was fine.
I started to experiment with different sizes and shapes of the icon.
Figured out that the icon container is 48x48 pixels and the default addon icon is 32x32.
But for any experiments the result was the same.
So I created a simple rectangle icon drawing it by pixels so it shouldn't blur anyway:
But the result blurred again:
There is some sub-pixels around the rectangle though the border should be crisp...
In pixels view:
Also I found the default extension icon (a puzzle piece) and in pixels it looks perfect but in the manager the borders are blurred a little though it's not obvious at first glance.
Are you sure this is not happening when you save the image? I don't know what app you are using, but many photo apps try to compress jpm images when you save them by default. Check this first.
Usually this does not happen with png images, so you could try using a png image instead as well.
It was silly enough... The broblem was the page scale not 100% on the Addons page. Pressed Ctrl+0 and all restored.
It happens sometimes on other web pages when I zoom in/out the view and images lose their sharpness.

Prevent resizing of images in ImpressPages 4.x

Whenever I add an image using the image widget in ImpressPages 4.2.5, the image is resized to the actual width of the parent container. However, as I use a responsive design, I need the image in full resolution. Otherwise, the images will look blurry on high dpi screens (e.g. Smartphones or Retina screens).
Is there a way to prevent the image widget from resizing the images?
Try to increase the image size in theme options (theme.json).
Another option is to create a new skin for that widget to output original image and not resized one. Here's an article about skins - http://www.impresspages.org/docs/widgets#skin

Woocommerce Product Image White Dots Internet Explorer Error

I have an ecommerce website which uses Wordpress CMS and Woocommerce plugin.
The product images looks good on all the browsers except Internet Explorer.
When a category page loads, the product images have some white dots that disappear after the page completly loads. But on Internet Explorer the dots don't disappear.
I've read something about the jQuery fadeIn function. But I don't know the solution for this.
You can see below the problem:
Full screen image: here
Still no answer. This is important. Any help will be great.
It's an Internet Explorer bug, which appears when using fadeIn animations. You have to adjust the black level of the image by replacing real black (#000000) with very dark gray (e.g. #010101).
You can use Gimp to replace the colors: Colors > Map > Color Range Mapping
More information here, here, here and here.

Images & Icons are getting pixelated when gallery loads

I have a Content Slider (All-in-one-banner sort of) on the home page of my website.
Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.
Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.
Please help me.
Demo link (Open in chrome):
When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013
The solution I could figure out is that one should NOT use an image with large dimensions.
For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.
I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked.
Another way to fix this is to use an svg image file.
So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.

Resources