Images are not scaling on Foundation - javascript

I have been playing around with the ZURB Foundation Framework on this site:
http://www.maxi-muth.de/test/zurb/
I used this Foundation Template: http://foundation.zurb.com/page-templates4/grid.html
It seems like it has problems with scaling the images.
By using Chrome everything is displayed fine.
In Firefox the images at the Landing Page are overlapping each others (/they are displayed in their original size (which is not happening in the original Foundation template)
Same is happening with the Foundation Thumbnails used here: http://www.maxi-muth.de/test/zurb/shortcodes
What do I need to do to get (back?) the automatic scaling?

I think it's no real solution (because still the original file size is used), but by adding a max-width of 100% to the images, they suit their parent.

Related

Chrome - background-size: cover;-based gallery causes performance issues

I'm building an app using Vue 2. There's a page that contains a simple image gallery that contains about 20 images and one large page background image.
The background image of the page itself is actually contained in a fixed div element that is position: fixed;, has 100% width and height and uses background-size: cover; to display the image.
All of the ~20 items in the gallery as well are using div elements with background-size: cover; displayed in a 3-column grid and the images are displayed using the dynamically generated background-url CSS property using a Vue computed property. The image paths are never being changed so they aren't being recomputed constantly AFAIK.
The performance of this page in Chrome is abysmal, loading takes forever (those are some high resolution images, though, 4K in width) and once the images are loaded I can somewhat interact with the page but everything is extremely laggy and sometimes the page stops responding completely.
On the other hand, in Firefox and Edge everything is basically buttery smooth, both during the loading of the images and during the scrolling/rendering. The interaction with the app is never blocked.
What I remember trying to fix this is replacing the div elements with regular img tags and loading up images using those. Also, I've tried caching the images, I've tried using static image URLs for testing purposes - the same thing happens every time - other browsers handle it well, Chrome is choking on it.
Here's a screenshot of the performance summary in ~30 seconds, from the moment I click the page URL to the moment that basically everything is loaded and the browser is still struggling to render anything and process any interaction with the page. Obviously the painting phase is an issue here:
Any advice? Thanks!
This question is hard to answer as it is a very specific problem.
You can analyze what is causing this behaviour in chrome by using the developer tools:
Open the developer tools in chrome by pressing "Ctrl+Shift+I".
Go to the tab "Performance".
Hit the record button and do the action which has low performance.
Hit stop and you get a breakdown what happened in the background.
If you don't find the issue with above suggestion, you can post a detailed screenshot of the performance breakdown here, I might be able to help you with it.

Bootstrap carousel slides height changing when sliding bug

I have been asked to work on the following website by my boss: 2tec.club
The site has been built using Wordpress which I am not an expert in, I have access to only the admin dashboard.
The slider at the top has a strange bug, as you can see, every time the slide changes onto the next slide ,that particular slide for a brief second changes its height. This causes the content to be pushed down briefly which is extremely annoying for the visitors.
NOTE: this only happens on larger devices. It seems fine on my phone.
I have tried using the Chrome developer tools to change the CSS rules with no luck. I cannot for the life of me figure this one out. Can someone please be kind enough to offer their help. If so it would be much appreciated.
If you remove the slide class from your #myCarousel the problem goes away.
There's a number of other issues however. It seems as though you are including bootstrap twice, once for version 3.3.2 and once for version 3.3.6.
You also mention that you're using bootstrap carousel, but you have a carousel.js that appears to be owl-carousel.
So if you're using bootstrap carousel, and you also have owl-carousel - there is the potential for unknown conflicts.
You should review all the files you're including when you get the chance.
your theme is uploading the style.css before bootstrap.css... so its not able to overwrite the changes to bootstrap..
if you r not familiar with coding the easiest solution would be to use bigger images. at this moment your image size is 960 X 295... change it to 1200 X 368.. point is increase the width of the image...
let me know if it works

Pre-loading a website title banner & adding it to Cache

Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.

Javascript zoom on hover without thumbnails

I am looking for a javascript zoom library, similar this
However, most ones out there require that you have thumbnails images for the unzoomed image which is a bit of an annoyance for me since I am only viewing 2-3 images per page and everything is preloaded.
Does anyone know of a similar library which would allow me to do this with a css scaled down version of my image rather than generating the thumnbails in the backend?
Thanks!
Yay for CSS3 transforms:
img.thumb {
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}

Where is the flickr Carousel/Slideshow "hero" available?

I was looking at flickr and noticed their carousel at the top and how smoothly it operated. Upon inspecting it, it shows "yui" but I don't see it anywhere in the YUI list of items.
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
Does anyone know what elements specifically from YUI the carousel is made from, and where they're available?
Thank you for any assistance.
The following are conclusions I'm reaching based on what I can tell from the HTML and minified JS source.
The Flickr carousel is written with very little YUI code and without using any complex component besides the transition module. Transition is used to provide a fallback for animations in older browsers. It's very smooth because it's using CSS transitions, in particular using translate3d() which works really well for moving images in one direction.
Like Quinn mentions, there's the Gallery Carousel widget. Lately I'm using ScrollView + ScrollViewPaginator and disabling drag events in non-touch devices. I like this approach because it feels like the typical carousel, but it also supports flicking through the images/pages with gestures on touch devices.
you can build it very easily using the YUI Gallery Carousel YUI Gallery Carousel

Categories

Resources