asked on

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

rjdown

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

judsonmusic

ASKER

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.

StealthyDev

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.

judsonmusic

ASKER

Is this based on the attached code??? Can u explain in more detail??

StealthyDev

i hope in your version:

.panelname(string) will work to open the panel you require

judsonmusic

ASKER

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

StealthyDev

wait, i am working on this.

ASKER CERTIFIED SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial