Databases
StackOverflow2013
Postsdbo
POHow can I build a filterable jquery slider for a portfolio?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I build a filterable jquery slider for a portfolio?
    text
    copied!<p>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.</p> <p>Any ideas how I can somehow clear the slider function, and then re-call it after each time the slider is filtered.</p> <p>Here is my code so far:</p> <pre><code>$(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).removeClass('hidden'); $('#slider li').appendTo('#slider ul'); } }); var count = $("#slider ul li:not('.hidden')").length -1; $('#controls li:not(li:lt(' + count + '))').remove(); } return false; }); }); </code></pre> <p>Any help is much appreciated, as I'm tearing my hair out here! Let me know if I've missed out any necessary information.</p> <p>EDIT: As requested, here is an example of the <a href="http://www.isleofmanadvertisingproofs.co.uk/portfolio-test/portfolio-test.html" rel="nofollow noreferrer">page in action</a>.</p> <p>Thanks, Sam</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload