This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy.
I am making a photo gallery that has a few small thumbnail images and a large image in the middle, all on the same page. I want to make it so that when you click on each thumbnail the large image in the middle of the page changes.
Is there a way to do this with pure CSS and no javascript? Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
Thank you in advance for any help! I look forward to participating here often!
Is there a way to do this with pure CSS and no javascript?
It is possible, but not well supported in browsers.
You could link to the images and use :target to change the display property from none to block.
The problem with this is that if the browser supports display (i.e. almost all of them) but not :target (i.e. lots of them) then some images will simply be unavailable.
Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
This would achieve that.
However, preloading the large versions of all the images would be quite a painful load on users' bandwidth.
Individual pages which use some form of include or server side process to duplicate the navigation are still the way to go.
I don't think there's a good way to do this with no Javascript.
With minimal Javascript, you could have all of the large images hidden, and use onClick on the thumbnails to un-hide the appropriate image.
With more Javascript, you could keep changing the src attribute of the large image and preload images using Javascript as well (see http://www.pageresource.com/jscript/jpreload.htm).
A google search brought back some methods using pure CSS but I would suggest using a jquery plug-in like galleria. JQuery Plugins make this easy.
Related
I have a single page using CSS columns that reflows on load.
Even when I remove all IMGs and iFrames, so it is fetching no
external resources, it reflows.
I can't figure out what is causing the reflow/repaint. Any CSS exports
out there able to figure this one out?
https://github.com/treenotation/dumbdown/issues/8
There's too much content in document.
The browser will gradually display the content, that is, the content involved in rendering will gradually increase, which affects the layout calculation.
You can add the "loading state" style. When window.onload Event trigger, change the style to "load complete".
Or 'Masonry Layout'.
Reason for the reflow is: a huge amount of content but NO strategy to handle with. Indeed there are many things you can avoid/do/change ...
REASON WHY - just to base the answer ...
The reflow is caused by the mechanic: at first the text (html code) has been downloaded and rendered. But there are still a lot of elements (most over images but youtube videos and iframes as well) which are still on download. As the browser don't know the size of that elements he does not keep the place for that elements.
Now: after the download and rendering of every element has finished the browser injects the element to the content and all off the following content is pushed down and in your case to next column ... reflow.
STRATEGY: MULTIPLE ACTIONS
To your question: there is not only one reason which causes multiple and long downloads. So far there is no simple single answer and even NOT A SINGLE SOLUTION. Your needed strategy will be to optimize the page by a multiple bundle of actions. But I believe doing that you can reduce it to an acceptable amount ... and maybe there is a chance.
THINGS YOU CAN DO
1. Change layout
If you change the layout to an actual web technique. That means don't use columns (flowing left to right) to a style which prepares the pageflow from up to down. Than you can asynchron load the needed elements when the user scrolls down. The technique is named Infinite scrolling: How to do an infinite scroll in plain Javascript
But I assume as the special layout has charm this won't be an option for you!?
2. Images which are not shown - remove not needed elements from download
On your page I found images which are downloaded but which are not shown on the page. (Example: 3.png with INCREDIBILE USELESS 659KB). Remove such elements from your content.
3. Reduce not needed size of elements
Additional a lot of shown images on your page have an incredibly large file size which is not needed.
Example: devices.png
image-size: 692x285px - real size
layout-size: 287x118px - needed size
file-size-download: 110kb
file-size-needed: 4kb - if (lossless) optimized
And think about: many little file downloads add up to a big amount ... and you have a lot of downloads! If you calculate: 10 images your way: 1.1 MB can be done with 40KBs
Additional:
if you you need higher solutions use srcset attributes ...
sometimes that is a practical problem with the knowledge of the editors: than teach them how to lossless reduce images and advise them the sizes to use for the images in the layout
4. Use faster server for images
It seems the download rate from your server is not the fastest one. That's normal by most providers. As you have a lot of images ... think about to load images from a faster server - if possible. Example: the pure download service from AWS (Amazon Web Service) is incredibly fast. As you just need a bucket for downloading that is not as expensive ... try it out.
5. Use placeholders for elements
As you have a lot of elements I think you maybe cannot avoid the later injection which causes the reflow. But you can use placeholders for your element so the needed place is reserved and the reflow still does not happen for this element.
Just define the html structure and possible sizes in your layout. That additional helps the editors as they know what image size they can use. Then size the placeholders with CSS and initiate an ajax image download by JS.
In case of later download now the users maybe see a placeholder at the beginning but no reflow. You can do that with few lines of code. I attach an example at the end of the posting.
NOTE: You can do this with (youtube-)videos or iframes in a similar way ;-)
6. Use vanilla instead of jQuery
As I saw has the download of jQuery an incredible impact to your download time. Really. (That's the reason why I assume your server is a slower one.) Have a look to the download time of your elements. It is one of the elements which needs the most times and blocks your elements from rendering.
jQuery is an old dog. Modern web techniques use vanilla JS ... and as I see there are no complicated things on your page you cannot realize in vanilla. So the recommendation is to remove it from you page (if possible) and you will earn a huge speed advantage.
7. Use CDNs for download when possible
Downloading frameworks and fonts from own server makes pages slow and blocks time for the page download of other elements. Use a CDN instead.
As I have seen your fonts are loaded from a CDN? But jQuery still comes from your server. If you don't want to change to vanilla chose to load it from CDN.
8. Check if Youtube can be loaded more simple
Youtube is loaded by several actions to your page. In this case I AM NOT SURE as I still did not work with youtube for a longer time. But I believe (not sure if I am right) that there is a more direct way to include youtube videos to a page. Maybe you would like to check it.
But nevertheless: work with placeholders for the video players as well. That are almost just few additional lines off css.
9. Optimizing user experience: thinking about a preloader
Reflow is not new phenomenon to webpages. Up to now a lot of pages uses preloaders to generate a better user experience. Today's technique is ajax load...
I don't know if the described techniques will avoid the reflow completely. As there are many elements the download time cannot be set to zero. But optimizing the page will reduce it dramatically. If there still remains a little bit ... maybe you like to think about the older technique. Using a nice and maybe well designed preloader symbol indeed can upgrade the user experience. Maybe on mobile views with medium data speed there is no other chance...?
But that is just to think about an additional possibility ...
[update]
10. Combine placeholder with infinite scroll
If you are using placeholders you can/should combine it with technique infinite scroll.
Means: all media (particularly images but maybe videos and iframes as well) are prepositioned by sized placeholders. That works immediately so there should be no more reflow as needed. Then load media assynchron by AJAX based on their position on their screen. Images which are in view are loaded immediately.
As you don't have so many media elements on starting viewport (most are still below the screen view) that should work as if it is a page with a 'normal number' of pictures/medias.
All others are loading afterwards when scrolling the page the media comes in view like on a 'infinite scroll page'. (Note: that works if the file size off the images is not to large, - so optimizing the images has still to be done.)
That has the additional advantage that thake makes sure that the images are loaded in the sequence they are needed ... which safes a lot of time.
Could be done in javascript:
Place images/media by placeholder technique
On window.onload check which images/media are in the viewport. Don't forget images which are only partly seen.
On window.onscroll check if image(s) comes to viewport and load image
Note: I am not quite sure if there are anchor links on your page to the single articles. I believe not. But if you still use them the starting viewport can be anywhere on the page when the user call an article. In that case window.onscroll has not only to work scrolling down but scrolling up to.
I am not quite sure if there is a ready script avaiable. But I would wonder if not. Otherwise it would not be to tricky to do that on your own. That would have the charm that such scripts mostly have less and cleaner code than preworked scripts ...
[end update]
... ... ...
I am not quite sure if the described issues are complete. Mostly there are found more possibilities to optimize a page when you start with the process. But as I had a nearer look to your page that are the most important chances.
EXAMPLE LAZY IMAGE LOAD WITH PLACEHOLDER EFFECT
Just EASY AND SIMPLIFIED example for lazy image load. Please adapt to your need.
// new html for image
<img class="placeholder-size" src="path/placeholder.jpg" data-lazy-url="https://url-to-your/imag.png" alt="Image Description">
// css
.placeholder-size {
width: 200px;
height: 100px;
}
// js for lazy load
// older code but works, please actualize if needed
window.onload = function(){
var lazyImages = document.querySelectorAll('[data-lazy-url]');
for (var i in lazyImages) if (lazyImages.hasOwnProperty(i)) {
var imgUrl = lazyImages[i].getAttribute('data-lazy-url');
lazyImages[i].src=imgUrl;
};
};
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I am using a Tumblr like button provided by ThinkingStiff on like-button.tumblr.com and am having some problems.
I don't know if this is the right place to ask this question, but I couldn't contact ThinkingStiff through his like-button tumblr so this seemed like my best shot. First of all, I'd like to thank him for his codes on how to add a Like and Reblog button to any theme. I am using them on my blog over at shelteryou.tumblr.com and they are working wonderfully. However, as you can probably tell, the like button is a bit too big for my theme. I was wondering if there was a way to shrink it down to a more suitable size? Thank you in advance!
They use a background-image, so if you want to have a different size, you'd have to change the image resolution (or create a new image) in your favorite image editor. Then upload it to Tumblr (they provide a upload service for theme files only) or make a data URI out of it.
Then change the URL in background-image: url(…) to the new one (the first for the grey image, the second for the red one).
If you need the current images (so you can save them), copy/paste the two data URIs (everything inside the brackets) to your browser address bar.
Normally within a webview, when your page is too long, you can scroll vertically like a browser, that is the default.
I want to make this webview behave like a ebook reader, say when you need 3 pages to display the whole content, instead of scrolling vertically, you can slide to the next page which like a ebook reader (e.g. iOS Kindle app).
Any thoughts on how to implement this? Or any existing components I can use?
Cheer.
Very much depends on how much control you (want to) have on the html...
For complete layout control (magazine like) there's baker framework.
Or if you need a quick and dirty script auto generate html file with pagination (instapaper like), I'd use css3 multi-column layout, with some js to calculate the column needed. And use something like SwipeView to manage the scrolling.
This is not trivial, and there are a couple of HTML projects having to do with pagination. The ubiquitous jQuery also includes support for paginating HTML content.
Have look at this S.O. post for more details.
You can use UISwipeGestureRecognizer on UIWebView and move to the Page programmatically
Good Luck
To do this, you could start with a UIPageViewController and populate each page with a UIWebView, each scrolled down to a certain offset and disable scrolling of the underlying scroll view.
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.