[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Carousel Component[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this images =) :arrow: [img]http://h1.rip
You are viewing a post by simpleMe. View all 55 posts in [color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Carousel Component[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this images =) :arrow: [img]http://h1.rip.
2008-06-17 01:53:10
- simpleMe
- » FTalkManiac
949
0
1969-12-31
[color=#FF0000]For Educational Purpose Only[/color] credits :arrow: [b]Carousel Component[/b] just sharing guys =) hope you like it =) [b]step 1.[/b] save this images =) :arrow: [img]http://h1.rip
[color=#FF0000]For Educational Purpose Only[/color]
credits 
[b]Carousel Component[/b]
just sharing guys 
hope you like it
[b]step 1.[/b] save this images
[img]http://h1.ripway.com/theused/simple/left-control.gif[/img] [b]left-control.gif[/b]
[img]http://h1.ripway.com/theused/simple/right-control.gif[/img] [b]right-control.gif[/b]
[b]step 2.[/b] download this files
[url=http://h1.ripway.com/theused/simple/yahoo-dom-event.js]yahoo-dom-event.js[/url]
[url=http://h1.ripway.com/theused/simple/utility.js]utility.js[/url]
[url=http://h1.ripway.com/theused/simple/dragdrop-min.js]dragdrop-min.js[/url]
[url=http://h1.ripway.com/theused/simple/container_core-min.js]container_core-min.js[/url]
[url=http://h1.ripway.com/theused/simple/carousel.js]carousel.js[/url]
[url=http://h1.ripway.com/theused/simple/carousel.css]carousel.css[/url]
[b]step 3.[/b] Save this as [b].html[/b]
[quote]<html>
<head>
<title>Tax Carousel</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="[b]yahoo-dom-event.js link here[/b]"></script>
<script type="text/javascript" src="[b]utility.js link here[/b]"></script>
<script type="text/javascript" src="[b]dragdrop-min.js link here[/b]"></script>
<script type="text/javascript" src="[b]container_core-min.js link here[/b]"></script>
<script type="text/javascript" src="carousel.js"></script>
<link rel="stylesheet" type="text/css" href="[b]carousel.css link here[/b]">
<link href="css/carousel.css" rel="stylesheet" type="text/css">
<link href="css/yui.css" rel="stylesheet" type="text/css">
<!--
Inlined styles for my overrides to the carousel for this demo.
Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
padding:8px 16px 4px 16px;
margin:0px;
}
.carousel-component .carousel-list li {
margin:4px;
width:79px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
img.border-left (1) + img.border-right (1)*/
height:93px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}
.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}
.carousel-component .carousel-list li img {
border:1px solid #999;
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
right:5px;
}
</style>
<script type="text/javascript">
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the previous button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: prevButtonStateHandler
**/
var handlePrevButtonState = function(type, args) {
var enabling = args[0];
var leftImage = args[1];
if(enabling) {
leftImage.src = "[b]left-control.gif link here[/b]";
} else {
leftImage.src = "[b]left-control.gif link here[/b]";
}
};
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the next button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: nextButtonStateHandler
**/
var handleNextButtonState = function(type, args) {
var enabling = args[0];
var rightImage = args[1];
if(enabling) {
rightImage.src = "[b]right-control.gif link here[/b]";
} else {
rightImage.src = "[b]right-control.gif link here[/b]";
}
};
/**
* You must create the carousel after the page is loaded since it is
* dependent on an HTML element (in this case 'mycarousel'.) See the
* HTML code below.
**/
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
carousel = new YAHOO.extension.Carousel("mycarousel",
{
numVisible: 3,
animationSpeed: 0.15,
scrollInc: 3,
navMargin: 20,
prevElement: "prev-arrow",
nextElement: "next-arrow",
size: 19,
prevButtonStateHandler: handlePrevButtonState,
nextButtonStateHandler: handleNextButtonState
}
);
};
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>
</head>
<body >
<div id="doc" class="yui-t7">
<div id="hd">
</div>
<div id="bd">
<!-- Carousel Structure -->
<div id="mycarousel" class="carousel-component">
<div class="carousel-prev">
<img id="prev-arrow" class="left-button-image"
src="[b]left-control.gif link here[/b]" alt="Previous Button"/>
</div>
<div class="carousel-next">
<img id="next-arrow" class="right-button-image"
src="[b]right-control.gif link here[/b]" alt="Next Button"/>
</div>
<div class="carousel-clip-region">
<ul class="carousel-list">
<li id="mycarousel-item-1">
<a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 1"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-2"><div><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 2"/></a>[b]friend name[/b]</div></li>
<li id="mycarousel-item-3"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 3"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-4"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 4"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-5"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 5"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-6"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 6"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-7"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 7"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-8"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 8"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-9"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 9"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-10"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 10"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-11"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 11"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-12"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 12"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-13"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 13"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-14"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 14"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-15"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 15"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-16"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 16"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-17"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 17"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-18"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 18"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-19"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 19"/></a>[b]friend name[/b</li>
<li id="mycarousel-item-20"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 20"/></a>[b]friend name[/b]</li> </ul>
</div>
</div>
</div>
</div>
</body>
</html>[/quote]
just edit the bold parts
btw, you can used ([b]jpg,gif,png[/b]) images
[b]step 4.[/b] paste this on your js extension
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='350' height='130' scrolling='no' src=[b]Link of .html[/b]></iframe><br><br><a href=\"http://www.friendster.com/friends/[b]Your id[/b]\"><b>View All Friends</b></a><br><br></center>";
document.getElementById('content_2').style.height='100%';
document.getElementById('content_2').style.overflowY='hidden';
document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+tax+"</td></tr></table>";
});[/quote]
just edit the bold parts then your done
[b]Screenshots[/b] 
[img]http://img262.imageshack.us/img262/9500/97946569au8.png[/img]
[url=http://h1.ripway.com/theused/simple/01.html]gif sample[/url]
[url=http://h1.ripway.com/theused/simple/02.html]jpg sample[/url]
[url=http://profiles.friendster.com/68274085]preview[/url]
[b]Carousel Component[/b]
just sharing guys
hope you like it
[b]step 1.[/b] save this images
[img]http://h1.ripway.com/theused/simple/left-control.gif[/img] [b]left-control.gif[/b]
[img]http://h1.ripway.com/theused/simple/right-control.gif[/img] [b]right-control.gif[/b]
[b]step 2.[/b] download this files
[url=http://h1.ripway.com/theused/simple/yahoo-dom-event.js]yahoo-dom-event.js[/url]
[url=http://h1.ripway.com/theused/simple/utility.js]utility.js[/url]
[url=http://h1.ripway.com/theused/simple/dragdrop-min.js]dragdrop-min.js[/url]
[url=http://h1.ripway.com/theused/simple/container_core-min.js]container_core-min.js[/url]
[url=http://h1.ripway.com/theused/simple/carousel.js]carousel.js[/url]
[url=http://h1.ripway.com/theused/simple/carousel.css]carousel.css[/url]
[b]step 3.[/b] Save this as [b].html[/b]
[quote]<html>
<head>
<title>Tax Carousel</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="[b]yahoo-dom-event.js link here[/b]"></script>
<script type="text/javascript" src="[b]utility.js link here[/b]"></script>
<script type="text/javascript" src="[b]dragdrop-min.js link here[/b]"></script>
<script type="text/javascript" src="[b]container_core-min.js link here[/b]"></script>
<script type="text/javascript" src="carousel.js"></script>
<link rel="stylesheet" type="text/css" href="[b]carousel.css link here[/b]">
<link href="css/carousel.css" rel="stylesheet" type="text/css">
<link href="css/yui.css" rel="stylesheet" type="text/css">
<!--
Inlined styles for my overrides to the carousel for this demo.
Normally I would put this in a separate CSS file.
-->
<style type="text/css">
.carousel-component {
padding:8px 16px 4px 16px;
margin:0px;
}
.carousel-component .carousel-list li {
margin:4px;
width:79px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
img.border-left (1) + img.border-right (1)*/
height:93px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
/* margin-left: auto;*/ /* for testing IE auto issue */
}
.carousel-component .carousel-list li a {
display:block;
border:1px solid #e2edfa;
outline:none;
}
.carousel-component .carousel-list li a:hover {
border: 1px solid #aaaaaa;
}
.carousel-component .carousel-list li img {
border:1px solid #999;
display:block;
}
.carousel-component .carousel-prev {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
left:5px;
}
.carousel-component .carousel-next {
position:absolute;
top:40px;
z-index:3;
cursor:pointer;
right:5px;
}
</style>
<script type="text/javascript">
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the previous button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: prevButtonStateHandler
**/
var handlePrevButtonState = function(type, args) {
var enabling = args[0];
var leftImage = args[1];
if(enabling) {
leftImage.src = "[b]left-control.gif link here[/b]";
} else {
leftImage.src = "[b]left-control.gif link here[/b]";
}
};
/**
* Custom button state handler for enabling/disabling button state.
* Called when the carousel has determined that the next button
* state should be changed.
* Specified to the carousel as the configuration
* parameter: nextButtonStateHandler
**/
var handleNextButtonState = function(type, args) {
var enabling = args[0];
var rightImage = args[1];
if(enabling) {
rightImage.src = "[b]right-control.gif link here[/b]";
} else {
rightImage.src = "[b]right-control.gif link here[/b]";
}
};
/**
* You must create the carousel after the page is loaded since it is
* dependent on an HTML element (in this case 'mycarousel'.) See the
* HTML code below.
**/
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
carousel = new YAHOO.extension.Carousel("mycarousel",
{
numVisible: 3,
animationSpeed: 0.15,
scrollInc: 3,
navMargin: 20,
prevElement: "prev-arrow",
nextElement: "next-arrow",
size: 19,
prevButtonStateHandler: handlePrevButtonState,
nextButtonStateHandler: handleNextButtonState
}
);
};
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>
</head>
<body >
<div id="doc" class="yui-t7">
<div id="hd">
</div>
<div id="bd">
<!-- Carousel Structure -->
<div id="mycarousel" class="carousel-component">
<div class="carousel-prev">
<img id="prev-arrow" class="left-button-image"
src="[b]left-control.gif link here[/b]" alt="Previous Button"/>
</div>
<div class="carousel-next">
<img id="next-arrow" class="right-button-image"
src="[b]right-control.gif link here[/b]" alt="Next Button"/>
</div>
<div class="carousel-clip-region">
<ul class="carousel-list">
<li id="mycarousel-item-1">
<a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 1"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-2"><div><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 2"/></a>[b]friend name[/b]</div></li>
<li id="mycarousel-item-3"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 3"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-4"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 4"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-5"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 5"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-6"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 6"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-7"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 7"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-8"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 8"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-9"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 9"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-10"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 10"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-11"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 11"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-12"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 12"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-13"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 13"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-14"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 14"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-15"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 15"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-16"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 16"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-17"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 17"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-18"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 18"/></a>[b]friend name[/b]</li>
<li id="mycarousel-item-19"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 19"/></a>[b]friend name[/b</li>
<li id="mycarousel-item-20"><a href="http://profiles.friendster.com/[b]########[/b]"><img width="75" height="75" src="[b]image link of friend here[/b]" alt="item 20"/></a>[b]friend name[/b]</li> </ul>
</div>
</div>
</div>
</div>
</body>
</html>[/quote]
just edit the bold parts
btw, you can used ([b]jpg,gif,png[/b]) images
[b]step 4.[/b] paste this on your js extension
[quote]window.addEvent('domready', function() {
var tax = "<iframe style='FILTER: chroma(color=transparent)' allowtransparency='true' frameborder=0 width='350' height='130' scrolling='no' src=[b]Link of .html[/b]></iframe><br><br><a href=\"http://www.friendster.com/friends/[b]Your id[/b]\"><b>View All Friends</b></a><br><br></center>";
document.getElementById('content_2').style.height='100%';
document.getElementById('content_2').style.overflowY='hidden';
document.getElementById('content_2').innerHTML = "<table width='100%'><tr><td align='center'>"+tax+"</td></tr></table>";
});[/quote]
just edit the bold parts then your done
[b]Screenshots[/b]
[img]http://img262.imageshack.us/img262/9500/97946569au8.png[/img]
[url=http://h1.ripway.com/theused/simple/01.html]gif sample[/url]
[url=http://h1.ripway.com/theused/simple/02.html]jpg sample[/url]
[url=http://profiles.friendster.com/68274085]preview[/url]
Last edited by simpleMe (2008-10-23 04:07:32)
 |