Jump to content

BXSlider


Wes81

Recommended Posts

For which skin?

Foundation from CC602 needs an edit. Find near the bottom of the template file main.php:
$('.bxslider').bxSlider({captions:true});
Change to:
$('.bxslider').bxSlider({auto:true, captions:true});

For any other skin, follow these instructions:
1. From /skins/foundation/js/vendor/, copy jquery.bxslider.min.js to /js/plugins/.

2. From /skins/foundation/css/, copy jquery.bxslider.css to /js/styles/.

3. Create the folder /js/images/.

4. From /skins/foundation/images/, copy the folder /bxslider/ to /js/images/.

5. Create the new file /skins/YOUR_SKIN/js/bxslider_start.js. The contents of this file will be:
$('.bxslider').bxSlider({auto:true, captions:true});

Decide where you want the slider. For example, let's make the slider appear as part of the Homepage document.

In admin, Documents, edit the HomePage document. Switch the editor to Source mode. The slider list must be in this format:

<ul class="bxslider">
    <li><img src="location/of/slide1.jpg" title="Promotional Message One" /></li>
    <li><img src="location/of/slide2.jpg" /></li>
    <li><img src="location/of/slide3.jpg" title="Promotional Message Two" /></li>
</ul>

Reload the Homepage.

 

Link to comment
Share on other sites

I would like for you make this edit, then test. In the file /classes/gui.class.php:

Find near line 161:
$js = glob('skins/'.$this->_skin.'/'.'{js,scripts}/*.js', GLOB_BRACE | GLOB_NOSORT);
Change to:
$js = glob('skins/'.$this->_skin.'/'.'{js,scripts}/*.js', GLOB_BRACE); // Issue #465 | GLOB_NOSORT);

I see in the HTML of your page that the javascript files are not getting loaded in the proper order. As such, there will be malfunctions.

Once the files are being loaded in the proper order, we will see if the bxslider code will function properly.

Decide where you want the slider. For example, let's make the slider appear as part of the Homepage document.

In admin, Documents, edit the HomePage document. Switch the editor to Source mode. The slider list must be in this format:

<ul class="bxslider">
    <li><img src="location/of/slide1.jpg" title="Promotional Message One" /></li>
    <li><img src="location/of/slide2.jpg" /></li>
    <li><img src="location/of/slide3.jpg" title="Promotional Message Two" /></li>
</ul>
Link to comment
Share on other sites

  • 11 months later...

A little correction for the back-front arrows.

Case: 4. From /skins/foundation/images/, copy the folder /bxslider/ to /js/images/.

must be: 4 The two files from  /skins/foundation/images/bxslider/(bx_loader.gif, controls.png), must be copied to /js/styles/images/ (bx_loader.gif, controls.png) .

Before however doing the above we have to rename the file controls.png to bxcontrols.png and edit the file jquery.bxslider.css renaming in four cases (lines 106-114-143-157) the referred file controls.png to bxcontrols.png   That's all...

Link to comment
Share on other sites

  • 1 year later...

I've just managed to put a carousel of pictures on my website main page,   www.mentalstarters.co.uk   following the above instructions, and this has worked well, apart from  slightly unsightly arrows to the right and left of the graphic - is there any way of making them look neater by any chance.

 

Also it is possible to turn off the auto advance easily, so that the user has to manually advance the slides?

 

Many thanks :)

Edited by Brian T
additional question
Link to comment
Share on other sites

The problem with the left/right arrow buttons is that the file of the controls sprite belongs to a different effect.

Suggest that you edit the /js/styles/jquery.bxslider.css so that the controls.png file called would be bx_slider_controls.png, then copy the controls.png from the Foundation skin, renaming it bx_slider_controls.png. Then force the browser to reload the page's resources.

  • Like 1
Link to comment
Share on other sites

3 hours ago, bsmither said:

The problem with the left/right arrow buttons is that the file of the controls sprite belongs to a different effect.

Suggest that you edit the /js/styles/jquery.bxslider.css so that the controls.png file called would be bx_slider_controls.png, then copy the controls.png from the Foundation skin, renaming it bx_slider_controls.png. Then force the browser to reload the page's resources.

I've done the above, I think, but it didn't work, so I'm not sure what I did wrong.  (I've changed the graphic to manual changing only ok though ) :)

Link to comment
Share on other sites

In the folder /js/styles/, do you have two copies of jquery.bxslider.css -- perhaps one being named something like orig_jquery.bxslider.css?

If so, then styles.php is picking up both copies, with the original taking precedence over the edited.

I am also not finding the file /js/styles/images/bx_slider_controls.png.

Edited by bsmither
  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Please examine the Foundation skin template element.js_foot.php. There is a <script> tag as the last line.

Find this part of that <script> tag:

$('.bxslider').bxSlider({auto:true,captions:true});

Change just that part to:

$('.bxslider').bxSlider({auto:true,captions:true,pause:##1,speed:##2});

So, ##1 is the delay in milliseconds (default 4000) between a transition. And ##2 is the time expended in milliseconds (default 500) in performing that slide transition.

See more options at: https://bxslider.com/options/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...