Jump to content


Photo

Slider - MFL Scripts


4 replies to this topic

#1 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 4,313 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 18 December 2020 - 07:24 AM

Please use this thread to post all questions related to the Slider script.

 

ATTENTION - ANY AND ALL SCRIPTS REQUIRE TO HAVE THIS GLOBAL CACHE SCRIPT PLACED AS THE FIRST ITEM IN YOUR HEADER MESSAGE !!! The script builds a cache for local storage and indexedDB storage in your browser to limit the API call to the MFL Server.

You only need a single copy of this  ,do not add multiple times if using multiple scripts.

<script src="https://www.mflscripts.com/mfl-apps/global/cache.js"></script>

 

See troubleshooting section at very bottom of this post before submitting a question.

 

Before installing any scripts - please review this video tutorial on how to prepare your MyFantasyLeague site for customizations.

 

Access ALL of MFLScripts here.

 

example.jpg

 

 

Most if not all of our custom scripts require the addition of a font awesome library to be loaded into a homepage message that is marked as a "Header"  OR you can import the font awesome stylesheet into your main css file , it must be the very first line in your css file. Its likely if your using any of our scripts you already have a copy loaded, so please disregard and move onto the main script installation section.

 

 

Example 1 - inserting font awesome js file into a header message

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>

 

 

Example 2 - inserting font awesome into your main css file as first line in the stylesheet

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";

 

 

 

 

SLIDER SCRIPT INSTALLATION

Pace the following into any homepage message (Do not mark as a header or footer). You can place this within the tab content of your homepage or create a link and link directly to the message. 

 

The slider will load images , html or modules. There is a light and dark version css file you can copy and load and edit if you need.
The script below has some MFL modules and example images loaded , which you can edit. There are a few var settings for the functionality of the slider, i have tested them all and these seem to be the best settings , so i'd leave those as is.

 

 

1. Install this into a homepage message - edit the HTML to add your modules or images

<script src="https://www.mflscripts.com/mfl-apps/slider/script.js"></script>

<script>
jQuery( document ).ready(function() {
    $('.flexslider').flexslider({
      animation: "fade",         // use slide or fade
      slideshowSpeed: 4000,      // set speed of slides
      animationSpeed: 800,       // set speed of animation
      smoothHeight: true,        // remove this if you dont want the slider height to auto resize
      pauseOnHover: true,        // pause slider when hovering
      directionNav: false,       // Set to false to hide slider arrows
      after: function(slider){   // this allows slider to restart after you have touched any of its contents
        slider.pause(); 
        slider.play(); 
      }
    });
});
</script>


<div class="mobile-wrap flex-wrapper">
 <div class="flexslider" style="overflow:hidden">
  <ul class="slides">
   <li><module name="DRAFT_STATUS"/></li>
   <li><module name="WELCOME"/</li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b0.png" /></li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b1.png" /></li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b2.png" /></li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b3.png" /></li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b4.png" /></li>
   <li><img class="slider" src="//www.mflscripts.com/ptd/2020/images/b5.png" /></li>
  </ul>
 </div>
</div>

 

2. Install one of the two following CSS - one is prepared for a light skin site , the other for a darker site

 

LIGHT CSS

<style>
/***************************************/


/* SLIDER */


/***************************************/

.flexslider .report caption span.module_expand {
  display: none
}

.flexslider .report tbody {
  display: table!important;
  width: 100%;
}

.flex-container a:hover,
.flex-slider a:hover {
  outline: none
}

.slides,
.slides>li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none
}

.flex-pauseplay span {
  text-transform: capitalize
}

.flexslider {
  position: relative;
  zoom: 1;
  padding: 0
}

.flexslider .slides>li {
  display: none;
  -webkit-backface-visibility: hidden;
  padding-bottom: 20px
}

.flexslider .slides img.slider {
  width: 100%;
  display: block
}

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0
}

html[xmlns] .flexslider .slides {
  display: block
}

* html .flexslider .slides {
  height: 1%
}

.no-js .flexslider .slides>li:first-child {
  display: block
}

.flexslider .slides {
  zoom: 1
}

.flexslider .slides img {
  height: auto;
  -moz-user-select: none
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease
}

.loading .flex-viewport {
  max-height: 300px
}

.carousel li {
  margin-right: 5px
}

.flex-direction-nav {
  *height: 0
}

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.flex-direction-nav a:before {
  font-family: FontAwesome;
  font-size: 40px;
  display: inline-block;
  content: '\f053';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3)
}

.flex-direction-nav a.flex-next:before {
  content: '\f054'
}

.flex-direction-nav .flex-prev {
  left: -50px
}

.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: .7;
  left: 10px
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: .7;
  right: 10px
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1
}

.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1
}

.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: .8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: var(--main , #080e25)
}

.flex-pauseplay a:before {
  font-family: FontAwesome;
  font-size: 20px;
  display: inline-block;
  content: '\f004'
}

.flex-pauseplay a:hover {
  opacity: 1
}

