Hello,

No, it is working with images only.

Regards,
Pantherius

Hello,

If you mean more images in the same slider, then yes. However, the most of the slider animations using transition effect, you can customize the animations to get your desired one.

Regards,
Pantherius

Hello,

Thank you!

The social network icons doesn’t part of the plugin since these are marketing elements on the demo website only.

Best regards,
Pantherius

never mind, changed the z-index

Hello,

Great to hear that, you already solved it.

Best regards,
Pantherius

Hello,

The downloadable file contains the 1.5 files (latest version) just the changelog file has been not refreshed in the ZIP. The 1.4 was a non-released local version, it is the reason it is seems to be skipped. So, the 1.5 changelog provides the 1.4 and the 1.5 changes on the item’s page.

Regards,
Pantherius

Hello HeeHA,

It is possible to use images only in the slider. Thumbnail selector is not a feature at the moment.

Kind regards,
Pantherius

Hi infinitanet,

Happy to hear that you like it. Thank you!

Best regards,
Pantherius

No problem.

The simplest method to add onclick event to the inner span:

<ul class="fsb-slider">
  <li><span onclick="location.href='url1'"><img src="images/1.jpg" /></span></li>
  <li><span onclick="location.href='url2'"><img src="images/2.jpg" /></span></li>
  <li><span onclick="location.href='url3'"><img src="images/4.jpg" /></span></li>
  <li><span onclick="location.href='url4'"><img src="images/3.jpg" /></span></li>
</ul>

In this case, you need to change the z-index for the spans:

.fsb-slider li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 9999;
-webkit-backface-visibility: hidden;
}

Find this part in full_screen_background_slider.css on line 161.

Regards,
Pantherius

awesome! thanks for the comprehensive and fast reply!

You’re very welcome!

Hello JerryOne4,

Sorry, it was a night here. Yes, you can modify the keyframes in the CSS file.

Kind regards,
Pantherius

Thanks for your reply. What I found out was that you set both the transition time and duration of the slides by adjusting the crossfade css.
Best regards,
Jerry

Exactly, customization is possible by editing the animation in the CSS file.

Regards,
Pantherius

Hello sambuev,

The plugin needs the following HTML markup:

    <ul class="fsb-slider">
      <li><span><img src="images/1.jpg"></span></li>
      <li><span><img src="images/2.jpg"></span></li>
      <li><span><img src="images/4.jpg"></span></li>
      <li><span><img src="images/3.jpg"></span></li>
    </ul>

It doesn’t matter you create this markup as a static HTML or generate it with PHP from your database.
The fact, how to create this markup is not related with the plugin, so yes, you can create the slides from a database.

Best regards,
Pantherius

I don’t know the plugin, but if it using the file with 410KB that really huge. The minified JS file of the slider only ~15Kb, so I’m not sure the slider causing the higher load.

Last option to try using the unminified version of the Background Slider (use full_screen_background_slider.js instead of fsbs.min.js)

Ill leave it the way it is i guess. has to be the player then cause i dropped your CSS to 6.84KB with only the crossfade effect and with a file that small everything should run smooth. Great slider by the way,keep up the great work. Will Rate Now

Thank you, really appreciated!
Search for the string ‘mobile’ in the comments section of the audio player plugin and you may find the answer.

Best wishes,
Pantherius

Hi,

Just realized, the body has a black background on my demo site, when you switch off this parameter via CSS, the images becomes lighter. Caused by the transparent attribute of the slider / animation.

You can search for:

