Hi all … Any help’s appreciated …
The challenge is that I have three - three page sliders … each one is actually being called on a list item external to the easySlider function …(#sliderNav ul li a#s1, #s2, #s3)
When I navigate from one slide show to the next … I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric ‘a’ attr …
I don’t quite know how to properly structure a callback function to update the current list item index from within the click event …
Any suggestions would KINDLY be appreciated cause I think I’m a bit over my JavaScript - JQuery skills threshold with this …
Thanks in advance and if you are way too busy to assist I completely understand …
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls',
className:''
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\\"javascript:void(0);\\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\\"javascript:void(0);\\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\\"javascript:void(0);\\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\\"javascript:void(0);\\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.attr('class',options.className)
.html('<a rel='+ i +' href=\\"javascript:void(0);\\">'+ (i+1) +'</a>')
.appendTo($("#" + options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent (t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
t = parseInt(t);
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
Here’s what I have to control the slideshows …
$(function()
{
$("#slideShow").easySlider(
{
controlsShow:true,
speed:100,
numeric:true,
numericId:'controls',
className:"sone",
firstId:'p1'
});
$('.stwo, .sthree').hide();
$('.sone').show();
$('#s1').click(
function()
{
$('.sone').show();
$('.stwo, .sthree').hide();
});
$('#s2').click(
function()
{
$('#slideShowTwo').easySlider(
{
controlsShow:true,
speed:100,
numeric:true,
numericId:'controlsTwo',
className:'stwo',
firstId:'p4'
});
$('.stwo').show();
$('.sone, .sthree').hide();
});
$('#s3').click(
function()
{
$('#slideShowThree').easySlider(
{
controlsShow:true,
speed:100,
numeric:true,
numericId:'controlsThree',
className:'sthree',
firstId:'p7'
});
$('.sthree').show();
$('.sone, .stwo').hide();
});
});
The HTML …
<div id="sliderNav">
<ul>
<li><a href="#p1" id="s1" rel="1">SEO</a></li>
<li><a href="#p4" id="s2" rel="1">Design</a></li>
<li><a href="#p7" id="s3" rel="1">Develop</a></li>
</ul>
</div>
<div id="slideShow" class="sone">
<ul>
<li id="p1"><!--<li>Slide One</li>-->
<div class="h2">This is The Main Page</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p2">
<div class="h2">This is Page Two</div>
Here's the second portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p3">
<div class="h2">This is Page Three</div>
Here's the third portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
</ul>
</div><!-- </div id="slideShow">-->
<div id="slideShowTwo" class="stwo">
<ul>
<li id="p4"><!--<li>Slide Two</li>-->
<div class="h2">This is Slideshow 2 Page One</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p5">
<div class="h2">This is Slideshow 2 Page Two</div>
Here's the second portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p6">
<div class="h2">This is Slideshow 2 Page Three</div>
Here's the third portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.</li>
</ul>
</div><!-- </div id="slideShowTwo">-->
<div id="slideShowThree" class="sthree">
<ul>
<li id="p7"><!--<li>Slide Three</li>-->
<div class="h2">This is Slideshow 3 Page One</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p8">
<div class="h2">This is Slideshow 3 Page Two</div>
Here's the second portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
<li id="p9">
<div class="h2">This is Slideshow 3 Page Three</div>
Here's the third portion of the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum.
Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim
commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi
consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet
purus lectus. Maecenas tempor ornare sollicitudin.
</li>
</ul>
</div><!-- </div id="slideShowThree">-->
And my CSS …
/*=======* Slider Navigation *=======*/
#sliderNav {
margin:12em 0 0 0;
float:left;
}
#sliderNav ul{
font:bold 1.8em "Century Gothic", "Arial Black";
padding:0;
margin:0;
text-align:left;
list-style:none;
}
#sliderNav ul li{
padding:0;
margin:0 0 4.3em 0;
display:block;
}
#sliderNav ul li a{
text-decoration:none;
color:#0b1528;
}
#sliderNav ul li a:hover{
color:#fff;
}
/*=======* Layout *=======*/
.h2{
font:bold 2em/20px "Century Gothic", "Arial Black";
margin:0 .25em .5em ;
padding:0;
}
/* Easy Slider */
#slideShow{
margin:8em 0 0 10em;
font:1.6em "Century Gothic", "Arial Black";
padding:0;
overflow:hidden;
}
#slideShow ul, #slideShow li,
#slideShow2 ul, #slideShow2 li{
margin:0;
padding:0;
list-style-type:none;
}
#slideShow2{margin-top:1em;}
#slideShow li, #slideShow2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
margin:0;
padding:0;
width:700px;
height:300px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slideShow1next, #slideShow1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:163px;
top:225px;
z-index:1000;
outline:1px solid #006;
}
#nextBtn, #slideShow1next{
left:807px;
}
#prevBtn a, #nextBtn a,
#slideShow1next a, #slideShow1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slideShow1next a{
background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
float:right;
width:120px;
margin:-25em 0 150px 0;
padding:0;
height:28px;
outline:1px solid #FF0;
display:inline;
}
ol#controls li{
margin:10px;
padding:0;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:right;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
#slideShowTwo{
margin:8em 0 0 10em;
font:1.6em "Century Gothic", "Arial Black";
padding:0;
overflow:hidden;
}
#slideShowTwo ul, #slideShowTwo li,
#slideShowTwo2 ul, #slideShowTwo2 li{
margin:0;
padding:0;
list-style-type:none;
}
#slideShowTwo2{margin-top:1em;}
#slideShowTwo li, #slideShowTwo2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
margin:0;
padding:0;
width:700px;
height:300px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slideShowTwo1next, #slideShowTwo1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:163px;
top:225px;
z-index:1000;
outline:1px solid #006;
}
#nextBtn, #slideShow1next{
left:807px;
}
#prevBtn a, #nextBtn a,
#slideShowTwo1next a, #slideShowTwo1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slideShowTwo1next a{
background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controlsTwo {
float:right;
width:120px;
margin:-25em 0 150px 0;
padding:0;
height:28px;
outline:1px solid #006;
display:inline;
}
ol#controlsTwo li{
margin:10px;
padding:0;
list-style:none;
height:28px;
line-height:28px;
}
ol#controlsTwo li a{
float:right;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controlsTwo li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controlsTwo li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
#slideShowThree{
margin:8em 0 0 10em;
font:1.6em "Century Gothic", "Arial Black";
padding:0;
overflow:hidden;
}
#slideShowThree ul, #slideShowThree li,
#slideShowThree2 ul, #slideShowThree2 li{
margin:0;
padding:0;
list-style-type:none;
}
#slideShowThree2{margin-top:1em;}
#slideShowThree li, #slideShowThree2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
margin:0;
padding:0;
width:700px;
height:300px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slideShowThree1next, #slideShowThree1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:163px;
top:225px;
z-index:1000;
outline:1px solid #006;
}
#nextBtn, #slideShow1next{
left:807px;
}
#prevBtn a, #nextBtn a,
#slideShowThree1next a, #slideShowThree1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slideShowThree1next a{
background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controlsThree {
float:right;
width:120px;
margin:-25em 0 150px 0;
padding:0;
height:28px;
outline:1px solid #F0F;
display:inline;
}
ol#controlsThree li{
margin:10px;
padding:0;
list-style:none;
height:28px;
line-height:28px;
}
ol#controlsThree li a{
float:right;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controlsThree li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controlsThree li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
/*=======* Panel Navigation *=======*/
.panelNav{
top:0;
left:550px;
margin:5em 0;
float:right;
}