Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This should work for you.</p> <pre><code>&lt;script type="text/javascript"&gt; $(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(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;div id="slider"&gt; &lt;ul&gt; &lt;li class="web"&gt;&lt;img src="images/01.jpg" alt="Css Template Preview" /&gt;&lt;/li&gt; &lt;li class="web"&gt;&lt;img src="images/02.jpg" alt="Css Template Preview" /&gt;&lt;/li&gt; &lt;li class="design"&gt;&lt;img src="images/03.jpg" alt="Css Template Preview" /&gt;&lt;/li&gt; &lt;li class="design"&gt;&lt;img src="images/04.jpg" alt="Css Template Preview" /&gt;&lt;/li&gt; &lt;li class="design"&gt;&lt;img src="images/05.jpg" alt="Css Template Preview" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="filter-portfolio"&gt; &lt;p&gt;Filter portfolio by: &lt;a href="" class="design"&gt;design&lt;/a&gt;, &lt;a href="" class="web"&gt;web&lt;/a&gt;, &lt;a href="" class="web design" id="startup"&gt;both&lt;/a&gt;.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Please note that I've changed your <code>filter-portfolio a</code> elements so they work on class name rather than innerHTML. The one with the id of <code>startup</code> is the one that gets pseudo-clicked by the startup function.</p> <p><strong>Now this bit is important!</strong></p> <p>You need to add the following to <code>easySlider.1.7.js</code> after line 199 and line 208 in order to get this to work.</p> <pre><code>$(obj).attr("rel", timeout); </code></pre> <p>Basically what you're doing is wherever a <code>setTimeout()</code> is called, you copy the returned value <code>timeout</code> into the <code>rel</code> attribute of your <code>#slider</code>. That way, we can kill off any pending animations by doing a <code>clearTimeout()</code> before we reset the slider. </p> <p>Or you can just download the modified <code>easySlider.1.7.js</code> from <a href="http://rapidshare.com/files/320996468/easySlider1.7.js.html" rel="nofollow noreferrer">here</a></p> <p>Hope this helps!</p> <p>Cheers,</p> <p>Iain</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