Click here to Skip to main content
15,170,078 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello

can you please provide some example of header slider .I found tinycarousel on internet .
But i am facing one problem

1) i have to show 2 or 3 image (Not one) at a time. user can slide the header
2)on clicking any image one dropdown will open(display) . can you please give me some example?


//*****************************Index.html**********************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
});
function test()
{
alert("*****");
var mySelect = document.getElementById('mySelect'),
newOption = document.createElement('option');

newOption.value = 'bmw';

// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)


mySelect.appendChild(newOption);
}
</script>

</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" onclick="test()"/>
<select id="mySelect">
<!--option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option-->
</select>
</li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>

</div>
</body>
</html>


**************************css*****************************
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

***************************************js******************************
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p
Posted
Updated 8-May-13 20:58pm
v4
Comments
   
As you have refered some jQuery plugin, then just post some code and tell us how much you have proceeded ? Then only we can try and modify the code as per your requirements.
ravi1989h 9-May-13 1:38am
   
Hi ..I am positing my code
ravi1989h 9-May-13 1:39am
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
});
function test()
{
alert("*****");
var mySelect = document.getElementById('mySelect'),
newOption = document.createElement('option');

newOption.value = 'bmw';

// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)


mySelect.appendChild(newOption);
}
</script>

</head>
<body>
<div id="slider1">

<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" önclick="test()"/>
<select id="mySelect">
<!--option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option-->
</select>
</li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>


</div>
</body>
</html>
ravi1989h 9-May-13 1:40am
   
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
ravi1989h 9-May-13 1:40am
   
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var x="a(".pagenum",l);x.removeClass("active");a(x[p]).addClass("active")}}function" v(x){if(a(this).hasclass("pagenum")){i.move(parseint(this.rel,10),true)}return="" false}function="" t(){if(e.interval&&!o){cleartimeout(j);j="setTimeout(function(){p=p+1===u?-1:p;n=p+1===u?false:p===0?true:n;i.move(n?1:-1)},e.intervaltime)}}function" r(){if(e.controls&&d.length="">0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p
ravi1989h 9-May-13 1:42am
   
Problem is that on clicking image i want to show menu option .I am not able to show that ?
Naz_Firdouse 9-May-13 1:45am
   
Please use Improve Question link to post the code... I would be easy to read than psoting as a comment
ravi1989h 9-May-13 6:18am
   
Please help

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900