[Plugin: WP Carousel] Adding styles to active link

  • Hi, I’m currently using the WP Carousel as a menu in a membership site. I need to add a border to the active link but for some reason its not showing. If I use this script, it only highlights the first image in the menu:

    <script type="text/javascript">
var $allimages=jQuery('.belt .panel')
$allimages.eq(0).css({border:'3px solid #0078C9'}) //style for first image
$allimages.click(function(){
$allimages.css({border:none}) //style for unselected images
jQuery(this).css({border:'3px solid #0078C9'}) //style for selected image
})
</script>

    Any help would be greatly appreciated. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

  • If I were you, I would try to do that with CSS instead of Javascript.

    In any case, I think the problem is that some of the items may be “removed” from DOM and added when they are needed, so you have to use .live() to add the effect to items that will be shown in a future.

    Thread Starter JC Palmes

    (@khleomix)

    Thanks, the css is actually in place but the problem is its not adding the needed class to the active link. Can you show me how? Thank you so much!

    .my_panel a.my_link { /* Normal link */ }
.my_panel a.my_link:hover { /* The cursor is over the link */ }
.my_panel a.my_link:active { /* The user has clicked the link */ }
.my_panel a.my_link:visited { /* The user has visited this page before */ }

    And it affects the DOM dynamically: when is added a new div to the DOM, if the div has the class my_panel, links will be styled.

    Thread Starter JC Palmes

    (@khleomix)

    the thing is, what I need to style is the actual active panel… can you show me how to dynamically add a class to the active panel? I just started using jquery and still need a lot of work on it. ??

    this is my css, I’m using the default theme

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    The hover and everything else works, I just need to dynamically add the active class to the panel div. thanks

    Oh! I didn’t understand you at first. Ok, you can do that, but it’s a bit more complex.

    If you use StepCarousel, there are 3 variables, called statusA, statusB and statusC that store the first panel shown, the last panel shown and the total number of panels.

    You can see a demo here (demos 2 and 3).

    If you use jCarousel, you should check this demo.

    Thread Starter JC Palmes

    (@khleomix)

    thanks… one other thing, would it be possible to retain the position of the carousel when you click a link and not have it go back to the first slide but instead stay on that particular panel? I’m using stepcarousel. Thank you so much for the time

    You can use the method stepcarousel.stepTo('galleryid', index) to move to a specific panel. It is explained in StepCarousel page.

    Thread Starter JC Palmes

    (@khleomix)

    I may need more help again… ?? I was able to fix the position retention of the link in the panel by editing the stepcarousel.js file from:

    setCookie:function(name, value){
		document.cookie = name+"="+value
	},

    to:

    setCookie:function(name, value){
		document.cookie = name+"="+value+"; path=/";
	},

    but my main problem is still not working, I’m trying to use this:

    <script type="text/javascript">
$('.panel a').click(function(){
$('.belt').find('.selected').removeClass('selected');
$(this).addClass("selected");
});
</script>

    This does not seem to work though… thanks!

    Thread Starter JC Palmes

    (@khleomix)

    hi there… I need another round of your expertise… ?? I’m using jcarousel now and need a way to get the position retention for jcarousel just like with stepcarousel? Like setting a cookie? Thanks!

    Check out this example, I think that with callback functions you can do that and more!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: WP Carousel] Adding styles to active link’ is closed to new replies.