Copy and paste the following into any homepagemessage to create a helmet bar to display all your team logos or hemlets in your league. Create a directory of files for each helmet or logo and edit the script to point to your directory. The script will resize all images to scale. Read the notes within the script below for details.
This script can be installed in a homepagemessage and linked to or placed on home page. You can place in a header to display on all your leagues.
This script is already included in our custom template. Do not install it again. Custom template users do not need to load cache.js or font awesome.
<![CDATA[<!-- HELMET BAR HTML -->
<div class="customHemletbar" id="customHemletbar"></div>
<script>
/////////////////////////////////// HELMET BAR SCRIPT ////////////////////////////////////////
// 1. A jQuery Library must be loaded on your site to use
// 2. You can load any sized helmets/images and the script will scale them to fit any width you desire
// 3. Load your desired helmets/image into a directory on your server , name them anything you'd like. In this demo i named my images 0001.png to 0012.png for and then my hover images 0001-h.png to 0012-h.png
// 4. To use different images on hover , or the same images in color or greyscale , create those and load in same directory and name
// 5. Change the link in the var to point to your directory of images
////////////////////////////////////////////////////////////////////////////////////////////////
var BarMaxwidth = 1148; // set the maximum width you want the helmet bar to display (do not add px to this number)
var BarMinwidth = 768; // set the minimum width you want the helmet bar to shrink (do not add px to this number)
// lots of image will cause them to shrink really small on mobile displays , so we can stop them from shrinking
// too small by setting a min width and scrolling the images that are off the page when screen width is this amount
var helmetPanelHeight = 60; // Set desired height of helmet bar (do not add px to this number)
var paddingHelmets = 2; // Set desired padding between helmets (do not add px to this number)
var reverseHelmet = true; // Set to true to make 1/2 of the helmets shown in reverse
var reverseIcon = false; // Set to true to make 1/2 of the images shown on hover in reverse
var showImgBase2OnHover = true; // Set true or false to use 2nd set of images for hover
var showImgBase2OnDefault = false; // Set to true or false to to use 2nd set of images as current state
var helmetBaseURl = 'https://www.mflscripts.com/mfl-apps/helmetbar/helmetDemoImages/'; // Direct the script to the location of your images
var helmetBaseImgType = 'png'; // Insert the file type of the images your loading
var helmetIconArray = new Array(); // DO NOT EDIT-REMOVE-CHANGE THIS VAR !!
// ONLY CREATE AS MANY helmetIconArray events AS YOU HAVE TEAMS IN YOUR LEAGUE - DO NOT CREATE MORE OR LESS OR SCRIPT WILL NOT WORK
// PLACE FILE NAMES OF YOUR IMAGES BELOW - YOU CAN PLACE ANY ANY ORDER YOU WANT I HAVE THIS SETUP FOR 12 TEAMS FRANCHISE 1 to 12 in order
// EXAMPLE ON HOW TO LABEL THESE VAR = new HelmetIcon('IMAGENAME','HOVERIMAGENAME','FRANCHISEID',SHOW HELMET SET TO TRUE);
helmetIconArray.push( ({ icon:'0001', hoverIcon:'0001-h', franchiseId:'0001', showFlag:true }) ); // Franchise 1
helmetIconArray.push( ({ icon:'0002', hoverIcon:'0002-h', franchiseId:'0002', showFlag:true }) ); // Franchise 2
helmetIconArray.push( ({ icon:'0003', hoverIcon:'0003-h', franchiseId:'0003', showFlag:true }) ); // Franchise 3
helmetIconArray.push( ({ icon:'0004', hoverIcon:'0004-h', franchiseId:'0004', showFlag:true }) ); // Franchise 4
helmetIconArray.push( ({ icon:'0005', hoverIcon:'0005-h', franchiseId:'0005', showFlag:true }) ); // Franchise 5
helmetIconArray.push( ({ icon:'0006', hoverIcon:'0006-h', franchiseId:'0006', showFlag:true }) ); // Franchise 6
helmetIconArray.push( ({ icon:'0007', hoverIcon:'0007-h', franchiseId:'0007', showFlag:true }) ); // Franchise 7
helmetIconArray.push( ({ icon:'0008', hoverIcon:'0008-h', franchiseId:'0008', showFlag:true }) ); // Franchise 8
helmetIconArray.push( ({ icon:'0009', hoverIcon:'0009-h', franchiseId:'0009', showFlag:true }) ); // Franchise 9
helmetIconArray.push( ({ icon:'0010', hoverIcon:'0010-h', franchiseId:'0010', showFlag:true }) ); // Franchise 10
helmetIconArray.push( ({ icon:'0011', hoverIcon:'0011-h', franchiseId:'0011', showFlag:true }) ); // Franchise 11
helmetIconArray.push( ({ icon:'0012', hoverIcon:'0012-h', franchiseId:'0012', showFlag:true }) ); // Franchise 12
</script>
<!-- HELMET BAR JS FILE -->
<script src="https://www.mflscripts.com/mfl-apps/helmetbar/script.js"></script>]]>