Discussion on FullScreen Background Slider - jQuery SlideShow

pantherius

pantherius supports this item

Supported

37 comments found.

Great product it works perfect and really easy. Only one question how can i edit the time between the background slide. I want the animation time to be short and that is working by edit the animation_time but how can i edit the delay / pauze time after all the effects. Im looking forward to your response!

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

Hi, Is it possible to keep the full image when its portrait? e.g. Scale it down instead of cropping it? Thanks

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

Hi ,

I need to slide images one after another. but now images are sliding together now. It’s looks mess now. here is my site http://conradswailes.biz/demo/redbus/

please help. Thanks

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

Hi, someone asked a similar question before but I don’t think theres a clear answer here for it yet. Crossfade: I’d like a pause between the fades. In other words, an image fades in completely (100%) and then the whole animation pauses for 3-4 sec before the 2nd image crossfades over the first and so on. Hope that’s possible. Thanks.

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

Hi, I have to say this slider is pretty amazing! My question is how exactly do you change the pattern in the slider. Thanks!

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

Hi. The images get a bit darker in the slider (using corssfade), any fastfix to show the image in normal colormode/light?

Thank you for the script!

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

Hi, So far i LOVE the slide. Just want to ask how can i change the speed of the transitions and where do i change the type of animation?

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

I have many images in MySql database, can I connect it to your slider?

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

Nice slider! On crossfade, how can you make the crossfade animation time short, but increase the time the current slide stays up before the next animation starts to the next slide? Something like a CROSSFADE transition of 2 or 3 seconds, and then KEEP that slide up at an opacity of 1.0 for, say 15 or 20 seconds BEFORE the transition starts to the next slide? Currently, it seems to be unending transitions…with no break between the next transition. Thank you for your reply!

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

Hi is it possible to use a video source (mp4/webm) instead of an image with this?

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!

I like, good job!

Hi infinitanet,

Happy to hear that you like it. Thank you!

Best regards,
Pantherius

Hi,

Our one of slide is Google calendar page.

Can we insert Google calendar in the slideshow?

Can we set the preview slide image on bottom of the page?

Thanks!

Hello HeeHA,

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

Kind regards,
Pantherius

Just curious… the changelog on the product page shows version 1.5, but the download says 1.4 which seems to have been skipped as the same changelog goes from 1.3 to 1.5.

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

Hi, How can I have text on top of the images without using embedding it in the list tag?

never mind, changed the z-index

Hello,

Great to hear that, you already solved it.

Best regards,
Pantherius

This comment is currently being reviewed.

Hi pantherius,

Nice script.i purchased it and installed all features on wordpress except social networks icons .

please tell me how to install social networks icons like in demo?

http://i.imgur.com/odPNr8y.png

Thanks

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

Sorry for the question, is that possible to have multiple slide? In the exemple there is only one slide,, maybe I don’t have a good view ^^

Thanks for your return

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

by
by
by
by
by
by