flGravity
- Europe
- Exclusive Author
- Has been a member for 3-4 years
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
325
Purchases
Buyer Rating:
4.57 stars
4.57 average based on 30 ratings.
-
5 Star
2170%
-
4 Star
723%
-
3 Star
13%
-
2 Star
00%
-
1 Star
13%
| Created | 1 August 12 |
| Last Update | 8 December 12 |
| Compatible Browsers | IE7, IE8, IE9, Firefox, Safari, Opera, Chrome |
| Software Version | jQuery |
| Files Included | JavaScript JS, HTML, CSS, Layered PSD, Layered PNG |
- background changer
- background slider
- backslider
- flickr
- fullscreen
- fullscreen slideshow
- image changer
- picasa
- site background
- slider
© All Rights Reserved flGravity -
Contact Envato Support


Is there any API method for an onBefore or onAfter? I need this to sync some text within the site to the background.
Thanks
Hi!
yes, here they arebeforeSlide: function(){}, // before slide callback afterSlide: function(){}, // after slide callback slidesLoaded: function(){} // slide images load callbackperfect, thank you.
And is it possible to have the pagination mode and run the timer mode?
You must run backslider in “timer” mode and then call api methods to switch between slides, or play pause timer
Can you please post some code for this as I have a feeling a lot of people would be helped by this.
I would like to have the timer mode along with the next,prev and bullets for each slide. Most sliders have this. Your help would be greatly appreciated.
Hello? Any answer on this? If it is not possible I will have to request a refund as I would have thought this functionality to be pretty basic at this point.
Hello!
I created my plugin as site background changer for responsive designs, not as a regular slider. That’s why it comes only with basic controls. If you want any controls beyond the basic set then you’d need to use api and callbacks. Here is example how to run backslider in timer mode with prev/next controls
<script type="text/javascript"> $(document).ready(function(){ $('#bs0').backslider({ photoSource: 'none', mode:'timer', effect:'slide', timerDelay: 4000, effectTime: 2000, slidesLoaded: function(){ var bs = $(this); $('<a class="prev-slide" href="#">Previous</a>').click(function(){ bs.trigger('backslider','previous'); }).appendTo(bs.find('.bs-controls')); $('<a class="next-slide" href="#">Next</a>').click(function(){ bs.trigger('backslider','next'); }).appendTo(bs.find('.bs-controls')); } }); }); </script>Hope this helps!
Thank you for the reply. This is getting me very close. Now I only need to add in support for individual bullets for each slide and an active class. I am sorry to ask, but I do believe that this would be helpful for other plugin owners.
Thanks
Hi, i don’t understand how to put
.bs-controlswith az-index:200;for example and why the code is not visible in the page ??? Can you help me ?Hi, .bs-controls div is added by the plugin in runtime. You can see it in web inspector (firebug). “z-index” can be changed in backslider.css
hi there.
can this slideshow autoplay in ‘pagination’ mode? it only shows the first background and stops then waitung for user interaction. i´d rather want it to slide automatically, but users should still be able to watch a certain image via pagination.
thanks!
Hi! Unfortunately there is no default preset for this. What you need to do is to run Backslider in “timer” mode and pagination implement via the plugin’s API functions.
Can the images be referenced within the HTML, or do you have to reference them within the jQuery code?
Hi! Please clarify what you mean.
Don’t worry, I’ve figured it out. Great script, thanks
Hello, how active mode: timer with mode: controls? I need to leave the mode timer function with the ability to change the images with two #div next and previous. How can I do?
Hello! This already have been discussed a while ago. You need to switch Backslider to “timer” mode (primary) and the use its API to call next/prev events. If you look previous comments I’ve even provided javascript code for this (user adamr415)
hi there.
what’s the difference between “startslide:0” and “startrandom: true”? can i use both at the same time? what does “photoRange” mean?
btw: i always get one background loaded and then it flickers black and ‘jumps’ to the next image. after that everything goes on smooth and nicely. but why is there this ‘jumping transition’ between the loading image (actually the last image in the
<li />) and the first smooth background?thanks and greetings!
Hello,
The logic is following. If “startRandom” is set to true backslider will start with random image. If it’s false backslider will start with slide that has index equal to “startSlide” option (default 0).
I need to have a look on this. Could you provide me with URL to the page with backslider?
ok, thanks. wrote you an email containing the link…
just to let you all know: this is 5 star support! ,-) all problems solved, THANKS!
Is it possible to have clickeable arrows to scroll the background images as well as having them on autoplay? I’ve seen numerous sliders out there that do this.
Please see my reply to “adamr415” client a while ago. I provided JS code to add arrows in “timer” mode.
Anyway, due to so many requests, I will add this functionality to my plugin in future update.
That works an absolute treat! Thank you.
Hello!
First, perfekt work!! But, I have one question, I ve implement the next-prev-code-exampel from above, all ok
But on IE 7/8/9, the images dont fading such in FF, they be displayed pic by pic without fading.
If I click on “next”, so the next picture slide in, but stop after 25%, waits any seconds and then slide in the next picture of the show. I hope you understand what I mean
$(document).ready(function(){ $('#bs0').backslider({ photoSource: 'none', mode:'timer', effect:'slide', timerDelay: 4000, effectTime: 2000, slidesLoaded: function(){ var bs = $(this); $('<a class="prev-slide" href="#">Previous</a>').click(function(){ bs.trigger('backslider','previous'); }).appendTo(bs.find('.bs-controls')); $('<a class="next-slide" href="#">Next</a>').click(function(){ bs.trigger('backslider','next'); }).appendTo(bs.find('.bs-controls')); } });So my question, i’m false or is it a browser-problem?
Maybe you can help me with an answer.
Best regards, Dion
Hello! I will check this.
Hi!
The problem is, the click on “Next” or “Prev” stops the “Timer”-Mode. Either using “Timer” or “Controls” can be used, both does not work simultaneously. But, both modes simultaneously give no sense. I think, therefore, there is no problem on the slider.
Or can you implement both modes? For example, pause between slides 30 seconds, and manually switch if boring image
Sorry for the inconvenience. Ans sorry for my englisch, its not native.
Best regards, Dionisys
The support I received with this plugin was exceptional. One of the very best providers on Themeforest and the slider itself works great too
Thanks so much for all your help, most appreciated and highly recommended.
hi , febore i bui it, i would like to if possible (and esay) to add some text for each slider? thanks Pierre
Hi! Backslider does not have text captions, but you can easily create them using plugin’s callback API
ok but could you give me an example on how to do it if i buythe plugin..? something like :: $(document).bind(“startslide”,function(){ myfunction($.event.moveFrom); });
?
No, you should use
beforeSlide: function(slide_index){}, // before slide callback afterSlide: function(slide_index){}, // after slide callbackplugin’s callback functions to show/hide captions based on slide_index
thnaks i m gonna try…
Can I use this backslider on a site designed with tables?
Hello! Yes. Backslider has “fixed” position and you can put it behind actual content of your site
Hi, I need add backslider to existing design based html tables but when add only see backslider, my design not see. Can i help?
Regards,
When using the arrow controls for BackSlider, is there a way to make the thumbnail of the next/previous backgrounds to show under the arrows? I’m looking to do something similar to the next and previous arrows on this site http://www.ultranoir.com/en/#!/home/2/
Well. You can use plugin’s callbacks – beforeSlide(), afterSlide() and slidesLoaded() and build such controls, however you should be confident with JS/CSS to do this.
Hi, I don’t want to stretch the images but they have to be fullscreen, but it doesn’t work, the images are always streching by changing the browser.
Thanx
Hi! Sorry, but I don’t understand your problem. My plugin resizes images to fit whatever screen size you have.