Member Avatar for baltazar

Hello,

I am having a problem with the jQuery Cycle plugin. I am trying to create a slideshow of images that change(fade) when an element in the pager nav is hovered on. (This is supposed to be possible as per the jQuery Cycle Plugin docs <http://malsup.com/jquery/cycle/pager2.html>)

My setup:
I have one div holding the images and the div on the right of it is the navigation div that holds the pager elements.

The navigation/pager div is made up of an ul that contains <a> & <img> tags. So like this <ul><li><a><img>.

Need:
1. I want the background image of the <a> tag to change when I hover over a nav element.
2. However, as an additional requirement I need the background image to remain changed even when I hover off.
i.e. my initial background image is white. When I hover over a nav element the background of that and only that element changes to green and I want it to stay green even when I hover off (untill I hover on some other nav element)

I can perform Need 1. by using the jQuery .hover function.

Need 2. is what I can't get to work.

According to the Cycle plugin docs, when you hover over a nav element, the cycle plugin gives it a "activeSlide" class and you can supposed to be able to manipulate the style of the element using this class. I have tried to do this but it doesn't work.

I have tried not using the jQuery hover function and doing this in CSS. But nothing. Here is my css

$("#Nav a").css("background-image","Hover.gif");
			
$("#Nav a.activeSlide").css("background-image","Normal.gif");

Any help is highly appreciated as I have spent hours and hours trying to figure this out.

  • 2 Contributors
  • 9 Replies
  • 205 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by baltazar
Member Avatar for pritaeas

According to the Cycle plugin docs, when you hover over a nav element, the cycle plugin gives it a "activeSlide" class and you can supposed to be able to manipulate the style of the element using this class. I have tried to do this but it doesn't work.

Can you provide a link to where you read this ? I can't find this statement. I thought it only responds to click events.

Member Avatar for pritaeas

Try this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<meta http-equiv="Content-Style-Type" content="text/css" /> 
		<title>JQuery Cycle Plugin - pagerEvent Demo</title> 
		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/jq.css" /> 
		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/cycle/cycle.css" /> 
		<style type="text/css"> 
			#nav { margin: 5px; }
			#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: url(http://www.kledingbank-limburg.nl/favicon.ico); text-decoration: none }
			#nav a.activeSlide { background: url(http://www.pritaeas.net/favicon.ico) }
			#nav a:focus { outline: none; }
		</style> 
		<script type="text/javascript" src="http://malsup.com/jquery/jquery-1.2.6.js"></script> 
		<script type="text/javascript" src="http://malsup.com/jquery/chili-1.7.pack.js"></script> 
		<script type="text/javascript" src="http://malsup.com/jquery/cycle/jquery.cycle.all.js?v2.23"></script> 
		<script type="text/javascript"> 
			$(function() {
			    $('#slideshow').cycle({
			        speed:       200,
			        timeout:     0,
			        pager:      '#nav',
			        pagerEvent: 'mouseover'
			    });
			});
		</script> 
	</head> 
	<body> 
		<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div> 
		<h1 id="banner"><a id="backnav" href="./">&lsaquo;&lsaquo; cycle home</a>jQuery Cycle Plugin - pagerEvent demo</h1> 
		<div id="main"> 
			<div id="demos"> 
		    <p>Hover over links to trigger slide changes.</p> 
		    <table cellspacing="20">
					<tr> 
				    <td>
							<div id="nav"></div> 
			        <div id="slideshow" class="pics"> 
		            <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach4.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach5.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach6.jpg" width="200" height="200" /> 
		            <img src="http://malsup.com/jquery/cycle/images/beach7.jpg" width="200" height="200" /> 
			        </div> 
				    </td>
					</tr> 
		    </table> 
			</div> 
		</div> 
	</body> 
</html>
Member Avatar for baltazar

I have already tried that. It didn't fix my problem. Thank you though.

Member Avatar for baltazar

Are you able to get the navigation to be icons of your chosing as opposed to letting the plugin build it for you.

I have looked at your code and have analysed mine thereafter and the problem seems to be there.

I was able to get my code working if I let the plugin build my navigation. However, I need this app to have custom navigation icons.

You are "THE DUDE" if you manage to figure this out.

Member Avatar for baltazar

Oh please don't apologise. Your demo got me thinking and made me have one of those Eureka moments.

Actually this is what I am looking to do: http://malsup.com/jquery/cycle/pager3.html

But I was trying to create my own hover using the jQuery Hover function which wasn't working out too well.

I also tried writing the CSS using jQuery but that didn't work either.

So I decided to take a step back and turns out that doing the hover in CSS would be the best bet. I dismissed that before because I tought it wouldn't degrade gracefully. But it turns out that it does.

I'm working on it now and will post if it does work out.

Thanks for your time pritaes. Appreciate it.

Member Avatar for baltazar

Oops!! totally forgot to update this thread.

Yes!! the above approach worked great. Thanks again for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.