jquery - changing object attribute after creating instance on document.ready() - php

Question

i'm using the bxSlider plugin (a slider similar to jcarousel) on custom Magento store.
While the slider is istantiated on documet.ready() (in the head html section) by this way:
jQuery('#slider2').bxSlider({
pause: 4000,
auto: true,
autoControls: true,
displaySlideQty: 4,
moveSlideQty: 1
});
I want to change auto attribute to false in the php code if the slider items count is less than 5. I've tried to change it with:
<?php
// slider items count
$prom_count = $this->getPromotionalProducts()->count();;
?>
<?php if($prom_count<5): ?>
<script>
$("#slider2").attr('auto','false');
</script>
<?php endif; ?>
but it doesn't work, so i'm not sure that attribute of objects instantiated on dom ready can be changed by this way. anybody could help?

Answer 1

The attr-method from the jQuery-library works with attributes for HTML-elements:
<img src="..." alt="...">
In this case, src and alt are "attributes".
The bxSlider is configured by giving the bxSlider-function an array. You can't alter this array after it was passed to the function.
What you can do to toggle the auto-show is using bxSlider's stopShow()-function. To probably do this, you'll want to save the bxSlider-instance you created:
var slider = jQuery('#slider2').bxSlider({
...
});
So you can then call the function on this object:
slider.stopShow();
Doing this with PHP and JavaScript in a mixed way (like you suggested) is ugly and should be avoided.
Instead, you should use a JavaScript-only solution:
var slider = jQuery('#slider2').bxSlider({
auto: true,
...
});
if (slider.getSlideCount() < 5){
slider.stopShow();
}
Note that getSlideCount() returns the number of slides, which is not guarantied to be the number of Images in the gallery! The number of slides displayed at once can be set by the displaySlideQty-attribute. The default however is 1.
It seams that there is a Bug which causes the startShow and stopShow-functions not to work: https://github.com/wandoledzep/bxslider/pull/43
As a dirty workaround, you could do something like this:
<?php
echo "<script type=\"text/javascript\">
jQuery('#slider2').bxSlider({
pause: 4000,
autoControls: true,
displaySlideQty: 4,";
if($prom_count >= 5) echo "auto: true,";
echo "moveSlideQty: 1
});
</script>";
?>

Answer 2

Looks like there is no API function for this. Maybe the config will be loaded again if you use reloadShow(). If that does not help you have to read the source code.

Answer 3

That will set the auto attribute on the element it self, not the auto option of the plugin. It doesn't look like the plugin has the ability to change options after you have instantiated it, although I only had a quick look.
Can you not set the right auto value when you run the plugin by putting the php code first?