Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] Translucent Image Scroller


cg180659

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!

Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...