WordPress.org

Ready to get started?Download WordPress

Forums

Getting cycling slider-links to activate... (1 post)

  1. Kevin
    Member
    Posted 7 months ago #

    Hi guys,

    I'm having trouble with my slide-controls. Right now I have a slider set up that uses the jquery.cycle.all.min.js script to cycle through 5 unordered list items. That part is working fine. It cycles through all of the list items on its own and when the user clicks on each item, and changes their class to "active" one at a time.

    The problem I am having is this. Within each line item I have an anchor that users can click on once the line becomes active. Using css I am able to hide the anchor in each line until it is assigned the "active" class. Here is the css:

    #slider-control li.active a.slide-link {
    	width: 112%;
    	height: 125%;
    	color: #DBDBDB;
    	display: block;
    	margin: -37px 0 0 -8px;
    	position: relative;
    	z-index: 9999;
    }

    The z-index is to make sure the anchor is on top of the other elements so that it will be clickable. When I disable javascript in my browser, this works exactly how I would like, but once I activate it for some reason it is disabling the anchor. Here is the relevant script:

    <?php //Slider Script
    		if ( $resource_page ) { ?>
    			var $slider_control = jQuery('#featured-slider div#slider-control ul'),
    				$featured_item = jQuery('#featured-slider div#slider-control ul li.featitem'),
    				$slider_control = jQuery('#featured-slider div#slider-control ul');
    				$image_container = jQuery('div#s1 > div');
    
    			et_featured_options = {
    				timeout: 0,
    				speed: 900,
    				cleartypeNoBg: true,
    				before: function (currSlideElement, nextSlideElement, options, forwardFlag) {
    					var $et_active_slide = jQuery(nextSlideElement),
    						et_active_order = $et_active_slide.prevAll().length,
    						$this_element = $slider_control.find('li.featitem').eq(et_active_order);
    
    					$slider_control
    						.children("li.featitem.active")
    							.fadeTo("slow", 1)
    							.removeClass('active');
    					$this_element.addClass('active').fadeTo("slow", 1);
    				},
    				fx: '<?php echo esc_js(get_option($shortname.'_slider_effect')); ?>'
    			}
    
    			<?php if (get_option($shortname.'_pause_hover') == 'on') { ?>
    				et_featured_options.pause = 1;
    			<?php } ?>
    
    			<?php if (get_option($shortname.'_slider_auto') == 'on') { ?>
    				et_featured_options.timeout = <?php echo esc_js(get_option($shortname.'_slider_autospeed')); ?>;
    			<?php } ?>
    
    			$featured_item.fadeTo("fast", 1);
    			$slider_control.children("li.featitem.active").fadeTo("fast", 1);
    			$image_container.css("background-color","#000000");

    I am assuming that this is an issue with the script, but I am not very familiar with js so I was hoping someone on here might be able to help. Hopefully I was right. You can view the page here Please Help!
    Thanks

Reply

You must log in to post.

About this Topic

Tags

No tags yet.