foz1234 Posted December 6, 2016 Share Posted December 6, 2016 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 6, 2016 Share Posted December 6, 2016 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. Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 6, 2016 Author Share Posted December 6, 2016 i was just popping back to say i had it working now in products, thanks mate, yes it was the test images causing the problem i figured it out before i read you post thanks again mate for your fast reply. . Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 7, 2016 Author Share Posted December 7, 2016 Can i alter the timer speed for next jpg? looked in the java and css tried changing a few settings that refer to speed etc but none seem to change it thanks Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted December 7, 2016 Share Posted December 7, 2016 I'm guessing the setting is in the skin/js/vendor/jquery.bxslider.min.js file, but I would only be guessing as to which settings to change. You could make a backup copy of the original for safe keeping and play around with it. Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 7, 2016 Author Share Posted December 7, 2016 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 7, 2016 Share Posted December 7, 2016 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). Quote Link to comment Share on other sites More sharing options...
havenswift-hosting Posted December 8, 2016 Share Posted December 8, 2016 Slider speed is one of many aspects that can easily be controlled within our Skin Configuration plugin - see https://www.cubecart.com/extensions/plugins/havenswift-hosting-skin-configuration. Of course this plugin won't work unless you are using a skin that has been built to use it Ian Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 8, 2016 Author Share Posted December 8, 2016 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. Quote Link to comment Share on other sites More sharing options...
ayz1 Posted December 8, 2016 Share Posted December 8, 2016 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. Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 8, 2016 Author Share Posted December 8, 2016 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 Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 8, 2016 Share Posted December 8, 2016 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. Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 8, 2016 Author Share Posted December 8, 2016 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> </p> Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 8, 2016 Share Posted December 8, 2016 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 8, 2016 Share Posted December 8, 2016 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}--> Quote Link to comment Share on other sites More sharing options...
foz1234 Posted December 9, 2016 Author Share Posted December 9, 2016 As always Brian thank you for your time spent helping working as described your an absolute gentleman Thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.