If you're like me, you struggled with the freezeframe.js library, despite the resources other people made to make it easier to implement. Maybe it messed up the size of your images, got rid of your borders, made your images overflow their containers, or you couldn't even get it to work. Or maybe you got it to work perfectly but aren't that fond of using a JS library that slows your page down (have you ever scrolled down too fast and noticed the little loading circles on all your buttons/blinkies as they're being frozen?)
Anyways, I have a simpler, more straight forward solution. It unfortunately does involve making a static png for each gif, but I figured I could do that with the time I was wasting with trying and failing to get freezeframe.js to work right.
Test it out!
freeze with whatever class you made.<script>
function freezegifs() {
var x = document.querySelectorAll('.freeze img, img.freeze');
for(var i=0; i<x.length; i++) {
x[i].src = x[i].src.slice(0, -3) + 'png' ;}}
function resumegifs() {
var x = document.querySelectorAll('.freeze img, img.freeze');
for(var i=0; i<x.length; i++) {
x[i].src = x[i].src.slice(0, -3) + 'gif' ;}}
</script>You're done! If anything is confusing, read further ^^
First you gotta make pngs (or jpgs) for every moving gif. Sorry.
This is the most tedious part, but the effect is so clean once its done. Theres probably better ways, but you can honestly just copy paste your gif into MS Paint and save it as a png (or jpg). I had a lot of blinkies so my "hack" was to upload ten or so into EZgif and once the individual frames loaded, I right clicked one frame for each blinkie and opened it in a new tab, where I then copied it and pasted it into MS Paint to save as a png. Maybe it wasn't that much more efficient, but I liked having multiple blinkies to work on at once.
The most important part of this is giving the png the same file name as the gif! Ex. cat1.png and cat1.gif are versions of the same image. You will also want to upload these into the same folder as your gifs on your web host! The JS below only changes the file extention, so if the name or folder is different, it won't work!
You will also want to make sure that all the moving images have the same file extention (gif, webp, etc), and that all the static images have the same file extention (png, jpg, etc), but make sure the moving images have a different extention from the static images. My JS does not detect what the file extention orginally was, it just removes it and replaces it with a new one for all affected images. And while you can have moving and static gifs, this won't work if the moving and static images have the same exact file extention.
<img class="freeze" src="cat1.gif">
<div class="freeze">
<img src="cat2.gif">
<img src="cat3.gif">
<img src="cat4.gif">
</div>Don't give this class to images that are already static, unless for some reason you want extra work by making static gifs for these. This is also true for images within a freeze class container; my JS doesn't detect file extention.
<button onclick="freezegifs()">pause gifs</button>
<button onclick="resumegifs()">play gifs</button>Note: If you want the gifs to automatically be paused, replace the gif files in your HTML with their png versions (you should be able to just replace "gif" with "png" if you did it right.)
<script>
function freezegifs() {
var x = document.querySelectorAll('.freeze img, img.freeze');
for(var i=0; i<x.length; i++) {
x[i].src = x[i].src.slice(0, -3) + 'png' ;}}
function resumegifs() {
var x = document.querySelectorAll('.freeze img, img.freeze');
for(var i=0; i<x.length; i++) {
x[i].src = x[i].src.slice(0, -3) + 'gif' ;}}
</script>Let me break down the code!
function freezegifs() {}This begins a function and names it. You can name it whatever you want as long as it has parenthesis at the end. The actual mechanics of the function go in the curly brackets.
var x = document.querySelectorAll('.freeze img, img.freeze');var x = - we are making a variable and defining it, this just makes it easier to see whats going on.document.querySelectorAll('') - this selects any HTML element you want it to, whether it be by CSS class, tag name, ID, or any combination of those.'.freeze img, img.freeze' - these are the elements I wanted to be affected!
.freeze to individual images I wanted affected (img.freeze)..freeze to divs containing images that I wanted all of to be affected (.freeze img), like a div of blinkies.for(var i=0; i<x.length; i++) {}This selects every element that we defined previously. Without this, only the first instance of the element would be affected, rather than every one.
x[i].src = x[i].src.slice(0, -3) + 'gif';x - this plugs in the variable that we defined earlier (document.querySelectorAll('.freeze img, img.freeze'))[i] - this plugs in a number for each instance of the element we want to affect, so the JS can change all of them, rather than just the first one.x[i].src = - we are going to redefine the src attribute of every image in the class we want.x[i].src.slice(0, -3) + 'gif' - this is what we are redefining the source attribute as.
slice(0, -3) - this cuts off the last three characters from the src attribute+ 'gif' - this attatches the gif file extention to the src attribute (which has had the orginal extention removed)x[i].src = x[i].src.slice(0, -3) + 'png'The pause function is exactly the same, except it attatches the png file extention instead.
Keep in mind the length of the extentions. Both "png" and "gif" are three characters long, hence the use of -3. Jpeg and webp would use -4. If your extentions are different lengths you will need to subtract the opposite for each function.
Example for gifs and jpegs:
slice(0, -4) + 'gif' - we're removing "jpeg" so we need to subtract 4 characters.slice(0, -3) + 'jpeg' - we're removing "gif" so we need to subtract 3 charactersIf you have different length extentions like this, you should hide the active button so the user does not accidentally click it and ruin the images.
cat.jjpegcatgifI hope this helps, and that you don't suffer too much while creating pngs!