How can I build a filterable jquery slider for a portfolio?
I'm trying to create a filterable portfolio using a jquery slider, using easySlider and code I have adapted from various tutorials. The portfolio items are rendered as an unordered list, and shown or hidden based on their css class. I've managed to get this part working properly, but I can't work out what to do about the slider. It no longer shows the hidden items, but continues to display empty slides where they used to be.
Any ideas how I can somehow clear the slider function, and then re-call it after each time the slider is filtered.
Here is my code so far:
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true,
controlsBefore: '',
pause: 3000
});
$("#filter-portfolio a").click(function() {
$('#filter-portfolio .filteredby').removeClass('filteredby');
$(this).addClass('filteredby');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'both') {
$('#slider li.hidden').removeClass('hidden');
}
else {
$('#slider li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).addClass('hidden');
$(this).remove();
} else {
$(this).removeCla开发者_开发技巧ss('hidden');
$('#slider li').appendTo('#slider ul');
}
});
var count = $("#slider ul li:not('.hidden')").length -1;
$('#controls li:not(li:lt(' + count + '))').remove();
}
return false;
});
});
Any help is much appreciated, as I'm tearing my hair out here! Let me know if I've missed out any necessary information.
EDIT: As requested, here is an example of the page in action.
Thanks, Sam
This should work for you.
<script type="text/javascript">
$(document).ready(function(){
//Make a true copy of the UL before we mess with it
$("#slider ul").clone().appendTo("body").addClass("hidden").attr("id", "master");
//Set up our click functionality
$("#filter-portfolio a").click(function() {
classes = $(this).attr("class"); //Get the actual value of the "class" attribute.
classes = "#master li."+classes.replace(/[\s]/ig, ", #master li."); //Turn the class attribute into a jquery search string
$("#slider ul").empty();
$(classes).clone().appendTo("#slider ul");
//Kill off any previous sliders
clearTimeout($("#slider").attr("rel"));//Clear any pending animations
$("#slider ul").attr("style", "");//Clear any styles on the slider ul element
$("ol#controls").remove();//Remove the clickbar
//Fire EasySlider
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true,
controlsBefore: '',
pause: 500
});
return false;
});
//Fire off a fake click event
$("#filter-portfolio a#startup").click();
});
</script>
</head>
<body>
<div id="content">
<div id="slider">
<ul>
<li class="web"><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li class="web"><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li class="design"><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li class="design"><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li class="design"><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
<div id="filter-portfolio">
<p>Filter portfolio by: <a href="" class="design">design</a>, <a href="" class="web">web</a>, <a href="" class="web design" id="startup">both</a>.</p>
</div>
</div>
</body>
Please note that I've changed your filter-portfolio a elements so they work on class name rather than innerHTML. The one with the id of startup is the one that gets pseudo-clicked by the startup function.
Now this bit is important!
You need to add the following to easySlider.1.7.js after line 199 and line 208 in order to get this to work.
$(obj).attr("rel", timeout);
Basically what you're doing is wherever a setTimeout() is called, you copy the returned value timeout into the rel attribute of your #slider. That way, we can kill off any pending animations by doing a clearTimeout() before we reset the slider.
Or you can just download the modified easySlider.1.7.js from here
Hope this helps!
Cheers,
Iain
加载中,请稍侯......
精彩评论