944,155 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > jQuery Cycle Plugin pager problem
Ad:
Permalink
Oct 14th, 2009
0

jQuery Cycle Plugin pager problem

Expand Post »
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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. $("#Nav a").css("background-image","Hover.gif");
  2.  
  3. $("#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.
Similar Threads
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007
Permalink
Oct 15th, 2009
0
Re: jQuery Cycle Plugin pager problem
Click to Expand / Collapse  Quote originally posted by baltazar ...
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.
Sponsor
Featured Poster
Reputation Points: 557
Solved Threads: 735
Bite my shiny metal ass!
pritaeas is offline Offline
4,204 posts
since Jul 2006
Permalink
Oct 15th, 2009
0
Re: jQuery Cycle Plugin pager problem
Click to Expand / Collapse  Quote originally posted by pritaeas ...
Can you provide a link to where you read this ? I can't find this statement. I thought it only responds to click events.
Here is the demo with hover:
http://malsup.com/jquery/cycle/pager5.html

Here is the config options sheet:
http://malsup.com/jquery/cycle/options.html
Last edited by baltazar; Oct 15th, 2009 at 2:14 pm.
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007
Permalink
Oct 16th, 2009
0
Re: jQuery Cycle Plugin pager problem
Try this example:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  3. 	<head> 
  4. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  5. 		<meta http-equiv="Content-Style-Type" content="text/css" /> 
  6. 		<title>JQuery Cycle Plugin - pagerEvent Demo</title> 
  7. 		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/jq.css" /> 
  8. 		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/cycle/cycle.css" /> 
  9. 		<style type="text/css"> 
  10. 			#nav { margin: 5px; }
  11. 			#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: url(http://www.kledingbank-limburg.nl/favicon.ico); text-decoration: none }
  12. 			#nav a.activeSlide { background: url(http://www.pritaeas.net/favicon.ico) }
  13. 			#nav a:focus { outline: none; }
  14. 		</style> 
  15. 		<script type="text/javascript" src="http://malsup.com/jquery/jquery-1.2.6.js"></script> 
  16. 		<script type="text/javascript" src="http://malsup.com/jquery/chili-1.7.pack.js"></script> 
  17. 		<script type="text/javascript" src="http://malsup.com/jquery/cycle/jquery.cycle.all.js?v2.23"></script> 
  18. 		<script type="text/javascript"> 
  19. 			$(function() {
  20. 			    $('#slideshow').cycle({
  21. 			        speed:       200,
  22. 			        timeout:     0,
  23. 			        pager:      '#nav',
  24. 			        pagerEvent: 'mouseover'
  25. 			    });
  26. 			});
  27. 		</script> 
  28. 	</head> 
  29. 	<body> 
  30. 		<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div> 
  31. 		<h1 id="banner"><a id="backnav" href="./">&lsaquo;&lsaquo; cycle home</a>jQuery Cycle Plugin - pagerEvent demo</h1> 
  32. 		<div id="main"> 
  33. 			<div id="demos"> 
  34. 		    <p>Hover over links to trigger slide changes.</p> 
  35. 		    <table cellspacing="20">
  36. 					<tr> 
  37. 				    <td>
  38. 							<div id="nav"></div> 
  39. 			        <div id="slideshow" class="pics"> 
  40. 		            <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" width="200" height="200" /> 
  41. 		            <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" width="200" height="200" /> 
  42. 		            <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" width="200" height="200" /> 
  43. 		            <img src="http://malsup.com/jquery/cycle/images/beach4.jpg" width="200" height="200" /> 
  44. 		            <img src="http://malsup.com/jquery/cycle/images/beach5.jpg" width="200" height="200" /> 
  45. 		            <img src="http://malsup.com/jquery/cycle/images/beach6.jpg" width="200" height="200" /> 
  46. 		            <img src="http://malsup.com/jquery/cycle/images/beach7.jpg" width="200" height="200" /> 
  47. 			        </div> 
  48. 				    </td>
  49. 					</tr> 
  50. 		    </table> 
  51. 			</div> 
  52. 		</div> 
  53. 	</body> 
  54. </html>
Sponsor
Featured Poster
Reputation Points: 557
Solved Threads: 735
Bite my shiny metal ass!
pritaeas is offline Offline
4,204 posts
since Jul 2006
Permalink
Oct 19th, 2009
0
Re: jQuery Cycle Plugin pager problem
I have already tried that. It didn't fix my problem. Thank you though.
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007
Permalink
Oct 19th, 2009
0
Re: jQuery Cycle Plugin pager problem
Can you provide a link to your code ? I got it working:

http://www.pritaeas.net/public/jquery/cycle/hover.html
Sponsor
Featured Poster
Reputation Points: 557
Solved Threads: 735
Bite my shiny metal ass!
pritaeas is offline Offline
4,204 posts
since Jul 2006
Permalink
Oct 20th, 2009
0
Re: jQuery Cycle Plugin pager problem
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.
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007
Permalink
Oct 21st, 2009
0
Re: jQuery Cycle Plugin pager problem
Am I correct that you want to change the 1 2 and 3 into icons ? If that is so then I completely missed it before, sorry about that. I'll see if I can find a solution.

Is this what you mean?
http://www.pritaeas.net/public/jquery/cycle/hover2.html
Last edited by pritaeas; Oct 21st, 2009 at 4:56 am.
Sponsor
Featured Poster
Reputation Points: 557
Solved Threads: 735
Bite my shiny metal ass!
pritaeas is offline Offline
4,204 posts
since Jul 2006
Permalink
Oct 21st, 2009
0
Re: jQuery Cycle Plugin pager problem
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.
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007
Permalink
Nov 2nd, 2009
0
Re: jQuery Cycle Plugin pager problem
Oops!! totally forgot to update this thread.

Yes!! the above approach worked great. Thanks again for your help.
Reputation Points: 10
Solved Threads: 1
Light Poster
baltazar is offline Offline
46 posts
since Jul 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: HELP! SOS
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: bookmarklet problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC