I'm trying to get javascript image slidershows to work in Ablecommerce.
The problem I'm running into is having to split the header away from the content. There are three types of sliders I've found, one where you reference the javascript entirely in the <head> which doesn't work for me assuming because AC is splitting the sections into parts. I.e. the <head> is contained within the Standard Header page and the actual images is contained within the Home Page page. Since it works in a standard HTML document just fine, I know the issue is with AC, perhaps because of this split I mention but really no clue.
The second type of slider is one that gets written immediately after the images in the content, so it is kept with the images in the Home Page page. This seems to work, but the actual slider I've found is not customizable so while it functions, it does not work aesthetically.
The third type of slider I've found is one where you call the javascript immediately before the closing <body> and this, like the header, doesn't seem to work because it is in a separate file than the images.
Please, if anyone knows how to get a slider working with AC I'd greatly appreciate any advice. I'm already behind since I've been working on this slider for two days, never used AbleCommerce before in my life and just had it thrown upon me, and getting extremely frustrated with the way the whole thing is set up. All I need is a basic, style-less slider that I can use three images of h-400px, w-1000px, to slider left. Simple, but no go anywhere I look and everything I try.
Thanks for any help.
How to get javascript image slideshows to work
Re: How to get javascript image slideshows to work
Okay, so new question. How do you control your site's doctype in AC? I have determined that every slider I come across is using a different doctype than what AC is putting into my site. How do i change the doctype I'm using?
Re: How to get javascript image slideshows to work
That's crazy. That was the first one i had in there when I built the site in static HTML. Once I brought it over to AC it stopped working completely because of the javascript in the header.
Re: How to get javascript image slideshows to work
Try it again and remove this line...
That was what was giving me errors, I removed it and it works smashingly.
Code: Select all
script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script Re: How to get javascript image slideshows to work
Thanks, crazyjoe. I'm not able to test right now but I will and see if that works.
Re: How to get javascript image slideshows to work
It took me a little while to figure out how Able dealt with html <head>. If you are using the Scriptlet Editor in the Admin section, then put whatever needs to be between <head></head> in the box labelled "Header". If you like to edit pages in a text editor or IDE, then you need to make sure that the Scriptlet is layed out properly. At the top of the .htm scriptlet file, there is a section that looks like a little bit like this:
The default is to only have <Description>. Able's scriptlet editor puts whatever is in the "Header" box between the <HeaderData> tags, so if you are doing it all by hand, you'll have to include them yourself. In both cases, Able will automatically put whatever is between <HeaderData></HeaderData> in the <head> section when it loads the page.
In the code below, you can see where I have called the javascripts needed. I also use conditional stylesheets for certain versions of IE, so there is an example of that as well.
Also remember that you dont need any <html> or <body> tags for scriptlets, as the Able engine takes care of this for you. (Layout scriptlets might need <body>, not real sure. I have them in there, but I have custom styles on my <body>)
Code: Select all
<!--
<Description>
</Description>
<HeaderData>
</HeaderData>
-->The default is to only have <Description>. Able's scriptlet editor puts whatever is in the "Header" box between the <HeaderData> tags, so if you are doing it all by hand, you'll have to include them yourself. In both cases, Able will automatically put whatever is between <HeaderData></HeaderData> in the <head> section when it loads the page.
In the code below, you can see where I have called the javascripts needed. I also use conditional stylesheets for certain versions of IE, so there is an example of that as well.
Code: Select all
<!--
<Description>
Displays the standard store header.
</Description>
<HeaderData>
<script type="text/javascript" src="https://www.google.com/jsapi?key=xxxxx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/App_Themes/BarknPurr/nav-help.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!--[if lt IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="/OtherStyles/styleie8.css" type="text/css" media="screen" />
<![endif]-->
</HeaderData>
-->Re: How to get javascript image slideshows to work
Hey, Mouse. Thanks for that. I was already putting everything in the header inside the header area of the scriptlet. There was nothing in the body. So I think that's what I'm supposed to be doing. I actually got it to work. I think it was by Crazyjoe's way and deleting that one line of code from the HTML.