X-Cart forums

[Katsu]

I'm using Photo Flash Maker and I need to replace the homepage banner pic with a flash banner. I've produced the banner and added required folders 'slides' and 'Res' to public_html, plus the files 'slides.html', 'slides.swf', and 'slides.xml' also in root.

'Slides.xml' gives me the code I need to put in place of the stock banner but I'm not sure in which file and which exact line to enter it.

Previously, code was placed in welcome.tpl and main.css, but that was for an old version so I'm not sure if this applies to 4.7.

Any help appreciated!

Thanks.

[totaltec]

Katsu,
I don't think you want to do anything with Flash. Since you are building a mobile optimized site, adding Flash would be a mistake in my opinion. Flash truly is dead as Steve Jobs said.

If you want a slideshow, I recommend Owl Carousel or Flexslider.

[Katsu]

Seems you're right again Mike. I should have remembered that - all the security risks and other problems.

What's the best option for a rotating banner? HTML5?

[anandat]

Originally Posted by totaltec

Katsu,
I don't think you want to do anything with Flash. Since you are building a mobile optimized site, adding Flash would be a mistake in my opinion. Flash truly is dead as Steve Jobs said.

If you want a slideshow, I recommend Owl Carousel or Flexslider.

Hi Mike,
It's possible to to use Owl Carousel to scroll products ? For example I have custom display to show other products items by manufactures on product page.To display more products we can use it's lazy loading facility ?

[totaltec]

Originally Posted by Katsu

What's the best option for a rotating banner? HTML5?

I use Flexslider a lot. I have for years.

http://flexslider.woothemes.com/

Here are the steps I take:
1. Download the zip and extract.

2. upload the flexslider.css to your skin's /css folder. upload the /fonts directory from the zip into this folder too.

3. edit customer/service_css.tpl in your skin folder to include the new CSS file.

4. create a template called flexslider.tpl in your skin. reference it in customer/main/welcome.tpl or wherever you want it to show up. add the html code for the sliders.

5. create a folder in your skin's images folder called slides. upload your slides here. reference them in your flexslider.tpl with {$AltImagesDir}/slides/thisslide.jpg

6. upload the jquery.flexslider.min.js to your skin's /js folder.

7. create a flexslider.js in the js folder too. add the initialization code for the slider there

8. edit your skin's customer/main/service_js.tpl to add the two new javascript files. copy the template over from common_files if it doesn't exist in your skin.

That's as detailed as I can be at the moment, hope it helps!

[totaltec]

Originally Posted by anandat

Hi Mike,
It's possible to to use Owl Carousel to scroll products ? For example I have custom display to show other products items by manufactures on product page.To display more products we can use it's lazy loading facility ?

Owl Carousel is awesome at rotating products! or any div content that you want. Yes I recommend this carousel for this purpose. Phil turned me on to it some time back and I have used it a few times.

I am not sure about the lazy load... perhaps for images, just not sure about for products. Of course it could be done, I just don't know how hard it would be to do it.

[Katsu]

Thanks Mike for the great help here. I missed your note ealier in reference to Owl and Flex. I'm looking for a rotating, click-through banner with user operated back-forward function and some 'flashy' graphics thrown in. Trying Owl Carousel right now.