slinky slider jquery help!

I am using the slinkyslider and am trying to figure out how I can replace the built in command that expands the slides on hoverm to make it work when someone clicks a link(onclick event)

Lets say I have 6 links on the left side of the page, when the user clicks link1 panel1 opens and so on. Seems like it would be pretty straight forward, but I cannot get this to work. I have included all of my code.

Thanks in advance. Keep iin mind you must have jquery 1.3.min.js  library installed to test...

Judson
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Wellness Coalition America</title>
<script>
			/*
			 #		jQuery Slinky Slider Plugin
			 #		---------------------------
			 #		Version:			1.0
			 #		---------------------------
			 #		Author:				samhs
			 # 		http://ohwrite.co.uk/jquery/jquery-plugin-slinky-slider/
			 #		http://docs.jquery.com/Plugins/SlinkySlider
			 #
			 # 		Copyright (c) 2009 Sam Hampton-Smith
			 #
			 #		Dual licensed under the MIT and GPL licenses:
			 #	 	http://www.opensource.org/licenses/mit-license.php
			 #		http://www.gnu.org/licenses/gpl.html
			 #
			 #		Please view files mit.txt and gpl.txt for full license terms
			 #		And include these two files if you redistribute this software
			 */


(function($) {
		   
			$.fn.slinkySlider = function(settings) {	
				// Utility variables - do not alter
				var currentpanel;
				var panelwidth;
				var goforward = true;
				var t;
				settings = $.extend({}, $.fn.slinkySlider.defaults, settings);	

				return $(this).each(function(){
					panelwidth = $(this).width();
					$(this).css("overflow","hidden");
					settings.largesize = panelwidth-((settings.numberofpanels-1)*(settings.smallsize+settings.panelspacing));
					container = $(this);
					elheight = $(this).height();
					for (var i=1;i<=settings.numberofpanels;i++) {
						$(this).append("<div class='panelwrappers'><div class='panel'></div></div>");
						$(".panelwrappers:last .panel").load(settings.panelname+i+".cfm").parents(".panelwrappers").data("number",i);
					}
					currentpanel = $(".panelwrappers:first");
					$(".panelwrappers").css({
							"width"		:	settings.smallsize+"px", 
							"float"		:	"left",
							"height"	:	elheight+"px"});
					$(".panels").css({
							"width"		:	settings.largesize+"px",
							"height"	:	"100%"}); 
					$(currentpanel).css("width",settings.largesize+"px");
					$(".panelwrappers").not(":last").css("margin-right",settings.panelspacing+"px");
					$(".panelwrappers").each(function(){
						$(this).mouseover(function(){switchpanel(this);});
					});
					if (settings.doauto) t = setTimeout(function(){switchpanel(null);},settings.autotimer);
				});

				function switchpanel(newpanel) {
					if (newpanel==currentpanel) {
						// do nothing because we're already on this panel
					} else {
						var auto = false;
						if (newpanel==null) {
							auto = true;
							if (goforward && $(currentpanel).data("number")==settings.numberofpanels) {
								goforward=false;
							}
							if (!goforward && $(currentpanel).data("number")==1) {
								goforward=true;
							}						
							if (goforward) {
								newpanel = $(currentpanel).next();
							} else {
								newpanel = $(currentpanel).prev();
							}							
						}
						else {
							$(".panelwrappers").stop();
							clearTimeout(t);
						}
						$(".panelwrappers").not(newpanel).animate({width: settings.smallsize+"px"},settings.transition, "swing");
						$(newpanel).animate({width: settings.largesize+"px"},settings.transition, "swing");				
						currentpanel = newpanel;
						if (auto) t = setTimeout(function(){switchpanel(null);},settings.autotimer); 
				}
			}
		}
			
		$.fn.slinkySlider.defaults = {
			autotimer:8000,
			transition:1000,
			panelspacing:2,
			smallsize:24,
			numberofpanels:6,
			largesize:50,
			doauto:true,
			panelname:"panel"
		}

})(jQuery);
</script>
<style>
html,body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(images/backgroundMain.png);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	background-size: auto;
	background-attachment: fixed;
	background-position: center top;
	background-color:#FFF;
}

	#content {
	min-width:714px;
	min-height:340px;
	background:white;
	overflow:auto;
	border-bottom:1px solid #336699;
	border-left:1px solid #336699;
	border-right:1px solid #336699;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	right: 10px;
	}
.contentPages {
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 20px;
	padding-left: 20px;
	position: relative;
	width:694px;
}
.contentPages2 {
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 20px;
	padding-left: 20px;
	position: relative;
	width:970px;
}
.contentBottomImage {
	background-image: url(images/contentBoxBottom.jpg);
	background-repeat: no-repeat;
	height: 34px;
	width: 716px;
	margin-right: 10px;
	float: right;
	position: relative;
}
.bottomArea {
	height: auto;
	width: 990px;
	min-height: 220px;
	clear: both;
}
.footer {
	height: 30px;
	width: 970px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #336699;
	color: #666;
	padding: 5px;
	margin-top: 25px;
	position: absolute;
	vertical-align: top;
	white-space: nowrap;
}
.bottomAreaContent {
	width: 310px;
	padding-left: 20px;
	float: left;
	height: auto;
}
.titleBottomMain {
	color: #336699;
	font-size: 16px;
	height: auto;
	width: auto;
}
.banner {
	height: 110px;
	width: 980px;
	background-image: url(images/logoBanner.jpg);
	background-repeat: no-repeat;
	text-align: right;
	position: relative;
}
.leftNavLinks {
	height: auto;
	width: auto;
	padding-top: 4px;
	padding-bottom: 4px;
}
.linksBanner {
	float: right;
	height: auto;
	width: auto;
	color: #336699;
	padding-top: 4px;
	padding-right: 20px;
	padding-bottom: 4px;
	padding-left: 20px;
}
.wrapper {
	margin: auto;
	height: auto;
	width: 990px;
}
.contMain {
	height: 340px;
	width: 990px;
	background-image: url(images/mainBoxCenter.jpg);
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
}
.panelwrappers {
		overflow:hidden;
	}
.MainBoxTop {
	height: 24px;
	width: 990px;
	background-image: url(images/MainBoxTop.jpg);
	background-repeat: no-repeat;
}
.MainBoxBottom {
	height: 34px;
	width: 990px;
	background-image: url(images/mainBoxBottom.jpg);
	background-repeat: no-repeat;
	clear: both;
}
.leftNavMain {
	height: 300px;
	width: 222px;
	float: left;
	padding-top: 20px;
	padding-left: 20px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #336699;
	background-color: #FFF;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #336699;
	padding-right: 10px;
	padding-bottom: 10px;
}
.leftNavMain a {
	text-decoration: none;
}
.linksBannerHolder {
	float: right;
	height: auto;
	width: auto;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.alert1 {
	font-weight: bold;
	color: #F00;
}

</style>
<script type="text/javascript" src="scripts/jquery-1.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slinkySlider.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#content").slinkySlider();
	});
</script>
</head>
<body>
<div class="wrapper">
    <div class="banner">
      <div class="linksBannerHolder">
            <div class="linksBanner"><a href="demo.cfm?" style="text-decoration:none; color:#336699">Home</a></div>
            <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=9', 'content');">Testimonials</a></div>    
            <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=11', 'content');">Contact</a></div>
        <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=12', 'content');">Company</a></div>
      </div>
    <a href="demo.cfm"><img src="images/logoBanner.jpg" width="240" height="110" border="0" align="left" /></a>
  </div>
<div class="MainBoxTop"></div>
<div class="contMain">
<div class="leftNavMain">
  <p><strong><a href="##" style="color#:33669" onclick="">Corporate Wellness</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Onsite Medical Clinics</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Medical Management Programs</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Software and Reporting</a></strong></p>
  <p><strong><a href="##" style="color#:33669">HRA's and Screenings</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Educational Tools</a></strong></p>
</div>
<cfdiv id="content"></cfdiv>                          
</div>

<div class="MainBoxBottom"></div>


<!---<div class="bottomArea">
<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or something. </p>
</DIV>

<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or something.</p>
</DIV>

<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or somethi</p
</DIV>
</div>--->
<div class="footer">Copyright 2010 Wellness Coalition America</div>
</div>
</body>
</html>

Open in new window

LVL 3
judsonmusicAsked:
Who is Participating?
 
StealthyDevConnect With a Mentor Commented:
Change your jquery.slinkyslider.js file with the following content:

function changeSlide(var12){}

(function($) {
               
                  $.fn.slinkySlider = function(settings) {
                        changeSlide = switchpanel;

Now, you can access your panel using:
changeSlide($('.panelwrappers')[2]);
panel numbers - 0 to (n-1)


Like the code attached:


<p><strong><a href="javascript: changeSlide($('.panelwrappers')[0]);" style="color#:33669" onclick="">Corporate Wellness</a></strong></p>
  <p><strong><a href="javascript: changeSlide($('.panelwrappers')[1]);" style="color#:33669">Onsite Medical Clinics</a></strong></p>

Open in new window

0
 
rjdownCommented:
I'm not able to test as I have to leave shortly, but on line 59 you could try replacing $(this).mouseover with $(this).click
0
 
judsonmusicAuthor Commented:
I need to be able to do the onclick on external links. Like call the event that way instead of clicking or mousinf over the current frame. Call it from a label like "panel1" etc.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
StealthyDevCommented:
Hi...

To open panels, you can do something like this:

haccordion.expandli('slices', 0);

slices is the id of the div-according
0-n numbers is the index of the panel.

Best Regards.
0
 
judsonmusicAuthor Commented:
Is this based on the attached code??? Can u explain in more detail??
0
 
StealthyDevCommented:
i hope in your version:

.panelname(string) will work to open the panel you require
0
 
judsonmusicAuthor Commented:
Can u put the exact code that I woild place in the onclick="" event please? I don't know enough about jquery to put it together.  Thanks
0
 
StealthyDevCommented:
wait, i am working on this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.