rewish / jquery-bgswitcher Goto Github PK

I am getting background repeats on Android. I am not sure how to change the css as you suggest as there is no id or class on the created div.

I had a concrete5 site that had a div with an external api form that the client wanted a fullwidth slideshow in the background of that div. So I gave your js a try. I found in Safari and Ipad Safari the fade didn't work. So I came up with a two part work around.

I modified your js around line 288 with
/**
* Setup background element
*/
_setupBackgroundElement: function() {
this.$bg = $(document.createElement('div'));
this.$bg.css({
position: 'absolute',
zIndex: (parseInt(this.$el.css('zIndex'), 10) || 0) - 1,
overflow: 'hidden',
'-webkit-transition': 'background 3s ease-out 2s',
'-moz-transition': 'background 3s ease-out 2s',
'-o-transition': 'background 3s ease-out 2s',
transition: 'background 3s ease-in-out 2s'
});

and then added a preloader in the js where I called jquery-bgswitcher

$(".booking-hero").bgswitcher({
images: jArray,
//images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"], // Background images
effect: "fade", // fade, blind, clip, slide, drop, hide
interval: 8000, // Interval of switching
loop: true, // Loop the switching
shuffle: false, // Shuffle the order of an images
duration: 800, // Effect duration
easing: "swing" // Effect easing
});

function preload(jArray, index) {
index = index || 0;
if (jArray && jArray.length > index) {
var img = new Image ();
img.onload = function() {
preload(jArray, index + 1);
}
img.src = jArray[index];
}

/* images is an array with image metadata */
preload(images);
}

Now the transition fade is working smoothly without a black flash on Safari Mac, Safari Ipad and my android phone.

Thanks!

Hi,

this module is magnificant, and not lying :)

I using jQuery Backstretch, which is too good, but it uses img tag istead css background, and its deformed background on iOS and Adnroid tablet.

But that module have great thing like pause and seek to image on index position.

Do you plan to add something like that? Pause could be simulate with stop and play. But seeking not.

Regards!

Hi, Rewish.
Just found out that on chrome the background is repetitly dowloaded from the server when you change background, wich result an ugly effect for heavy images.
Example : bonjouraurevoir.fr

Can't you force chrome to use cached images ? (maybe like firefox and safari already does ?)

Doest not seem to appear on firefox and safari.

jQuery Version : 1.9.1
bgSwitcher Version : 0.4.3
Chrome on Mac Version : 34.0.1847.116

EDIT : Resolved by the chrome version 34.0.1847.131

hi all,

basically, the div that receives the images for the switching, can't have a css style of "border-radius". Somehow that can't be added to the div. What can I do for this?

hello
I needed to get a callback after switching background (to change pagination active item)
I added

this.$el.trigger('switchcomplete', [this.index]);

at the end of the switching function (l. 277)
may be this point could be added to your plugin
regards

Hello All,

I really like your library ...

I have only one Problem ... If I pass the function a complete path for the Image it
Will NOT load the Image ...
Can Someone Help.??

if I set Image {"images/picture011.jpg", "file:///mnt/sdcard/nicepic.jpg" )
Image relative location works fine image two does NOT and I have test the image and the path
with a normal command in the software.
I can even Load the Image onto the screen with the full path and it display fine before I start
the library ... But it will not display images with full path in the library ...
Example Code ...
This code works fine :

            // set the two images
            $('.box').bgswitcher({
                images: ["backgrounds/hat.jpg","background/baby.jpg"],
                effect:"fade" , loop: false , interval: 1, duration: 1000 });
            $('.box').bgswitcher( 'start' ) ;

  This code does NOT work ...
                           I can Set the background image to the complete Path of girl.jpg or boy and 
                          it displays fine But Will NOT show in the Function.

            // set the two images
            $('.box').bgswitcher({
                images: ["file:///mnt/sdcard/girl.jpg","file:///mnt/sdcard/boy.jpg"],
                effect: "fade" , loop: false , interval: 1, duration: 1000 });
            $('.box').bgswitcher( 'start' ) ;

Thanks In advance for any help that can be offered ...

Michael T.

$('body').bgswitcher({
images: ["style/img/0.jpg","style/img/1.jpg","style/img/3.jpg","style/img/4.jpg"],
effect: "fade",
shuffle: "false",
interval: 5000
});

Have you thought about the availability of the installation by Bower?

Hello,

Thanks for this plugin!

I have a problem: Sometimes when loading a page with bgswitcher the images are repeated and spill oust of the container. I've noticed that the div style property contains "repeat". Is there a possibility to make it not repeating?
This happens with Safari, Chrome, FF, IE under os x and win. When reloading the page it usually does not happen.
Do you have a suggestion what I could do?

Thank you!
cat

Demoを拝見したのですが、Blink系のブラウザでは画像切り替え時に一瞬画像が消える不具合が出ております。

対処法などございませんでしょうか？

↓ちなみにこのサイトにある古いバージョンのDemoはシームレスな切り替えができているようです。
http://www.jqueryscript.net/demo/Lightweight-jQuery-Background-Slideshow-Plugin-BgSwitcher/demo/

ちなみにIE11ではこの問題は発生しませんでした。

宜しくお願いいたします。

HI,

Your plugin need Jquery version 1.10 to work, but I must use Jquery 1.3.2 in my project. How can I use your plugin with Jquery 1.3.2. Thanks for making useful plugin

