jQuery Slider Header

Does anyone know how to sort this one out?

I've been trying to insert a jQuery slider into my main page, to resemble this one.
I've tried a few of the recommendations on the forum but no luck so far.

Using v. 1.3.9c

All suggestions appreciated.

:frusty:

what slider are you using ? any link to your site ? what recommendation have you followed?

Hi,

Thanks for replying.

I'm using the s3Slider, and following the instructions given for it by user Get Em Fast under the thread Flash Banner posted today.

I've followed all the advice but still no luck.

One thing that wasn't mentioned was which folder the slider pulls the images from, so I have placed the images in the template images folder as well as the main includes folder just in case.

The instructions also said to place the HTML in the define_main_page.php file, but didn't specify whether this should be the entire html file or just the slider snippet.

So I could be making mistakes in lots of places.

I'm developing the installation on the XAMPP server before uploading it so I haven't got a url for you to have a look at yet.

i assume you have your custom template and you know about override .. so
download jquery.js and s3slider.js and rename them as
jscript_jquery.js
jscript_s3slider.js
copy both files and place them in jscript folder .
create another js in jscript folder and name it some thing like jscript_xslider.js
this script should only contain following code

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

zencart will load those script automatically and place them in head section of your page .
now to CSS.
create a file with name starting with stylesheet like stylesheet_s3slider.css and this file will contain all CSS rules for this slider . this file needs to be in CSS folder.

the following code will be inserted in your define_main_page.php ..

<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="#" /> <span>Your text comes here</span> </li> <li class="s3sliderImage"> <img src="#" /> <span>Your text comes here</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>

you should insert this code while in source view of your editor ..

thanks for your help, but still haven't cracked it yet.
I think I'll try to find another version that might be easier to implement.

:unsure:

Ok, managed to get it done using the jQuery cycle plugin and a css based slideshow div.
You have to edit the tpl.header file in the template folder then the css file to implement the div.
All of the javascript goes into the tpl.header file under the headerContent div.
:D

Thanks for the post back on the fix.. :smile:

I am having a similar issue with the Jquery cycle plugin. I have my css, jscripts, everything in the correct place and named correctly.

I do not see a "headerContent" div to insert the script. I have placed the code into my main page and the images are showing but the cycle plugin is not working.

Any help would be greatly appreciated! I am a first time zenner and jumped into the deep end lol

here is the site I am currently working on with this plugin http://www.bellasurjewelry.com/store/