Jump to content
Sign in to follow this  
cg180659

[Contribution] Translucent Image Scroller

Recommended Posts

WOW!! With only 2 months of OSC experience under my belt I present to you my FIRST contribution! WHOOT WHOOT! I believe every contrib started out something like this:

 

I was looking for something so I posted a thread in the forum. I got some replies and was pointed to addons.oscommerce.com. I searched, and searched and searched yet counldn't find anything. Then I searched online for what I was looking for, found it, and decieded to cram it into my <insert box name here> box. 2 - 6 hours later I've created my first contribution and am overflowing with joy. Yeah. thats my story.

 

I was looking for a scroller that would both look good, AND have the capability to link to different categories/products. So here it is, the translucent, linkable scroller. tada!

 

INSTRUCTIONS:

1. After unzipping the translucent_scroller.zip, open translucent_scroller.js in your fave editor and have the images that you want to scroll prepared.

 

2. Edit the following to suit your tastes:

 

var trans_height: changes the height of the scroller

var pause: set pause between slides

var degree: determines the speed, the higher the number, the faster the speed

 

slideshowcontent[2]=["bann3.jpg", "product_info.php?products_id=78", "_parent"]

Here’s where the fun comes in. The first set of “” determines the image to be scrolled. This is where you would put the path to the image from /catalog, or where you saved the translucent_scroller.js file. I saved it directly in the root directory.

 

Example: I saved my .js file at root, but uploaded my images to the default images folder called "images". To link to an image in the images folder i would put images/banner.jpg inside the quotes.

 

The second set of “” determines where the image will link up to when clicked

 

Example: By entering "http://mydomain.com/specials.php" this particular image would take me to the specials page. You can also link to specific products and categories as well.

 

The last set of “” determines whether the link will open up in a new window (_new), or in the current win window (_parent)

 

5. Download and open up the file where your want the scroller to appear. I have only used it in my header, so I opened includes/header.php, but this script can also work in any of the infoboxes of osc i guess.

 

6. Copy and paste the contents of translucent_scroller.js in the place where you want it to appear in your infobox/header etc.

 

7. Save and upload the newly edited box/header file back into your store.

 

8. Check out your site ;)

 

 

I guess this is like a press release and a support thread.

CHEERS!!


SPACE FOR RENT!

Share this post


Link to post
Share on other sites

Sounds interesting, do you have a screenshot?


The Coopco Underwear Shop

 

If you live to be 100 years of age, that means you have lived for 36,525 days. Don't waste another, there aren't many left.

Share this post


Link to post
Share on other sites

This seems like a very cool contribution. I'm certainly not an experienced designer, but have managed to get this working, sort of.

 

I just can't seem how to place it in the page, I can only get it to show up at the top. How would I get it to appear elsewhere, for instance, between my store logo and the buttons on the right? In a particular table cell?

Share this post


Link to post
Share on other sites

This does sound like something I would like to check out. But, I downloaded the .zip and found nothing but a javascript file and a readme.txt. Do you have a site that is using it and/or a screenshot ?

 

 

I think more details are needed before I decide to test this out.

 

 

 

Thanks

 

 

Chris


:|: Was this post helpful ? Click the LIKE THIS button :|:

 

See my Profile to learn more about add ons, templates, support plans and custom coding (click here)

Share this post


Link to post
Share on other sites
This does sound like something I would like to check out. But, I downloaded the .zip and found nothing but a javascript file and a readme.txt. Do you have a site that is using it and/or a screenshot ?

 

 

I think more details are needed before I decide to test this out.

 

 

 

Thanks

 

 

Chris

 

Hi Chris,

 

I just installed this on a site today, www.kurvyassets.com, and it is working. But with my limited abilities, the only place I get it to show is at the top. I am using STS, and the script is in the <head> of the template file. I just don't know how to place it somewhere else. Anyway, you can see it working there.

Share this post


Link to post
Share on other sites

Hi Chris,

 

I just installed this on a site today, www.kurvyassets.com, and it is working. But with my limited abilities, the only place I get it to show is at the top. I am using STS, and the script is in the <head> of the template file. I just don't know how to place it somewhere else. Anyway, you can see it working there.

 

@ pschwab: Hi, you can put it into your site by editing your sts_template.html file (located in catalog/includes/sts_templates/YOUR_TEMPLATE_HERE/) and finding the area that you would like to add it to.

 

@Coopco and DunWeb: live sample on my server, http://www.accessorytrend.com - LIVE server, please don't play with orders.

 

And now.. a question directed towards cg180659: is there any way to change the animation for the transition between slides? Like a fade, or at least moving in a different direction? Please get back to me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×