Code

Discussion on Backslider - Fullscreen Background Image Slider

Discussion on Backslider - Fullscreen Background Image Slider

Cart 884 sales

flGravity supports this item

Supported

This author's response time can be up to 5 business days.

171 comments found.

Thanks for an excellent plugin! It seems to work well on most platforms and browser releases. I have a question though, is there any way I can have a fixed size horizontal header DIV at the top of a page (with a solid background color) and only fill in the entire area below the header DIV? In other words I don’t want it to go underneath the header, but rather start exactly below it vertically on the page.

Here’s what I have and of course the images fill the entire background including underneath the header, chopping off part of the images at the top.

test

If it’s not possible could I hire you to code it?

Thanks! -dave

Hi! I think you just need to make “backslider” container absolutely positioned (rather then fixed) and set its top css position to the height of your header.

OK, I’ll try that. Thanks!

I added:

position:absolute; top:81px;

and it’s just pushed down causing a scroll bar.

Test

The calculated height needs to be (100% browser inner height – 81px). Not sure how to tell your code how to do that. I also tried

bottom:0; top:81px; (no absolute)



but that just truncated the bottom now.
Thanks for any help. -dave

Hello I need to overlay a description on each image, how do I do it ?

Hi, the flickrauth method does not seem to be working. After some debugging it seems that the url_o parameter does not work anymore unless you pass valid api_token and api_sig (generated) parameters. Could you please see if you can fix this?

Yes, if you are sending request to flickr using flickrFeedQuery params then you won’t be able to get url_o image size. For this you need to use flickrAuthQuery params with api_key that you can get in App Garden on flickr.com

I’m using flickrAuthQuery with my api_key from the App Garden and a valid album id for photoset_id. It’s unable to load the images, the JSON response does not contain url_o. My config: $(’.backslider’).backslider({ mode:’timer’, effect:’crossfade’, effectTime: 2000, photoSource: ‘flickrauth’, preload: true, // preload images thumbnailsOpacity: 0.5, // thumbnails opacity (for “thumbnails” mode) thumbnailsTime: 500, // thumbnails animation time (for “thumbnails” mode) startRandom: false, flickrAuthQuery: { // query arguments for “flickrauth” photoSource api_key: ‘xxxxxxxxxxxxxxxxxxxxxxxxxx’, // auth key photoset_id: 1234567890 // set ID } });

Seems you did something wrong, but I don’t see what exactly.. I checked Backslider myself with my own API key and it works just fine. Please contact me privately and give URL to the page with backslider as I need to have a look.

Hi, Nice work! A little problem, the image can not be centered, better add a center function to do the job. In a small windows size(portrait mode), the images are not centered in the window. ( as the screenshot: http://d.pr/i/PhTI )

Thanks! I will take this suggestion into account in next update.

Perfect slider for what I need. I want to buy this slider but I read from your earlier comments that captions are not built in to work with this slider but the use of beforeSlide and afterSlide callbacks can show text. I’m not sure how I would implement that after I buy the script.

I can help you to add captions to my plugin. Contact me using mail form on my profile page and we will discuss this

I sent you the code in email

Hello, great plugin, work with jQuery 1.7.1?

Thanks! yes, it will work.

Hi, is there a chance to make the pictures show random?

Thanks, I got it! I should look first!

Hi, very nice! do you think it will be possible that it will work with CMS Pro? http://codecanyon.net/item/cms-pro-m2-content-management-system/140078

You better ask author of CMS Pro. I can only say that if its possible to embed scripts and css and generate proper markup for my plugin with their CMS, then it will work.

Hi, works almost perfect. The only thing is the controls are always hidden by other objects of the site because ”.backslider” is always in the back, but also the controls are! Any idea?

Set higher z-index for controls, as by default it’s 100. Set it to 1000, like this: .backslider .bs-controls { z-index: 1000;}

do this plugin work in wordpress? please let me know

Hello! This is not wordpress plugin but you can easily embed this script into wordpress theme.

how i can embed the script into wordpress?

You need to use wp_enqueue_style and wp_enqueue_script template tags in your WP theme to integrate plugin.

Hello, does the slider support IE10 ?

Hello! yes

Loving it! One Question, is it possible to use this but not for the whole page. Just a slider in a div? ( not fullscreen ), would be amazing! thanks

Yes, it’s possible. I use it that way in my Noel theme. You can see how I did this (ie. markup/css) right here http://themes.gravitysign.com/noel/#/feel-the-beauty-of-black-white

Hello flGravity, apart from the image can add some text in each Transmit? Greetings

Plugin doesn’t not support text labels/captions by default. You need to use beforeSlide and afterSlide callbacks to show/hide text in appropriate time on every slide.

Hello, Work with jQuery 1.9.1??? Greetings

Hello! Yes, it is!

Firstly, a great plugin that is just what I was looking for! using the callbacks and skip features I can have buttons to show particular slides, and also have those buttons highlight when the slider is automatically scrolling through.

When working with the slider to achieve the above, I just found a tiny bug in the nextSlide and previousSlide functions – after skipping to a particular slide, I noticed that it would show a blank slide when it resumed, then go back to the first slide. It seems in the js where it was doing this.index+1 on lines 345 and 351 it was treating it as a string, and therefore returning 11, 21,31 etc when it should have been returning 2,3,4 etc. I wrapped those parts in a parseInt and it works fine again.. thought I’d let you know or help anyone who had a similar problem.

Thanks for letting me know! This may happen when you pass “string” to the skip() function because it then updates this.index. Make sure you pass a number.

Hi, can I have only one static background image and only change it when a menu item is clicked?
Can I also attach a specific background picture to each menu item?

Yes, its possible. You need to create backslider DIV and add as many images as you have menu items. Then to every menu item add click handler that would fire $('#bs0').trigger('backslider',['skip',3]); . Here bs0 is backslider DIV, 3 is an index of image to show.

Thanks for your fast replay
I just looked at your portfolio and found ‘Animated Background Menu’. Wouldn’t that do the job just fine if it triggers on click instead of hovering?

Hello, great plugin by the way! I need to know if I can resize the height as the images on my website only take up about 30% of space: http://main.marlinrealestate.com/

Also, can the transition between loading images be smoother than what it is currently set at? The default setting shows jumpy white space when loading the images at first. Thanks!

I think if you write me using mail form on my profile page, codecanyon will generate a link for me to check if you have bought any plugin. Anyway, on the site that you provided I don’t see html markup for backslider, that’s why I cannot answer your question.

Really confused. http://main.marlinrealestate.com/? The plugin is clearly visible here.

Sorry I don’t see jquery.backslider.min.js or (min.js) file among JS scripts that your site loads. Also I received email from you with verification code and I see you never purchased any of my plugins. Looks like you use “backstretch” plugin which is not mine!

Hi, In a small windows size, the images in Chrome are not centered in the window and images in Firefox stay at 100% width, not filling the lower half of the window?

Hi! I need to look. Could you give me example?

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.

Right, but my images where stretched, sometimes during I am resizing the window. I tried the same with the demo, there it works fine, at my site it doesn’t work. I am helpless why.

You can give me your site URL and I will take a look, maybe will figure out the problem.

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 need add backslider to existing design based html tables but when add only see backslider, my design not see. Can i help?

Regards,

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey