Jump to content

[Resolved] sliders on home page


foz1234

Recommended Posts

On a new cube cart installation there were 3 sliding pictures from memory, pretty sure this was the source code i copied out in case i ever required it again.

<ul class="bxslider">
 <li><img src="skins/foundation/images/examples/slide1.jpg" title="Promotional Message One" /></li>
 <li><img src="skins/foundation/images/examples/slide2.jpg" /></li>
 <li><img src="skins/foundation/images/examples/slide3.jpg" title="Promotional Message Two" /></li>
</ul>

 i would like to use this in 2 places if possible? i would like to add it to the top of categories section, as i use sub categories and at the top of a few of my products but it does not seem to work correctly other than the front page.

i assume its got some sort of java and css for it somewhere any pointers on how to get this working in these 2 locations please ?

Foundation skin

ok I've found the jquery.bxslider.css but not sure why it will not work on products items ?

thanks

 

 

 

 

Link to comment
Share on other sites

My experiments show that it does work. One just has to get the URL to the images correct.

The seo-friendly URL is confusing the browser into thinking the images (a relative URL in the code) is at a folder which path starts with the friendly name of the category.

Something needs to be added to sort that.

Link to comment
Share on other sites

i think I've found it DB, i changed the pause time here:-

autoControlsSelector:null,auto:!1,pause:4e3

from 4e3 to a value 7000 and that seems to be working, hopefully if incorrect someone will tell me.

this is just on my test store currently but i will be moving it across to my working store tomorrow now i have it all working as i wanted.

thanks for your reply 

Link to comment
Share on other sites

12 hours ago, bsmither said:

The options for the bXSlider are at http://bxslider.com/options

You would code


<script>
  $('.bxslider').bxSlider({pause:7000});
</script>

somewhere in the product description (using Source mode of the editor).

 

This does not seem to work Brian, I've entered it in to a product description using source mode and saved. I've also popped the js back to the original un-edited file but it seems to be changing 3-4 seconds again after reopening the store front refreshing the product page.

Link to comment
Share on other sites

31 minutes ago, ayz1 said:

Try https://forums.cubecart.com/topic/51474-bxslider-change-time-slides-are-on-screen/#comment-219006

Sorry should have read all of the post. I can see now that you have tried that.

 

Arr yes i wished i had searched ,more and found that before trying all the speed settings etc in the js file yesterday lol, yes i discovered this setting and this seems to work fine although Brian is cubecart god... and if he says his script will work his amendment always do, its normally me that's implemented them incorrectly :) 

i can always go back to editing the js file but rather edit the product html if possible save changing js on future cc upgrades

   

Link to comment
Share on other sites

49 minutes ago, bsmither said:

The js statement is using a selector of anything that has the class="bxslider".

Please confirm the <ul> tag holding the list of slides has that class.

<ul class="bxslider">
 <li><img src="/test/images/source/test_slider/test2.jpg" /></li>
 <li><img src="/test/images/source/test_slider/test3.gif" /></li>
 <li><img src="/test/images/source/test_slider/test4.jpg" /></li>
 <li><img src="/test/images/source/test_slider/test5.jpg" title="Promotional Message Two" /></li>
</ul>
<script>
  $('.bxslider').bxSlider({pause:7000});
</script>

<p>&nbsp;</p>

Link to comment
Share on other sites

I misunderstood a few things.

In calling the bxSlider function, this restarts the functionality with those settings given to it. Additional or different settings do not aggregate together with other calls to the function.

So, when the call is made in the product description, it is also true that the jQuery plugin hasn't even run to instantiate the BXSlider functionality.

Later, after the plugin has run, the call at the bottom of the main.php template restarts the slider functionality with new settings. So, nothing apparently changes.

Let's do this:

1. In the file /skins/foundation/css/jquery.bxslider.css, near line 30, find:

.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}

Remove those lines.

At line 13, add the following:

[class^="bxslider"] {
  margin: 0;
  padding: 0;
}
ul[class^="bxslider"] {
  list-style: none;
}

This allows us to use a class name that starts with bxslider, possibly having more of a class name so that we can apply different settings to different objects, but all objects having the same CSS rules.

2. In the HTML (Source mode if using the editor for a product description or document):

<ul class="bxslider_homepage">
	<li><img src="skins/foundation/images/examples/slide1.jpg" title="Promotional Message One" /></li>
	<li><img src="skins/foundation/images/examples/slide2.jpg" /></li>
	<li><img src="skins/foundation/images/examples/slide3.jpg" title="Promotional Message Two" /></li>
</ul>
<!--{literal}-->
<script>
  $(window).load(function(){ $('.bxslider_homepage').bxSlider({auto:true,captions:true,pause:1000}); });
</script>
<!--{/literal}-->

This example is the HomePage document. The first five lines is stock CubeCart HomePage content with the exception that there is a more specific class name.

In later versions of CubeCart 6, there is the option of having document content go through the Smarty parser (not - yet - for product and category descriptions). So, it is important for any content enclosed in braces be escaped with {literal}. This includes CSS rules, javascript, and normal content that would use braces.

Your efforts are aimed at product descriptions, which do not go through the Smarty parser (yet), but it is still a good idea to escape the script.

The {literal} tags are then enclosed in HTML comments so that {literal} won't be seen in the final display.

We use $(window).load() to have the browser execute this but only after the page and all its resources are loaded and executed. That is, because the BXSlider plugin is loaded and executed at the bottom of the page, we need to wait for that to finish before actually calling the function higher up in the page.

As I said earlier, we need to give the targeted object a complete set of options. That target is bxslider_homepage in example above, but yours might be bxslider_p723 for the product having product_id 723.

Link to comment
Share on other sites

We can get away from having to edit the plugin's css file by applying specific css rules to the targeted object.

<!--{literal}-->
<script>
  $(window).load(function(){ $('.bxslider_homepage').bxSlider({auto:true,captions:true,pause:1000}); });
</script>
<style scoped>
  .bxslider_homepage{margin:0;padding:0;}
  ul.bxslider_homepage{list-style:none;}
</style>
<!--{/literal}-->

 

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