Hi all,
I implemented this sliding image slideshow in X-Cart using a standard jquery plugin.
Here is how I did it.
1> Download the AnySlider code.
https://github.com/ProLoser/AnythingSlider/downloads by clicking on the 'DOWNLOAD AS ZIP' button
2> Create a directory called
js off your main x-cart web directory
3> Create a directory called
css off your main x-cart web directory
4> Using some FTP software like FileZilla, copy [from the AnythingSlider Zip file] the following files into the /js directory:
- jquery.anythingslider.fx.js
- jquery.anythingslider.fx.min.js
- jquery.anythingslider.js
- jquery.anythingslider.min.js
- jquery.anythingslider.video.js
- fjquery.anythingslider.video.min.js
- jquery.easing.1.2.js
- jquery.min.js
- swfobject.js
5> Using some FTP software like FileZilla, copy [from the AnythingSlider Zip File] the following files into the /css directory:
- anythingslider-ie.css
- anythingslider.css
- theme-construction.css
- theme-cs-portfolio.css
- theme-metallic.css
- theme-minimalist-round.css
- theme-minimalist-square.css
5a> [Almost forgot!] Using some FTP software like FileZilla, copy [from the AnythingSlider Zip File] the following files into the /images directory:
- default.png
- cs-portfolio.png
- construction.gif
- arrows-minimalist.png
- arrows-metallic.png
6> Create images for each image of the slide show you want. Upload them via FTP to the /images directory (off your main X-cart directory)
7> Go to your X-Cart Admin Menu.
8> Select LANGUAGES>ENGLISH
9> In Apply Filter, type
txt_welcome
10> In the location you want your image slider to work paste the following:
Code:
<!-- jQuery (required) -->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<!-- Optional plugins -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<!-- Add the stylesheet(s) you are going to use here. All stylesheets are included below, remove the ones you don't use. -->
<link rel="stylesheet" href="css/theme-metallic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-round.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-square.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-construction.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-cs-portfolio.css" type="text/css" media="screen" />
<!-- AnythingSlider optional extensions -->
<script src="js/jquery.anythingslider.fx.js"></script>
<script src="js/jquery.anythingslider.video.js"></script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<!-- Required -->
<script type="text/javascript">
$(function(){
$('#slider').anythingSlider({theme : 'cs-portfolio',autoPlay:true, delay:7500}); // add any non-default options here
});
</script>
<div id="slider">
<div><a href="firstlink"><img src="firstimage" /></a></div>
</div>
11> Locate this portion of the code:
Code:
<div id="slider">
<div><a href="firstlink"><img src="firstimage" /></a></div>
Each image in the slide show is specified by a DIV section under the
<div id="slider">. For example the first image (and link) is set with this:
Code:
<div><a href="firstlink"><img src="firstimage" /></a></div>
So lets say that the link to the first product displayed is "/product.php?productid=16145&cat=253&page=1" , you'd put that in place of where I have typed "firstlink". i.e. <a href="/product.php?productid=16145&cat=253&page=1">
Next you need to insert the url of the image you uploaded in step 6
So if it were called "shoe-ad.jpg" , in place of
Code:
<img src="firstimage" />
you'd put <img src="/images/shoe-ad.jpg" />
You then add a new <DIV> for each product [in the same format] you want in the slideshow. Here is the code from my website:
Code:
<div id="slider">
<div><a href="/product.php?productid=16138&cat=250&page=1"><img src="/images/iPad-Kneeboard-Ad.png" /></a></div>
<div><a href="/home.php?cat=254"><img src="/images/iPAD-EFB-ad.png" /></a></div>
<div><a href="/home.php?cat=249"><img src="/images/AirNav-VFR-Ad-Sale.png" /></a></div>
<div><a href="/product.php?productid=16145&cat=253&page=1"><img src="/images/Matchbox-FC1-Ad.png" /></a></div>
<div><a href="/product.php?productid=16144&cat=253&page=1"><img src="/images/NVIS-Pilot-Pen-Ad.png" /></a></div>
</div>
Finally, you'll want to set the size of the slider to the size that you think fits best.
12. On your server edit the file /css/anythingslider.css
Near the top look for:
Code:
#slider {
width: 450px;
height: 250px;
list-style: none;
/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
overflow-y: auto;
overflow-x: hidden;
}
The WIDTH and HEIGHT sections specify the size in pixels. I've changed mine to 450px wide and 250px high. Edit to suit your site!
Hopefully I haven't missed any steps. Had a wine or two
I've also been a software developer for a number of years so if I've not explained something / you don't understand a bit, let me know.
Hope it works for you all.