XF 2.1 Pause gif avatars until mouseover
- Thread starter csgoant
- Start date
csgoant
Member
I'm attempting to use this library https://github.com/ctrl-freaks/freezeframe.js/tree/master/packages/freezeframe to achieve the desired result.
Trying to use that library, is there a div that wraps most of the page contents? So I dont have to hunt down each individual <img> tag to add a class to it?
Trying to use that library, is there a div that wraps most of the page contents? So I dont have to hunt down each individual <img> tag to add a class to it?
Last edited:
csgoant
Member
Okay, it works. For anyone that wants to do this with the avatars on their site.
First, grab a copy of freezeframe.min.js from the github page and save it to your js folder (Everything in there is neatly organized by folders so I created a folder for it):
github.com
Then you need to make some template modifications in order to get this to work.
Add these lines to the
This line is just loading the js library
and this block does two things. One, its starting a new Freezefame instance when the DOM is totally loaded. Two, its adding a class to any element that has the class 'avatar--xxs'. The way this library works is, any element that has the 'freezeframe' class added will be affected by freezeframe. So, in theory, the easiest way to get every gif to pause would be to just add the 'freezeframe' class to all <img> elements. I didn't do it that way because I don't want every gif to be paused. I only wanted avatars in certain areas to be paused until a mouse over.
So at this point any avatar with the 'avatar--xss' class will be paused when the page is loaded. You can replace 'avatar--xxs' with 'avatar' and every avatar will be paused until mouse over. Again, thats not the effect I wanted. I wanted avatars in a few places to behave normally. Now you just need to go through a few templates, find places where avatars are being loaded, and add 'freezeframe' to its classes. I wont go through every place I added it to avoid keeping this too long. If anyone better at js or xenforo notices anything wrong with this, please scold me.
First, grab a copy of freezeframe.min.js from the github page and save it to your js folder (Everything in there is neatly organized by folders so I created a folder for it):
freezeframe.js/packages/freezeframe at master · ctrl-freaks/freezeframe.js
freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions. - ctrl-freaks/freezeframe.js
github.com
Then you need to make some template modifications in order to get this to work.
Add these lines to the
helper_js_global template:This line is just loading the js library
Code:
<xf:js src="/js/freezeframe/freezeframe.min.js" />and this block does two things. One, its starting a new Freezefame instance when the DOM is totally loaded. Two, its adding a class to any element that has the class 'avatar--xxs'. The way this library works is, any element that has the 'freezeframe' class added will be affected by freezeframe. So, in theory, the easiest way to get every gif to pause would be to just add the 'freezeframe' class to all <img> elements. I didn't do it that way because I don't want every gif to be paused. I only wanted avatars in certain areas to be paused until a mouse over.
Code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
$(".avatar--xxs").addClass("freezeframe");
new Freezeframe();
});
</script>So at this point any avatar with the 'avatar--xss' class will be paused when the page is loaded. You can replace 'avatar--xxs' with 'avatar' and every avatar will be paused until mouse over. Again, thats not the effect I wanted. I wanted avatars in a few places to behave normally. Now you just need to go through a few templates, find places where avatars are being loaded, and add 'freezeframe' to its classes. I wont go through every place I added it to avoid keeping this too long. If anyone better at js or xenforo notices anything wrong with this, please scold me.
Similar threads
