Demo

Script Link

Don’t forget to check out the Live Demo!!

Prototype AJAX Tabs Before

Prototype AJAX Tabs After

Install the tabs by following the directions at this site. 20bits.com

Once you have installed the tabs grab the CSS below and have some fun!

.tabbed-pane * {
	margin: 0;
	padding: 0;
}
.tabbed-pane {
	margin:0 0 0 2px;
	width:305px;
	text-align:left;
        background: #222;
	color:#888;
	border:1px solid #333;
    padding:3px;
}

.tabbed-pane img
{
	width:300px;
	height:200px;
	margin:0 0 8px 0px;
	padding:1px;
	float:left;
	border:1px solid #000;
}

 .tabs {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #111;
	border-bottom: 1px solid #333;

}

.tabbed-pane ol {
       height:28px;
       margin-bottom:5px;
}
 .tabs li a.active {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #222;
        border: 1px solid #222;
}
 .tabs li {
	float: left;
	margin: 0 0px 0 0;
}

 .tabs li a {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	background: #111;
        color:#FFF000;

}

 .tabs li a:hover {
	float: left;
	display: block;
	padding: 6px 8px 8px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #333;
}

.tabbed-container {
	position: relative;
	clear: both;
	min-height: 10em;
}
.tabbed-container .overlay {
	position: absolute;
	clear: both;
	padding: 0px 5px 0px 5px;
	width: 290px;
        height: 100%;
	top: 0;
	left: 0;
	opacity:.70;
	filter:alpha(opacity=70);
	background:#222;
	text-align: center;
	z-index: 100;

}

.tabbed-container .overlay h3{
       	font-size:18px;
	font-weight:700;
        color:#ffF000;
}

imgPreview Powered By jQuery

Click Here to see the demo

Script Built By:missingmethod.com

Slider options

Auto Scroll:
var my_glider = new Glider(‘my-glider’, {autoGlide: true, frequency: 6});

Scroll with only the buttons:
var my_glider = new Glider(‘my-glider’, {duration:0.5});

Buttons Below

Live Demo

DownLoad

Screen Shots

Buttons left and right

Live Demo

Download

Screen Shot

add the log PHP code to the header you will see some errors. I just add it to the footer is it seemed to work fine.  But the creator of this script says, “some software such as WordPress can cause errors with this include. If that is the case, please try using the full root path for the include.”

I have two clients that currently use this and they are both happy with this script. So if you are looking for a good referrers script you should give TG Referrers a try.

Fist off you need to head over to Dynamic Drive and download the files that you need Featured Content Slider v2.4.

Seconded you need to ether make your own transparent PNG images or you can go here and use the images I used for this project.

See a live demo

Now lets quick look at the stock CSS code.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

To add a transparent border around the content slider you can do this. Note: I made the featured content slider smaller for this project.

Remove this:
border: 10px solid navy;

Add this:
background: url(/images/transpBlue10.png) repeat;
padding:2px

So the code should look like this:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
background: url(/images/transpBlue10.png) repeat;
border-bottom-width: 6px;
width: 335px; /*width of featured content slider*/
height: 200px;
padding:2px
}

Next step is to edit the content area.

You will need to add this:
border: 1px solid #DDD;
margin: 4px 0 0 5px;
padding: 2px;

So the code will look like this:

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
margin: 4px 0 0 5px;
padding: 2px;
background: #FFF;
border: 1px solid #DDD;
width: 322px; /*width of content DIVs within slider. Total width should equal slider’s inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Now we will edit the look of the pagination DIV.

Remove this:
background-color: navy;
width: 400px;

Add this:
width: 419px;
background: url(/images/transpBlue10.png) repeat;

So the code will look like this:

.pagination{
width: 319px; /*Width of pagination DIV. Total width should equal slider’s outer width (400+10+10=420)*/
text-align: right;
background: url(/images/transpBlue10.png) repeat;
padding: 5px 10px;
}

Almost done! The last step is adding a effect to the pagination links.

Remove this:
color: #00007D;
background: white;

Add this:
color: #FFF;
background: url(/images/transpBlue25.png) repeat;

So the code will look like this:

.pagination a{
padding: 0 5px;
text-decoration: none;
color: #FFF;
background: url(/images/transpBlue25.png) repeat;
}

