MSN Style Content Slider

brianjw · January 15, 2007, 08:51:20 PM

The MSN Style Content Slider is a cool code that will add as many contents as you want. It will slide through each content automatically unless the user has clicked next and from there it will slide manually until refresh.

Download these files to your forum root
(right click and select "Save As" or "Save Target As")
- contentslider.css
- contentslider.js
- loading.gif

MSN Style Content Slider Code
(This can be placed in a left, right, frontpage, or center block. This all depends on what the width is which you can change inside the css file)

Code Select

<head><link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- Â© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script></head>
<body><div id="slider1" class="contentslide">

<div class="contentdiv">
Content 1
</div>

<div class="contentdiv">
Content 2
</div>

<div class="contentdiv">
Content 3
</div>

</div>

<div class="pagination" id="paginate-slider1"></div>

<script type="text/javascript">
//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

</script></body>

Code Editing
1. If you have added the files above to a different place other than your forum root, change those paths located in the head tag.
2. Change this area of code:

Code Select

//ContentSlider("slider_ID" , opt_miliseconds_rotate)
ContentSlider("slider1") //or ContentSlider("slider1", 3000) to auto rotate every 3 seconds

to how many seconds you want this content slider to rotate.

Instructions
1. Upload files listed above to your forum root.
2. Copy and Paste the code above into a left, right, or center block.

MORE THAN 1
If your planning to have more than one of these, you will have to paste the code right before the </head> (without the head tags already in the code) inside each of your themes index.template.php file. Then you will have to add the javascript located at the bottom of the code I gave you, Paste it right before the </body> tag but do not include the body tags in your pasting (it will already be there)
REMOVE the codes i told you to put in your themes index.template.php out of the block.
Open your index.template.php for your teams and where you pasted the javascript before the </body> tags. EDIT THAT Code to say ("slider1", "slider2") Change everything in the existing block code that says slider1 to slider2 and open up the css file and add paginate-slider2 into the file.
IF YOU HAVE 2 OF THESE ONE WILL HAVE TO SAY SLIDER1 AND THE OTHER WILL HAVE TO SAY SLIDER3. FOLLOW THESE STEPS IF YOU WANT TO ADD MORE OF THEM.

Demos and Other
You will have to edit the colors,widths,bgcolors, etc. inside the css file.

DEMO-- ~~Look in the center blocks~~ (no demo)

brianjw · January 15, 2007, 08:56:27 PM

There is a small bug that will not effect anyones website.
It currently isn't rotating automatically so the user has to press one of the numbers or click Next.

Anybody know enough code to get the rotating automatically part of this work?

RoarinRow · January 15, 2007, 09:00:55 PM

Looks cool though :up: I didn't see any images in the demo

Could be my internet connection, have had problems all morning.

brianjw · January 15, 2007, 09:18:35 PM

Actually the loading.gif is the only image and will only show if there are images inside the demo that take a while loading. Like an image placeholder!

RoarinRow · January 15, 2007, 09:39:21 PM

Quote from: brianjw on January 15, 2007, 09:18:35 PM
Actually the loading.gif is the only image and will only show if there are images inside the demo that take a while loading. Like an image placeholder!

i see, gotcha :up:

brianjw · January 15, 2007, 10:57:55 PM

Let me know how you like this one like this:

(EXAMPLE:
Rating: :up: :up: :up: :up: :up: - This represents 5 stars. Take em' away if you want)

Brianjw

Recent

User

Stats

Members

Stats

Users Online

MSN Style Content Slider

brianjw

brianjw

RoarinRow

brianjw

RoarinRow

brianjw

This website is proudly hosted on Crocweb Cloud Website Hosting.