X-Cart forums

[Mish]

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:

1. jquery.anythingslider.fx.js
2. jquery.anythingslider.fx.min.js
3. jquery.anythingslider.js
4. jquery.anythingslider.min.js
5. jquery.anythingslider.video.js
6. fjquery.anythingslider.video.min.js
7. jquery.easing.1.2.js
8. jquery.min.js
9. swfobject.js

5> Using some FTP software like FileZilla, copy [from the AnythingSlider Zip File] the following files into the /css directory:

1. anythingslider-ie.css
2. anythingslider.css
3. theme-construction.css
4. theme-cs-portfolio.css
5. theme-metallic.css
6. theme-minimalist-round.css
7. 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:

1. default.png
2. cs-portfolio.png
3. construction.gif
4. arrows-minimalist.png
5. 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:

<!-- 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:

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

<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

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

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

#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.

[JWait]

Looks interesting.. I'll have to check it out more when I get the time.

[yorgoo]

The slider breaks the layout in x-cart 4.4 Light & Lucid Theme. Could you please suggest a fix?

I loaded as per your suggestion and the welcome section goes full width as the following featured section. The sidebars show then underneath the featured product section.

Thanks for your help/

[designtheweb]

that's great, worked fine with my version, if it's breaking the code for someone make sure you follow the instructions to the letter. I usually print out instructions then go through them line by line and tick when I have done them. Sounds pretty anal but that's how my mind works, I find it difficult trying to remember everything and flick around from screen to screen. Then I keep a copy of the paperwork for reference, I work on commercial sites so this is pretty crucial.

[Loryn]

Yea, this is breaking in 4.5 ideal comfort template too...any tips??

[Mish]

Sorry folks. A little hard to debug without seeing what's actually happening. I can say that if you get any of the steps even slightly wrong it can have some bizarre outcomes.