.flex-pauseplay a.flex-play:before {
  content: '\f053'
}

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 2
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #eee;
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px
}

.flex-control-paging li a:hover {
  background: #fff
}

.flex-control-paging li a.flex-active {
  background: #fff;
  cursor: default
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease
}

.flex-control-thumbs img:hover {
  opacity: 1
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default
}


@media only screen and (max-width:54.250em) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px
  }
}
</style>

 

 

 

DARK CSS

<style>
DARK SITE CSS
/***************************************/


/* SLIDER */


/***************************************/

.flexslider .report caption span.module_expand {
  display: none
}

.flexslider .report tbody {
  display: table!important;
  width: 100%;
}

.flex-container a:hover,
.flex-slider a:hover {
  outline: none
}

.slides,
.slides>li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none
}

.flex-pauseplay span {
  text-transform: capitalize
}

.flexslider {
  position: relative;
  zoom: 1;
  padding: 0
}

.flexslider .slides>li {
  display: none;
  -webkit-backface-visibility: hidden;
  padding-bottom: 20px
}

.flexslider .slides img.slider {
  width: 100%;
  display: block
}

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0
}

html[xmlns] .flexslider .slides {
  display: block
}

* html .flexslider .slides {
  height: 1%
}

.no-js .flexslider .slides>li:first-child {
  display: block
}

.flexslider .slides {
  zoom: 1
}

.flexslider .slides img {
  height: auto;
  -moz-user-select: none
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease
}

.loading .flex-viewport {
  max-height: 300px
}

.carousel li {
  margin-right: 5px
}

.flex-direction-nav {
  *height: 0
}

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.flex-direction-nav a:before {
  font-family: FontAwesome;
  font-size: 40px;
  display: inline-block;
  content: '\f053';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3)
}

.flex-direction-nav a.flex-next:before {
  content: '\f054'
}

.flex-direction-nav .flex-prev {
  left: -50px
}

.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: .7;
  left: 10px
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: .7;
  right: 10px
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1
}

.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1
}

.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: .8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000
}

.flex-pauseplay a:before {
  font-family: FontAwesome;
  font-size: 20px;
  display: inline-block;
  content: '\f004'
}

.flex-pauseplay a:hover {
  opacity: 1
}

.flex-pauseplay a.flex-play:before {
  content: '\f053'
}

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 2
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px
}

.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7)
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease
}

.flex-control-thumbs img:hover {
  opacity: 1
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default
}


@media only screen and (max-width:54.250em) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px
  }
}
</style>

 

 

 

 

 

TROUBLESHOOTING TIPS

 

1. Make sure to review the help video to check your league settings are setup so customized scripts can be used.

 

2. Recopy the code above and try again. Be sure your advanced editor is turned off.

 

3. Right click mouse on your page where script displays and click "Inspect Element" . In the browsers new popup window that displays , click on the "Console" tab. Now click on the "Errors" section. Here you will find a list of any errors that have occurred. Many errors our self explanatory and you can address yourself. If your error is showing cross site  CORS has been blocked , then you need to check every CSS, JS and IMAGE file on your site and be sure they all are using https  url and not http. Another error that appears could be "too many requests" , this happens when you refresh your site many times and MFL blocks your IP for 15 minutes for submitting too many API request. If thats the case , just wait 15-20 minutes and try again.

 

4. Check out the MFL Menu > Help section. We have added a new link here called "Manage Cache". By default we are caching the API files for our script in the browsers local storage. If you script isn't updating , you can force an update by clicking "Clear Local Storage". The next link is called "Enable IndexedDB" , this link is only meant to be used for owner that are getting the "Too Many Requests" error because there are using several scripts on several different MFL leagues that use the same serverID. Click this if needed more storage.

 

5. If the above wasn't any help , then post a question and we will do our best to help when the time allows.


All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!


#2 MCD13

MCD13

    Member

  • Members
  • PipPip
  • 25 posts

Posted 25 October 2021 - 04:02 PM

Anyone know why the first image in my scroller only shows a portion when i first load into the page? Once i click through the scroller, it’s fine after that. 

 

https://www79.myfant...21/home/68197#0



#3 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 4,313 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 25 October 2021 - 07:38 PM

you need to define a height and width and put in a container , the script it trying to determine the width and heights of the image before its loaded 


All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!


#4 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 4,313 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 25 October 2021 - 07:44 PM

Works fine on mobile but desktop the height for 1st loaded image is not being set properly

Only way Id use the slider is if all images are same height and you define and height and width of the container it resides in

All the scripts I post were created by Habman , with some small contributions from myself. The man has done an outstanding job giving the community a variety of options to enhance the site. Thank you sir !!


#5 MCD13

MCD13

    Member

  • Members
  • PipPip
  • 25 posts

Posted 25 October 2021 - 08:12 PM

Ok makes sense. if i set a height and width, do i need to set up different heights and widths for each screen size to make it responsive?





Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users