Finish it off with a hover effect.

Remove this:
color: #000;
background-color: #FEE496;

Add this:
color: #EEE;
background: url(/images/transpBlue75.png) repeat;

So the code will look like this:

.pagination a:hover, .pagination a.selected{
color: #EEE;
background: url(/images/transpBlue75.png) repeat;
}

Here is the CSS file:
contentslider.css

Here are the PNGs from this project.

Magnify

Magnify allows you to easily create a “magnifier” on your images. You just need to create a small and large image which are proportionally sized, configure your markup accordingly and let Magnify do the rest.

Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

Coda Bubble

A visual information bubble effect, as per the Coda web site. Information will “puff” upwards, and when the mouse moves away, “puffs” away upwards again.

Drop Down Panel

Drop Down Panel adds a pull down panel to the top of your page that contains external content fetched via Ajax. Visitors click on the protruding button to cause the panel to drop down and reveal its content. Clicking anywhere on the panel again closes it. You can easily customize the height of the Panel, button text (ie: “panel content”), and drop down speed in milliseconds. A plug and play Ajax drop down panel!

Here are 5 of my favorites from his site.

imgPress-X

distance and perception

autumn II

stippled memories

theories of mind

TopMediaScript Video Player Mod by Jake

——–Back your original files——–

1. Files you need: >>DOWNLOAD<<

After you have uploaded everything follow the steps below.

Open your header.php and add this code in between the <head> </head>

<script type=”text/javascript” src=”/swfobject.js”></script>

2. Open up media.php in this folder and find this code:

<div id=”player”>This text will be replaced</div>
<script type=”text/javascript”>
var so = new SWFObject(‘http://<?=$siteURL;?>/flvplayer.swf’,'mpl’,’500′,’360′,’7′);
so.addParam(‘allowfullscreen’,'true’);
so.addParam(‘allowscriptaccess’,'always’);
so.addVariable(‘file’,'http://<?=$siteURL;?>/m_<?=$line["m_type"]?>s/<?=$line["m_file"]?>’);
so.addVariable(‘height’,’360′);
so.addVariable(‘width’,’500′);
so.addVariable(‘image’,'http://<?=$siteURL;?>/m_<?=$line["m_type"]?>s/thumbs/<?=$line["m_thumbnail"]?>’);
so.addVariable(‘frontcolor’,’0xDDDDDD’);
so.addVariable(‘backcolor’,’0×000000′);
so.addVariable(‘lightcolor’,’0x89b5c6′);
so.addVariable(‘screencolor’,’0×111111′);
so.addVariable(‘showstop’,'true’);
so.addVariable(‘overstretch’,'fit’);
so.addVariable(‘autostart’,'true’);
so.addVariable(‘bufferlength’,’5′);
so.addVariable(‘shuffle’,'false’);
so.addVariable(‘linktarget’,'_self’);
so.addVariable(‘type’,'flv’);
so.write(‘player’);
</script>

*To change the player size change these ’500′,’360′

* To change the colors of the player controls you will need to change this code:

so.addVariable(‘frontcolor’,’0xDDDDDD’);
so.addVariable(‘backcolor’,’0×000000′);
so.addVariable(‘lightcolor’,’0x89b5c6′);
so.addVariable(‘screencolor’,’0×111111′);

* To add your own custom logo to your video player you will need to create a Transparent PNG save it as videologo.png

so.addVariable(‘logo’,'link to your image’);

If you want to add more features visit: http://www.jeroenwijering.com/?page=wizard

Make sure to click the get the swfobject code before you start customizing your player.
The last thing I changed was the VIEW FULL SCREEN to Download this video. If you don’t what people to have this feature simply remove this code from your media.php

<tr><td align=”center” valign=”top” bgcolor=”#f4f3f3″ class=”mediaDetails”><a href=”http://www.<?=$siteURL?>/m_<?=$line["m_type"]?>s/<?=$line["m_file"]?>”><strong>VIEW FULL SCREEN
</div>
</strong></a></td>
</tr>
<tr>

Remember, if you mess up you can always go back to the backups that you made.

You can see a live example on this site http://bikerpunks.com

If you need any help just PM me http://www.gamepacks.org/forum/memberlist.php?mode=viewprofile&u=499

Or post some comments below and I will try my best to help you out.