Step Carousel Viewer: highlighting link

[andi.m.]

1) Script Title:
Step Carousel Viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem:
target: I want to use the great script (thank you for that) as a menu bar for changing content in the "same" window,
see on: http://rimi.ch/referenzen/index.html
the panel which corresponding to the content should be highlited (eg with a border-bottom)

I tried two possibilites, each with small difficulties:

1) kind of static use (as online in link above), a new side is completely loaded when clicked on a panel, with the "persist:true" it remembers the last location (fine) and with a CSS context-selector it is possible to highlight the "active" panel.
problem here: the panel is of course rebuild when the new side is loaded, it takes some time (in FF) or the paticular loaded panels are snapping together after fully loaded (in IE) what looks not so fine in both browsers, but the highlighting is working.

2) tried it with an iframe for the changing content, so the panel keeps standing fine when changing the content, but here I have found no solution to highlight the particular panel wich coresponding content is active. (the CSS context-selector is not working because the body id is not changing)

on my search in the forum I found the thread with the onslide function in the first part of: http://www.dynamicdrive.com/forums/a...p/t-40870.html but with that all visible panels got highlighted, so Im not shure if I understood right if thats the solution for my problem or something different. also there was a remark from ddadmin: "The next time the script is updated I'll work this feature directly into the script" maybe thats already updated and ready for use but not documented?

So my question is if there is a possibility to get the panel highlighted (e.g. by border) which link is currently aktive in a iframe or an other possibility to create such a funktionality. Im absolute beginner in javascript but open to learn more about it.
thank you for giving me the opportunity to place my question in this forum.

[ddadmin]

Just looking at your page I'm not sure what you're trying to accomplish actually. Are you saying you want to set up the top menu links, ie:

unternehmen team referenzen kontakt

so clicking on each one loads a specific panel within the Carousel Viewer? There seems to be more than that, though I'm not sure what based on your post above.

[andi.m.]

Thank you for the quick response,
no, the menu "unternehmen team referenzen kontakt" is ok,

I made a second site on http://rimi.ch/rimi_2/referenzen/index.html for better explanation.

the step caorusell viewer is already implemented below the green box and shows 8 black/white pictures, two more are invisible, but accessable by clicking on the small red arrow on the right (in futur there will be more pictures)

each of the b/w pictures in the belt is a link,
clicking on a b/w picture is changing the content in the green box.

1st and 2nd b/w picture:
these are links with the green-box-iframe as target, the b/W pictures are standing still while clicking on them and the content in the green box is changed, wonderful.
but: I would like to have the "active" b/w picture marked, so that the user knows wich b/w picture´s content is shown in the green box.

clicking on the 3rd and following b/w pictures shows what I mean, here the b/w pictures are marked with a red border-bottom.
in this case theres a complete new site loaded for each click on a b/w picture, no iframe is used, therefore the step caorusell viewer is loaded completely new after each click, and this takes time where the pictures dissapear (FF) or snapping together (IE).

I would like to use the step caorusell viewer like in 1st and 2nd b/w picture in the "iframe modus", but I need a possibility to highlight the aktive b/w picture like clicking on the 3rd and following b/w pictures.

so my question is, if there is a possibility to recognise on which panel is clicked and change therefore the border?

[ddadmin]

There is a past thread on how to add a border to the currently shown panel. Are you basically talking about something similar, though except add a border to the panel itself, apply it to its corresponding pagination link?

[andi.m.]

Hi ddadmin, thanks for the reply, I read already this thread before I started this topic (see my first post), and checked the additional onslide function of the first part in this threat.
But in my case, with this function, there are all of the 8 visible slides highlighted, what I was looking for is just highlighting one: the one on which was clicked, i.e. I want to highlight the link "behind" the slide when clicked on, not the link "to" the slide as requested from brooke.
Do you think there is a solution for that?
best regards and thank you for helping.

[ddadmin]

I'm still not sure I get the complete picture here, though if the goal is basically to have the b/w thumbnails when clicked on, apply a border to the currently clicked on thumbnail while "unbordering" any the previous one, try adding a script like the below following your thumbnails' markup:

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

                 <div class="panel" id="ref_bild_01"><a href="index.html"><img src="../referenzbilder/sw/01.jpg" alt="geffen apartment" /></a></div>
                 <div class="panel" id="ref_bild_02"><a href="index_02.html"><img src="../referenzbilder/sw/02.jpg" alt="boston university"/></a></div>
                 <div class="panel" id="ref_bild_03"><a href="index_03.html"><img src="../referenzbilder/sw/03.jpg" /></a></div>
                 <div class="panel" id="ref_bild_04"><a href="index_04.html"><img src="../referenzbilder/sw/04.jpg" /></a></div>

                 <div class="panel" id="ref_bild_05"><a href="index_05.html"><img src="../referenzbilder/sw/05.jpg" /></a></div>
                 <div class="panel" id="ref_bild_06"><a href="index_06.html"><img src="../referenzbilder/sw/06.jpg" /></a></div>
                 <div class="panel" id="ref_bild_07"><a href="index_07.html"><img src="../referenzbilder/sw/07.jpg" /></a></div>
                 <div class="panel" id="ref_bild_08"><a href="index_08.html"><img src="../referenzbilder/sw/08.jpg" /></a></div>
                 <div class="panel" id="ref_bild_09"><a href="index_09.html"><img src="../referenzbilder/sw/09.jpg" /></a></div>
                 <div class="panel" id="ref_bild_10"><a href="index_10.html"><img src="../referenzbilder/sw/10.jpg" /></a></div>
         </div>
   </div>

<script type="text/javascript">

var $allimages=jQuery('.belt img')
$allimages.click(function(){
	$allimages.css('border-bottom-width', 0)
	jQuery(this).css('borderBottom', '4px solid darkred')
})

</script>

As you click on one of the b/w pictures, a bottom border gets added to it. Furthermore, if a border existed on another thumbnail due to a previous click on that one, that border is removed.

[andi.m.]

THANKS A LOT, that´s exactly what I was looking for, only two small details if I have a wish free...

how can I initialise the function in that way, that the first slide is already applied with the border when I call the site the first time/reload?

and the second question:

I made an additional line for having a padding between the picture and the border:
jQuery(this).css('paddingBottom', '2px')
jQuery(this).css('borderBottom', '4px solid #910A3A')
ok, it works, but is it the right way to do so, or can I put this in one bracket together (actually it didnt work with just a comma between as separation)?

thank you very much for your help

[ddadmin]

You're welcome. Yep, you can combine the two additional styles. Along with getting the first image to be selected, try the below modified code:

<script type="text/javascript">

var $allimages=jQuery('.belt img')
$allimages.eq(0).css({borderBottom:'4px solid #910A3A', paddingBottom:'2px'}) //style for first image
$allimages.click(function(){
	$allimages.css({borderBottomWidth:0}) //style for unselected images
	jQuery(this).css({borderBottom:'4px solid #910A3A', paddingBottom:'2px'}) //style for selected image
})

</script>

[andi.m.]

Now it is exactly like I want it!!!

THANK YOU VERY MUCH!

best regards, Andi