Jump to content

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.

 

Share this post


Link to post
Share on other sites

Hi,

I edited it in the the main.php from the foundation file but still no result so far

Kind Regards

Wesley

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Hi,

Thx that's already working so where do I start to put pictures in it?

Kind Regards

Wesley

Share this post


Link to post
Share on other sites

The code above suggests that you replace "location/of/slide1.jpg" and the rest with the actual location of the images you want to show.

Share this post


Link to post
Share on other sites

I put the images in /domains/ncom.be/public_html/webshop/skins/foundation/images/examples

Share this post


Link to post
Share on other sites

Change it to:

"skins/foundation/images/examples/slide1.jpg"
"skins/foundation/images/examples/slide2.jpg"
"skins/foundation/images/examples/slide3.jpg"

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Somewhere, you have this:

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

Change to:

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

 

  • Like 1

Share this post


Link to post
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 ) :)

Share this post


Link to post
Share on other sites

In the file /js/styles/jquery.bxslider.css, you must replace controls.png with bx_slider_controls.png.

Line numbers affected are: 106, 114, 143, 157

 

  • Like 1

Share this post


Link to post
Share on other sites

Done that (I thought I did it the first time, but it mustn't have saved correctly), and the file has the correct replacements now, but still not showing a nice arrow. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Fantastic - Many thanks - That's sorted it.  I thought I'd done all of the above, but some of it didn't seem to have saved.

Share this post


Link to post
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...