Mike Posted October 26, 2018 Share Posted October 26, 2018 I am just testing out the site before I go live with it and I have deleted the scrolling pictures from the Documents section. Can anyone tell me how I add pictures in to the Welcome to store, document, content. I have placed pictures in the content under each other but they don't act as a scrolling banner on the front screen of the store. Many thanks in advance. Mike Link to comment Share on other sites More sharing options...
bsmither Posted October 26, 2018 Share Posted October 26, 2018 Welcome Mike! Glad to see you made it to the forums. When editing the Homepage document, switch the editor to Source mode. It's easier. The code you will want to use, as an example, is: <ul class="bxslider"> <li><a href="{$STORE_URL}/tesa31.html"><img src="{$STORE_URL}/skins/foundation/images/examples/slide4.jpg" title="Promotional Message One" /></a></li> <li><img src="skins/foundation/images/examples/slide5.jpg" /></li> <li><img src="skins/foundation/images/examples/slide6.jpg" title="Promotional Message Two" /></li> <li><img src="skins/foundation/images/examples/slide7.jpg" title="Promotional Message Three" /></li> </ul> This is an unordered list. The first list item shows how the image can be a clickable link. It also shows how to make the image source an absolute (as opposed to relative) URL. The last two list items show how to add some textual material to the image. The images should be 1000x300 pixels. Any other dimensions will require some additional CSS changes to the slider area. Link to comment Share on other sites More sharing options...
Mike Posted October 26, 2018 Author Share Posted October 26, 2018 That's great, Thank you for your help. I knew it wasn't as straight forward as putting the images into the text area. Thanks again. Mike Link to comment Share on other sites More sharing options...
sergempanzu Posted January 7, 2019 Share Posted January 7, 2019 Great stuff Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 10, 2020 Share Posted December 10, 2020 Hi, I've just copied the code bsmither provided and have managed to get the images and links to work, using the correct image size, but it doesn't seem to "scroll" at all. It just puts one picture underneath the last, and so on, on the same page. I'm using Cube Cart 6.4.2. with the e-tone skin Am I doing something wrong? I assumed this would be a rotating banner type thing? Any help would be appreciated. Thank you Link to comment Share on other sites More sharing options...
havenswift-hosting Posted December 10, 2020 Share Posted December 10, 2020 The slideshow uses a system called bxslider and this needs to be included within the skin files fir it to work. E-tone is a very old and unsupported skin and really shouldn’t be used by anyone unless they are a very competent programmer willing to spend a lot of time upgrading and configuring it to work with the latest CubeCart version which IMHO is a complete waste of time and money. Choose a skin that is currently actively supported and developed such as ours or those from @NiteFox- for a little bit of initial outlay you will get a modern skin that works and is supported Ian Link to comment Share on other sites More sharing options...
bsmither Posted December 11, 2020 Share Posted December 11, 2020 The e-Tone skin already comes with a slider mechanism. BXSlider is not necessary. I will be back shortly with instructions on how to switch it on. Link to comment Share on other sites More sharing options...
bsmither Posted December 11, 2020 Share Posted December 11, 2020 In admin, editing the Homepage document, General tab, have "Parse Smarty Tags" enabled. In the Content tab editor, this code will need to be entered: <!-- {* Set the 'url' to an actual web page if desired. Clicking on the image will go there. The 'large' value is the relative URL for the image of normal size. The 'source' value is the relative URL for the image of a low-compressed size. The 'alt' value is a phrase to show when there is no image available. The last array does not have a trailing comma. *} {assign scope="global" var="SLIDES" value=[ [ 'url' => '', 'large' => 'skins/e-tone/images/examples/slide1.jpg', 'source' => 'skins/e-tone/images/examples/slide1.jpg', 'alt' => '' ], [ 'url' => '', 'large' => 'skins/e-tone/images/examples/slide2.jpg', 'source' => 'skins/e-tone/images/examples/slide2.jpg', 'alt' => '' ] ]} {assign scope="global" var="SLIDE_SPEED" value=500} {assign scope="global" var="SLIDE_TIMEOUT" value=2000} --> OR... You can copy the BXSlider javascript file from Foundation, and edit the main.php template to include it in the list of scripts to load (see near line 157) and add the following statement just above the </script> tag: $('.bxslider').bxSlider({auto:true,captions:true}); Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 11, 2020 Share Posted December 11, 2020 18 hours ago, bsmither said: In admin, editing the Homepage document, General tab, have "Parse Smarty Tags" enabled. In the Content tab editor, this code will need to be entered: <!-- {* Set the 'url' to an actual web page if desired. Clicking on the image will go there. The 'large' value is the relative URL for the image of normal size. The 'source' value is the relative URL for the image of a low-compressed size. The 'alt' value is a phrase to show when there is no image available. The last array does not have a trailing comma. *} {assign scope="global" var="SLIDES" value=[ [ 'url' => '', 'large' => 'skins/e-tone/images/examples/slide1.jpg', 'source' => 'skins/e-tone/images/examples/slide1.jpg', 'alt' => '' ], [ 'url' => '', 'large' => 'skins/e-tone/images/examples/slide2.jpg', 'source' => 'skins/e-tone/images/examples/slide2.jpg', 'alt' => '' ] ]} {assign scope="global" var="SLIDE_SPEED" value=500} {assign scope="global" var="SLIDE_TIMEOUT" value=2000} --> OR... You can copy the BXSlider javascript file from Foundation, and edit the main.php template to include it in the list of scripts to load (see near line 157) and add the following statement just above the </script> tag: $('.bxslider').bxSlider({auto:true,captions:true}); Thank you very much for all this. I have attempted plan B (after I couldn't get plan A to work)- copying the javascript and editing the main.php adding in the statement as shown below - but it doesn't seem to be working. Do I need to edit main.php somewhere else to include it in the list of scripts to load? I really appreciate you helping me with this. Adam 21 hours ago, havenswift-hosting said: The slideshow uses a system called bxslider and this needs to be included within the skin files fir it to work. E-tone is a very old and unsupported skin and really shouldn’t be used by anyone unless they are a very competent programmer willing to spend a lot of time upgrading and configuring it to work with the latest CubeCart version which IMHO is a complete waste of time and money. Choose a skin that is currently actively supported and developed such as ours or those from @NiteFox- for a little bit of initial outlay you will get a modern skin that works and is supported Ian Thank you Ian. As you can probably tell, I'm not a very competent programmer. I wasn't aware e-tone was so old and unsupported. I chose it because it popped up in the extensions options and I liked the look of it when compared to the "foundation" "kurouto" and "minimaliser" skins I've tried before. I'm just trying to make my site look a little more professional, and don't have the money to buy some of the newer, or more supported skins at the moment, so am taking the opportunity to learn as I go along. E-tone seems to be working ok for my needs, I just want to jazz it up a bit if possible! I'll have a look at some of the skins you have suggested, I certainly understand the value they offer, and maybe I'll find one I can switch to in the future. Thanks again for your reply. Adam Link to comment Share on other sites More sharing options...
bsmither Posted December 11, 2020 Share Posted December 11, 2020 Assuming you put the BXSlider plugin in the skin's /js/ folder, there are three more things to do: 1. Edit the skin template main.php: From: {/literal} "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js" {literal} ]); To: {/literal} "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/jquery.bxslider.js" {literal} ]);$('.bxslider').bxSlider({auto:true,captions:true}); Also in this file, near the top: From: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" /> To: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/jquery.bxslider.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" /> Need to have the template load the BXSlider javascript file, then a statement to start the BXSlider. The template also needs to load the BXSlider CSS file. 2. Copy the jquery.bxslider.css file from Foundation's /css/ folder to e-Tone's /styles/ folder. 3. Copy the /bxslider/ folder from Foundation's /images/ folder to e-Tone's /images/ folder. That should be it. Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 12, 2020 Share Posted December 12, 2020 12 hours ago, bsmither said: Assuming you put the BXSlider plugin in the skin's /js/ folder, there are three more things to do: 1. Edit the skin template main.php: From: {/literal} "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js" {literal} ]); To: {/literal} "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js", "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/jquery.bxslider.js" {literal} ]);$('.bxslider').bxSlider({auto:true,captions:true}); Also in this file, near the top: From: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" /> To: <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-vertical.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/superfish-mobile.css" media="screen and (max-width:650px)" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/jquery.bxslider.css" media="screen" /> <link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/icomoon/style.css" /> Need to have the template load the BXSlider javascript file, then a statement to start the BXSlider. The template also needs to load the BXSlider CSS file. 2. Copy the jquery.bxslider.css file from Foundation's /css/ folder to e-Tone's /styles/ folder. 3. Copy the /bxslider/ folder from Foundation's /images/ folder to e-Tone's /images/ folder. That should be it. Hi bsmither, Thanks a lot for all that. I've followed each step, and double checked everything is correct and in the right place, but it still just seems to be just stacking images going down the page. Link to comment Share on other sites More sharing options...
bsmither Posted December 12, 2020 Share Posted December 12, 2020 Do you have a web address we can look at? Link to comment Share on other sites More sharing options...
havenswift-hosting Posted December 13, 2020 Share Posted December 13, 2020 On 12/11/2020 at 9:25 PM, Adam Shaw said: I liked the look of it when compared to the "foundation" "kurouto" and "minimaliser" skins I've tried before. Foundation is free and is continuously updated for new CubeCart releases but it was never designed to be used as it is but rather as a starting point for development. Kurouto and minimaliser are just as old and unsupported On 12/11/2020 at 9:25 PM, Adam Shaw said: don't have the money to buy some of the newer, or more supported skins at the moment, so am taking the opportunity to learn as I go along. While learning is always good and to be commended, unfortunately using old skins that arent supported and dont contain most updates from the last 2/3/4 years will cost you a lot more in the medium / long run and in addition most of these old skins, look well, OLD ! Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 13, 2020 Share Posted December 13, 2020 On 12/12/2020 at 3:18 PM, bsmither said: Do you have a web address we can look at? Of course - www.diffgif.co.uk The page I'm trying to get the banner to work on is hidden at the minute - www.diffgif.co.uk/test.html Thank you Link to comment Share on other sites More sharing options...
bsmither Posted December 13, 2020 Share Posted December 13, 2020 I see in the main.php template, where the addition of the jquery.bxslider.php line was added to the list of scripts to load, the statement above it does not have a trailing comma. Please add a trailing comma after the ending quote mark. "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js", <--- comma! That should be the fix. Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 13, 2020 Share Posted December 13, 2020 35 minutes ago, bsmither said: I see in the main.php template, where the addition of the jquery.bxslider.php line was added to the list of scripts to load, the statement above it does not have a trailing comma. Please add a trailing comma after the ending quote mark. "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js", <--- comma! That should be the fix. Thanks for looking at that so quickly. I've added the comma, but it's still just stacked. 7 hours ago, havenswift-hosting said: Foundation is free and is continuously updated for new CubeCart releases but it was never designed to be used as it is but rather as a starting point for development. Kurouto and minimaliser are just as old and unsupported While learning is always good and to be commended, unfortunately using old skins that arent supported and dont contain most updates from the last 2/3/4 years will cost you a lot more in the medium / long run and in addition most of these old skins, look well, OLD ! You see...you learn something every day! I thought, as I was taking these things straight from the CubeCart extension marketplace that they would be up to date. I've had a look at your website, and would like to see some examples of the 3 skins you offer. I've located them on your site, but I can't find any way to see them "in action". My current hosting package is paid until August 2021, but i'd be interested in finding out more about your hosting, the levels of support for things like SEO and the advice on "other plugins and code snippets which might meet my requirements" Thanks Adam Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 13, 2020 Share Posted December 13, 2020 25 minutes ago, Adam Shaw said: I've had a look at your website, and would like to see some examples of the 3 skins you offer. I've located them on your site, but I can't find any way to see them "in action". Thanks Adam Please disregard this bit, I've found the example website via extensions, but couldn't work out how to change the skin from "Retail Therapy" Link to comment Share on other sites More sharing options...
bsmither Posted December 13, 2020 Share Posted December 13, 2020 I see the problem now is that the command to start the BXSlider: $('.bxslider').bxSlider({auto:true,captions:true}); is being executed before Modernizr loads the actual script, even though the loader is above the start command. So, let's do it this way instead: In the file script.js, make this edit: From: $(document).ready(function(){ $('ul.sf-menu').superfish(); }); To: $(document).ready(function(){ $('ul.sf-menu').superfish(); $('.bxslider').bxSlider({auto:true,captions:true}); }); Then, in main.php, remove the recently added: $('.bxslider').bxSlider({auto:true,captions:true}); and change the order of filenames: "https://www.diffgif.co.uk/skins/e-tone/js/enquire.min.js", "https://www.diffgif.co.uk/skins/e-tone/js/superfish.js", "https://www.diffgif.co.uk/skins/e-tone/js/jquery.bxslider.js", "https://www.diffgif.co.uk/skins/e-tone/js/script.js" Because script.js has changed, you may need to force your browser to reload page resources. Link to comment Share on other sites More sharing options...
Adam Shaw Posted December 13, 2020 Share Posted December 13, 2020 1 hour ago, bsmither said: I see the problem now is that the command to start the BXSlider: $('.bxslider').bxSlider({auto:true,captions:true}); is being executed before Modernizr loads the actual script, even though the loader is above the start command. So, let's do it this way instead: In the file script.js, make this edit: From: $(document).ready(function(){ $('ul.sf-menu').superfish(); }); To: $(document).ready(function(){ $('ul.sf-menu').superfish(); $('.bxslider').bxSlider({auto:true,captions:true}); }); Then, in main.php, remove the recently added: $('.bxslider').bxSlider({auto:true,captions:true}); and change the order of filenames: "https://www.diffgif.co.uk/skins/e-tone/js/enquire.min.js", "https://www.diffgif.co.uk/skins/e-tone/js/superfish.js", "https://www.diffgif.co.uk/skins/e-tone/js/jquery.bxslider.js", "https://www.diffgif.co.uk/skins/e-tone/js/script.js" Because script.js has changed, you may need to force your browser to reload page resources. Its working!!!! Thank you so much bsmither for sticking with me and getting this going, it's much appreciated. Link to comment Share on other sites More sharing options...
havenswift-hosting Posted December 14, 2020 Share Posted December 14, 2020 14 hours ago, Adam Shaw said: You see...you learn something every day! I thought, as I was taking these things straight from the CubeCart extension marketplace that they would be up to date. There is absolutely no guarantee that any extension in the marketplace (skins or plugins) are updated or supported - there are a great number that had an initial release and the developer has disappeared. You always need to check the date it was last updated - it is possible for plugins to sometimes go many months (or longer) without needing an update but skins should really be updated with many CubeCart core updates, especially major version changes for example the recent 6.2.X to 6.4.X update I will contact you via PM regarding the other questions Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.