X-Cart forums - Product slideshow for your X-Cart homepage

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