Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Product slideshow for your X-Cart homepage

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 10-21-2011, 09:17 PM
  Mish's Avatar 
Mish Mish is offline
 

Advanced Member
  
Join Date: Feb 2008
Posts: 92
 

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

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.
__________________
X-Cart Gold 4.6.1
Reply With Quote

The following 3 users thank Mish for this useful post:
am2003 (10-22-2011), jhind (10-23-2011), pauline (11-02-2011)
  #2  
Old 10-22-2011, 11:48 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default Re: Product slideshow for your X-Cart homepage

Looks interesting.. I'll have to check it out more when I get the time.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #3  
Old 11-15-2011, 10:20 PM
 
yorgoo yorgoo is offline
 

Newbie
  
Join Date: Nov 2011
Posts: 1
 

Default Re: Product slideshow for your X-Cart homepage

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/
__________________
X-Cart Gold 4.4.4
Reply With Quote
  #4  
Old 05-05-2012, 05:48 PM
  designtheweb's Avatar 
designtheweb designtheweb is offline
 

Senior Member
  
Join Date: Mar 2005
Location: Sydney Australia
Posts: 132
 

Default Re: Product slideshow for your X-Cart homepage

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.
__________________
"The more you know - the less you pay"

Various websites using

4.66 Pro & 5
Reply With Quote
  #5  
Old 08-22-2012, 11:50 AM
 
Loryn Loryn is offline
 

Advanced Member
  
Join Date: Mar 2011
Posts: 49
 

Default Re: Product slideshow for your X-Cart homepage

Yea, this is breaking in 4.5 ideal comfort template too...any tips??
__________________
X-Cart version 4.5
http://rjonlinestore.com
Reply With Quote
  #6  
Old 09-07-2012, 11:19 PM
  Mish's Avatar 
Mish Mish is offline
 

Advanced Member
  
Join Date: Feb 2008
Posts: 92
 

Default Re: Product slideshow for your X-Cart homepage

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.
__________________
X-Cart Gold 4.6.1
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:18 AM.

   

 
X-Cart forums © 2001-2020