PDA

View Full Version : (updated) Two menus for the same contentglider



yomas
05-06-2010, 07:35 AM
1) Script Title: featuredcontentglider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem:

Hi guys, here's my problem:

Firstable excuse my poor english vocabulary and if it isn't clear let me know 'cause I'm a froggy ^^

I'm using the featuredcontentglider to make a google widget,
and I'd like to use two menus wicth controls the same contentslider but with multiple contents...


Ok here's the code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" href="gadget.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="cssbuttonstoggler.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</head>
<body>
<script type="text/javascript">
The first contentglider
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
})

</script>

<script type="text/javascript">
The second contentglider
featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select1", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
})

</script>

<div id="content">
<img class="img1" src="logo.jpg" alt="logo" />
<h2>Annonces</h2>
Here's my first "menu"
<div id="p-select1" class="cssbuttonstoggler">
1<a href="#" class="toc" title="News"><span>News</span></a>
2<a href="#" class="toc" title="Appartements"><span>Appartements</span></a>
3<a href="#" class="toc" title="Villas"><span>Villas</span></a>

</div>
<div id="canadaprovinces" class="glidecontentwrapper">

1<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
Super nouvelles actus pour le cabinet mas !!!<br />Merci tous pour votre soutien !!
</div>

2<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
Trop de la balle ce widget !!</div>

3<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
</div>

1<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

2<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

</div>
Here's my second "menu"
<div id="p-select" class="cssbuttonstoggler">
1<a href="#" class="toc"><span>1</span></a>
2<a href="#" class="toc"><span>2</span></a>


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

The problem here is normal but I can't find a solution: the two "menus" commands the same content, and what I'd like is to have is to attribute on each toc a particular div...
Is it possible?

Like this:

this one 1
slides to 1

this one 2
slides to 2

And later

this one 1
slides to 1

this one 2
slides to 2

Okay !!!
Pfuiii !!

That was sport !!

Thank all of you in advance and I'm sorry again it all of this isn't clear