How to integrate the CSS Tricks jQuery Start/Stop Slider
My old portfolio home page had a slideshow with a few recent projects. It was, however, not too cool and took a bit too long to get through all the slides, so, I needed another option.
It all looked great until I quickly remembered that his example is built with hardcoded images and content – how would I modify it so that it pulled recent projects from my portfolio section?
Read the original article
Create a form called “home_slideshow”
I first created a form, called ‘home_slideshow’, so that I could use an article_custom tag to call the recent projects.
The home_slideshow form’s content is the following:
<div id="slide-<txp:rvm_counter />" class="slide"> <h2><txp:permlink><txp:title /></txp:permlink></h2> <p><txp:excerpt /></p> <txp:permlink><txp:zem_article_thumb limit=1/></txp:permlink> </div><!--close slide -->
and the article tag, on my home page template is:
<txp:article_custom form="home_slideshow" limit="6" pgonly="1" section="portfolio" sort="Posted desc" />
This tag is calling the last 6 articles from my portfolio section.
Increment the id
In the home_slideshow form I have created a div,with an id of slide-?, you may notice that there’s proprietary plugin code in there. I needed to increment each div’s id by one – whilst always beginning at 1 – so I found the rvm_counter plugin (from one of Textpattern’s core contributors, Ruud van Melick ) which needed to be modified to create the increment.
Modify the rvm_counter plugin
I found that whilst this plugin worked as stated, it actually kept incrementing on each page refresh, but I needed it to always begin at 1. I had a quick search on the Textpattern Support Forum and quickly found out what needed to be done.
You may also see that I use the zem_article_thumb plugin. This is so I can limit the number of article images, to one, as I have up to 5 sometimes.
Apart from the relative annoyance of editing the rvm_counter plugin code, I think the start/stop slider is great for giving your site a fresh look.