body {
background: #000000;
...

in the style.css

Kind regards,
Pantherius

Thanks for the great support by email. 5star

You’re very welcome. Thank you for the rating, really appreciated.

Best wishes,
Pantherius

Hello cgarcia2595,

Thank you! It is quite simple, just specify the pattern during the initialization:

<script type='text/javascript'>                                                                                        
jQuery(document).ready(function() {                                                                                
    jQuery('.fsb-slider').fsbslider({"animation_time":30,"animation_type":"crossfade","pattern":"pattern2","fontfamily":"Alex Brush","control":true});// Configuration
});                                                                                                                
</script>

You can use pattern, pattern1-pattern20 values.

Best regards,
Pantherius

Please check out this one:

@-webkit-keyframes crossfade { 
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    8% {
        opacity: 0.2;
        -webkit-transform: scale(1.05);
        -webkit-animation-timing-function: ease-out;
    }
    17% {
        opacity: 0.5;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    25% {
        opacity: 0.5;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    26% {
        opacity: 0;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
}

It only one from the 5, you can see the changes in Chrome. The other ones almost the same, just replace webkit to moz, ie, etc. Maybe you need some fine tune, but I guess it is very close what you need.

Best regards,
Pantherius

Thanks again but not yet. Maybe it’s best explained with an example of mine using another plugin (which doesn’t work on the new Android systems. You plugin does work there): http://dev.mglmarchitects.com

As I said it needs some fine-tune, I just wanted to show the how-to for you.

Please try out this effect and let me know how do you like it:

@-webkit-keyframes crossfade { 
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    28% {
        opacity: 0;
    }
    100% { opacity: 0 }
}

Feel free to play with the opacity and percentage values, if the animation doesn’t fit perfectly to your needs. The new slide coming in around 30%, so if you would like to hide the previous one, you have to do it before 30%. (in this case with opacity: 0)

Kind regards,
Pantherius

basically new image comes in before the current one slides out. I need to fix that.

I got it. I edited the css file. now it’s looks good.

thanks anyway

Hi,

Happy to hear that, no problem.

Best regards,
Pantherius

Hello zenaryle,

Currently, it is not a feature, but I’m already thinking on the solution. You can set the background-size in CSS to ‘contain’ instead of ‘cover’, but that will causing repeated backgrounds. When I’ll found the best solution for this, I will add it to the plugin.

Regards,
Pantherius

Hello konesmedia,

Thank you! Edit the full_screen_background_slider.css to modify the animation time between two transitions. Just search for the animation name, you’ll find 5 part with that name in the style file. (you’ll need to modify each for the different browsers)

In that case to pause animations a little, add:

25% { opacity: 0.5; -webkit-transform: scale(1.1) rotate(3deg); }

You can also delete some percentage to make it shorter.

after the 17%, but note that, you have to reedit -webkit-transform, transform, etc. to each version.

Kind regards,
Pantherius

Thanks for your quick response but im a afraid that’s not what my questions was. The transitions effect is crossfade and the time is perfect. But after the 35 procent when the image is perfectly show i want to have a pauze of 4 seconds where the background image stand still and after the 4 seconds the image will fade into the new upcoming image. I hope im being clear…

Yes, it was only an example how you can modify each of the animations.
You can try out to add:

50% { opacity: 0.7; transform: scale(1.2) rotate(3deg); }

It will results to pause the animation between 35 and 50 percents.

Regards,
Pantherius

Hello jmascis,

You can use AJAX to update a part of the website using PHP. It’s a jQuery/Javascript plugin doesn’t use PHP, so you can update the slider with simple jQuery/Javascript with init and destroy functions.

It can handle any number of images, but I don’t recommend to use more than ten, because hundreds of images will slow down your website. The browsers can’t handle it. It is always fit to screen with cropping the images. There is no other options to make it always fit the actual resolution.

Kind regards,
Pantherius

Hi Patrick,

1. It is depends on how to integrate it to your website. You can include it to all pages or only one. If you using HTML website, you can simply integrate to the specified pages. With PHP based website, you can include a simple PHP condition to control where you would like to display. So these aren’t depends on the plugin.

2. With some technical knowledge, you can also integrate the required files to a WordPress Theme. It will works well, if the Theme hasn’t a background (background color or background image)

3. Yes, it is a simple HTML question, but the plugin also has a function to display animated,short texts. If you would like to display any additional elements, you can do it like any other HTML websites.

You’re welcome!

Kind regards,
Pantherius

Hello carricdesign,
No, you can see only on the demo site. You have to specifiy the position of the texts with simple CSS positioning.

Kind regards,
Pantherius