Ultimate Fade-in Slide Show

[Guest charleycrowe]

I found this great looking feature but it is in javascript. You can see it at http://www.dynamicdrive.com/dynamicindex14...inslideshow.htm there is instructions and everything.

I just dont know where to put the code! I want to put the slide show on my home page and use the images from my upload folder. Anyone wanting to take a crack at this?

[Guest vrakas]

I think this would be better if it was asked i the .org forum where all 3rd party mods are located and supported :(

[Guest garysmith]

I managed to get this script running a while back but now moved on to something slightly different, if you want to see it in action go to The Bargain Watch Shop.

The one thing that put me off this script is that you cannot enter text to go with the images, well, not without a rewrite of the code.

To add a script like this you need to go to your skins/YOURSKIN/styleTemplates/content/index.tpl file

Create a new <div> </div> in your file where you would like your slideshow to appear and name it appropriately, for example: <div class="slideshow">

Put your script in between your <div class="slideshow"> and </div> tags, set up any variables and links within the script, like links to the images, slideshow height and width, speed etc. and save and upload the file.

You can then create a new entery in the skins/YOURSKIN/styleSheets/layout.css to control the positioning and the style of the new slideshow.

I hope you can sort it out with just the instructions here, if you get stuck you can pm me.

Gary

[Guest vrakas]

Moved :P

[Guest peppy]

I think i am going to add this in my header

like every minute a light detail in the header or something ;)

[markscarts]

Wow, pretty timely post. I have been thinking about this for a long time, and finally made a mod for it myself. I wanted one that had fade effects for all browsers, not just IE, and integrated with CubeCart so the image's links and urls didn't have to be hard-coded, but could be chosen in the store ACP instead. Took a couple days, but finally got the code worked out to do this.

Anyone interested in how I did this, I'll give a brief synopsis: First, find or write a js slideshow that has fading transistions in Mozilla as well as IE. This took me quite some time to accomplish in itself.

Second, I made a new includes/boxes/slideshow.inc.php file to get the db queries for the thumbnails, as set in ACP.

Third, I made a new skins/xx/styleTemplates/boxes/slideshow.tpl file that creates a box similar to the randomProd.tpl box for holding the slideshow in a side box. This tpl box contains the actual js code, and you have to code a loop to pick up the image number, image URL and link url from the slideshow.inc.php.

Fourth, I added code to the General Settings page of the ACP for turning the slideshow on and off, and setting the maximum number of slides to show.

Sixth, I added code to the add/edit products page for a yes/no dropdown as to whether a particular product is added to the slideshow.

And finally, I added a field to the db for managing the choice made in #6

It was fun coding this up. Hopefully the run-down above may help someone else. If it's just too much, you can always look for the mod at cubecart.org

[Guest vrakas]

I managed to get this script running a while back but now moved on to something slightly different, if you want to see it in action go to The Bargain Watch Shop.

The one thing that put me off this script is that you cannot enter text to go with the images, well, not without a rewrite of the code.

To add a script like this you need to go to your skins/YOURSKIN/styleTemplates/content/index.tpl file

Create a new <div> </div> in your file where you would like your slideshow to appear and name it appropriately, for example: <div class="slideshow">

Put your script in between your <div class="slideshow"> and </div> tags, set up any variables and links within the script, like links to the images, slideshow height and width, speed etc. and save and upload the file.

You can then create a new entery in the skins/YOURSKIN/styleSheets/layout.css to control the positioning and the style of the new slideshow.

I hope you can sort it out with just the instructions here, if you get stuck you can pm me.

Gary

I like your solution very much, easy and straight forward ;)

[Guest garysmith]

Thanks Vrakas!

I like the sound of markscarts mod though. Being able to control image management from the admin panel would be cool.

[Guest vrakas]

I agree, it does have more features.

[Guest garysmith]

If you can add text to go along with the image and can resize images.

[markscarts]

These are features I would like to see, too. I'm thinking I could code the slideshow.inc.php to read the thumbnail size setting from ACP General Settings > GD Settings and assign it to slideshow.tpl, then work it into the javascript to set image size according to thumbnails setting. This is a great idea, Gary. The one I am working on uses thumbnail images and goes into a side box as described above.

To add product name or short description to the slideshow, it would have to be coded into the js, would like to do this too, but won't have time to work it out anytime soon.

Well, I've given the general guidelines on how to do all this above, but since it involves new core files, etc., it is more a third-party mod than a skinning trick, and should not be discussed any further in this forum. The subject really belongs in .org

As far as skinning tricks go, though, anyone could easily add a slideshow to cubecart anywhere they want, by adding the javascript to a .tpl file and hard-coding the image size, link url, etc.