PDA

View Full Version : highlight current pane in Step Carousel Viewer



brooke
01-19-2009, 08:32 PM
1) Script Title: Step Carousel Viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
3) Describe problem:
This is a great script, theres just one thing i cant figure out. I would like to be able to highlight which pane is active in the menu i have put above the carousel using stepcarousel.stepTo('galleryid', index) method. im going to use a UL with list items of these types of links:
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">Home</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 2)">About</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 3)">Contact</a>

but i have no clue how to highlight which <li> is active in the slider pane.

thanks for your time :)

ddadmin
01-19-2009, 09:57 PM
If by highlight the current panel you mean apply some visual cue to it (ie: a red border), yes that's possible using the onslide() event handler (http://www.dynamicdrive.com/dynamicindex4/stepcarousel_suppliment3.htm) of the script, plus the undocumented fact that within this event handler, you can reference all the slides wthin the Carousel using the code this.$panels[i], where i is the slide (starting from 0) you wish to access. With that said, the below applies a red border to the current slide:


stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
onslide: function(){
for (var i=0; i<statusC; i++){
var withinRange=(i>=statusA-1 && i<=statusB-1) //check whether this slide falls within range of active slides currently in view
if (withinRange)
this.$panels[i].style.border="3px solid red"
else
this.$panels[i].style.border="3px solid white"
}
}
})

This is a little cumbersome I agree. The next time the script is updated I'll work this feature directly into the script.

brooke
01-19-2009, 10:20 PM
im afraid i must be screwing something up. do i just need to add that extra code? when i add it, i get an error, and all my panels load in one panel. im very new to all this. heres a screenshot of the code i added, if it helps:
http://img519.imageshack.us/img519/9289/screencapture4ng4.jpg

ddadmin
01-19-2009, 10:34 PM
You forgot the comma that should be added after contenttype:


contenttype: ['inline'],

brooke
01-19-2009, 10:49 PM
oops, good eye ;)
ok, that works for what i think you thought i wanted, but i think i wasnt clear.
let me provide a picture:
http://img.skitch.com/20090119-kjsui8n22ywm31irqjch4rhspe.jpg
i would like to highlight the navigation item of the current pane shown, not the pane itself. for example, have the navigation text of "RT-PACS" be red, when thats the slide shown.

ddadmin
01-19-2009, 11:31 PM
The concept should be virtually identical actually. Just so I understand correctly, you mean highlight the corresponding nav links that go to a specific slide within the Carousel Viewer, ie, one of the following:


<a href="javascript:stepcarousel.stepTo('mygallery', 1)">Home</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 2)">About</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 3)">Contact</a>

brooke
01-19-2009, 11:33 PM
yes! exactly that

brooke
01-20-2009, 12:50 AM
Maybe theres a way of doing it using a status item? i cant quite get my head around it though...

leftybanana
01-21-2009, 12:26 AM
Howdy brooke! Were you able to get it to work? I too have been looking for a way to do that. Can anybody help?

brooke
01-21-2009, 12:35 AM
Howdy brooke! Were you able to get it to work? I too have been looking for a way to do that. Can anybody help?

no, sorry, I thought I was on to something, but i havent gotten any further.

ddadmin
01-22-2009, 07:54 AM
Sure, below demos how to get the current navigation link that corresponds to the slide being viewed to be "selected". The code in red is new from the default code you cut and paste on the script page:


<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

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

/***********************************************
* Step Carousel Viewer 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>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.selected{
background: yellow;
}

</style>

<body>

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
oninit:function(){
this.$toclinks=jQuery('.toclinks') //get all links with "toclinks" class
},
onslide:function(){
for (var i=0; i<statusC; i++){
if (i==statusA-1) //if this is the current slide
this.$toclinks.eq(i).addClass('selected')
else //not current slide
this.$toclinks.eq(i).removeClass('selected')
}
}
})

</script>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

</div>
</div>

<p>
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />

<a href="javascript:stepcarousel.stepTo('mygallery', 1)" class="toclinks">Home</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 2)" class="toclinks">About</a> >>
<a href="javascript:stepcarousel.stepTo('mygallery', 3)" class="toclinks">Contact</a>

</p>

The above assumes that you only add the shared CSS class name "toclinks" to nav links that go directly to a certain panel onClick, and not links that move a panel by 1 forward or back, for example.

brooke
01-22-2009, 08:06 PM
GENIUS! thank you so much, works perfectly! i could kiss you! http://img213.echo.cx/img213/2253/smooch0bv.gif