Hi, great plugin :)

I have noticed that the images are repeated on the page, is there an option to stretch the image to fit the page?

Thank you,
John

Is it possible to make images appear better scaled on mobile (eg backgroundSize:cover) ?

I'm having the same issue as mentioned here (wasn't sure if posting to a closed issue was best or opening a new issue was better): #6

The transition seems to work fine on Safari for iOS but there's a Black blink in Chrome for iOS.

Using the current version of Safari on both iPad and iPhone 6 and using Chrome version 39.0.2171.50 on iPad and iPhone 6.

You can see an example on a site I'm working on here: http://lbhrenovations.staging.wpengine.com/galleries/kitchens/

Hi,

The switcher is nice, however currently I am using it in a situation that I need to set the following css properties:
background-repeat
background-position
background-size
padding-bottom
I have them set on the div that I am calling the bgswitcher on but it simply removes and discards them. Can you please add either a way to send them through or a way to add a css class to the new divs? Either way would be helpful.

Thanx,

Is there a way to setup a button to goto a specific slide?

After Initialize the plugin browser always send the request to the server for fetching images again and again. How to get rid out of this?

<div id="test">
<div class="box">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

この時、#testにbackground-colorを指定していると
.boxの背景スライドショーが表示されなくなってしまうのですが、
回避する方法はございますか。
<body>へbackground-color指定する場合は問題なく動作致します。

hello, is it possible to get like the index of the image that is being used right now in the bg switcher? for example i want certain objects to stand out more when a certain background is called. this would look something along the lines of this:

if ($(".bg_div").style.background == "url(some_image.jpg)") {
$(".some_div").style.color = "white";
}
else {
$(".some_div").style.color = "black";

}

however this does not work, could you show me how this can be done?

regards,

laurin

There are many examples I have seen with a zoo, in/out effect, it adds a smoother feel to the presentation. Cheers.

Hi! Great script. I have been able to implement this with no big issues. But it would be great to be able to shorten the time the first image is shown. Now the first image is loaded, and it takes a while for the next image to show. The transition time is what causes this I believe. If this is set to very short (500) the first image is shown about the same time as the rest of the images. But when the transition time is set to 2000 or even more (for a slower dissolve) the first image seems to be shown longer then the other images. This is because the translation time is included in the duration for the next images, but not the first one.

A solution would be to let the script subtract half the duration of the transition from the 'show' duration of the image. Or alternatively make it possible to set the first image duration in the js so this can be done by the user in the configuration.

Thanks for this script!

How to make the images responsive?

I can't get bgswitcher working just following the examples. I checked with jQuery 1.11.4 & 2.1.4 en google chrome 42.0.23 under Debian 7. My Jquery layer is working fine.

I tried then to run the test.html in the package but it fails with resources not found in the lib/sinon directory which is empty.

Is it possible to add a class to the DIV container? It would make it much more flexible for responsive styling.

(ie; background-size: cover works great at larger resolution, but the results are very poor on mobile phones (cover takes into account all the content down the page, resulting in a very small pixelated portion of the background image in visible viewport)

Would it be possible to start the animation with the selected effect. I am initializing the bgswitcher after 10 seconds and wish to have fade in effect from the start.

Will also take my time and check out the code.

とても使いたいのですが、うまく設定できません。

長いページの下部にあるdivまでスクロールしたときに、1度だけ背景を切り替えたいのですが、どのようにせっていすればいいのでしょうか？

お忙しいところ恐れ入りますが、ご回答よろしくお願いいたします。

Hi,
Thanks for script, but i have small problem.
How i can insert actions buttons like next, prev ... :
inside div (.box) ?

Actions not working if i insert inside box div. Please help :).

Hello

What I think the parameters are missing is the background position, which is absolute now making the background scrollable.
And the background position is also always top left 0 0 which is also not always wanted.

thanks

Hi,
I am a bit new to web design so I apologize in advance if there is a quick fix to this.

I believe that all of my code is correct, and so far my initial image is being called in, but the transition to my additional images is not happening.

In the console, I get this: "Uncaught TypeError: undefined is not a function"

/**
 * Switching the background image
 */
switching: function() {
  var started = !!this._timerID;

  if (started) {
    this.stop();
  }

  this._createSwitchableElement();
  this._prepareSwitching();

  this.switchHandler(this.$switchable);

/* The error is marked on this line of code ^ */

  if (started) {
    this.start();
  }
},

Thanks!

I've looked through the code for bgSwitcher and saw that there is a preLoad function for the images. However, on my site there is often a jump between slides on the first load (i.e. before the images are cached) where the background goes white.

Here's the page: http://www.thgcreative.co.uk/senzala/

Is this related to the preLoad funciton? And if so, does this mean the preLoad function isn't working properly?

Thanks,
Russ

I saw your answer in your closed issues. Where does this go to make it responsive?

"CSS = Background-size: cover / contain"

How can I change the background-size from auto to cover??

Thanks for your jquery! good stuff!
I have a doubt... on chrome, images seem to just move right a bit just before the fade transition. So you have an idea of how to fix it?

those versions of IE use background-position-[x/y]
background-position can't be read through ".css(...)" in _copyBackgroundStyles function
so background-position is not copied when using these browsers

There is a little bug with the transition on Chrome iOS.