Using anchors in Cycle plugin - problems with .on("click", function() I guess
Hello,
I'm using anchors in Cycle plugin.
The first time I click on any anchor it works, but it does not work the next time.
I guess is something to do with .on("click", function()
but I'm not skilled enough to find a solution.
Any help will be much appreciated. Thanks!
function cycle() {
// Team Cycle.
var $cycleTeam = $(".cycle-team");
// The paging.
$cycleTeam
.before('<ul id="cycle-team-pager" />');
// Let's put in the next button.
$cycleTeam
.after("<div class='cycleTeamNext'>Next</div>");
$cycleTeam.cycle({
fx: "scrollHorz",
speed: 800,
easing: "easeOutExpo",
timeout: 0,
pager: ".cycle-team-pager",
next: ".cycleTeamNext",
prev: ".cycleTeamPrevious",
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#navint li:eq(' + (idx) + ') a';
}
});
// Resize Panel according to slide cycle selected.
var $panelTeam = $("#panel-team");
$("#navint li:eq(0) a")
.on("click", function() {
$panelTeam
.animate({ "width" : "430px" }, 800, "easeOutExpo");
});
$("#navint li:eq(1) a")
.on("click", function() {
$panelTeam
.animate({ "width" : "555px" }, 800, "easeOutExpo");
});
$("#navint li:eq(2) a")
.on("click", function() {
$panelTeam
.animate({ "width" : "555px" }, 800, "easeOutExpo");
});
$(".cycleTeamNext")
.on("click", function() {
var thePanelID = $(".cycle-team-pager").find("li.activeSlide").text();
if ( thePanelID == 0 ) {
$panelTeam
.animate({ "width" : "430px" }, 800, "easeOutExpo");
} else {
$panelTeam
.animate({ "width" : "555px" }, 800, "easeOutExpo");
}
});
}
------
<div class="panel" id="panel-team">
<ul class="cycle-team cycle">
<li>
<div class="columnTeamintro">
<ul id="navint">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
<p>This is Text1</p>
</div>
</li>
<li>
<div class="columnTeam">
<ul id="navint">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
<p>This is Text2</p>
</div>
</li>
<li>
<div class="columnTeam">
<ul id="navint">
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
<p>This is Text3</p>
</div>
</li>
</ul>
</div>