shepline creative

Utilising the cycle.js code on a Responsive website

The solution that worked for me as found here:

HTML code

<img src=”image1.jpg” alt=””  />
<img src=”image2.jpg” alt=””  />
<img src=”image3.jpg” alt=””  />
<img src=”image4.jpg” alt=””  />

<li><a href=”image1.jpg”><img src=”image1-120×120.jpg” alt=”” /></a></li>
<li><a href=”image2.jpg”><img src=”image2-120×120.jpg” alt=”” /></a></li>
<li><a href=”image3.jpg”><img src=”image3-120×120.jpg” alt=”” /></a></li>
<li><a href=”image4.jpg”><img src=”image4-120×120.jpg” alt=”” /></a></li>
</div><!– project –>

JavaScript Code

  1. $(document).ready(function() {
    $(‘.mainimg’).prepend(‘<img src=”images/loading.gif” >’);
    slideExpr: ‘.slide’,
    fx: ‘fade’,
    slideResize: true,
    containerResize: false,
    pager: ‘.thumbs’,
    pagerAnchorBuilder: function(idx, slide) {
    // return selector string for existing anchor
    return ‘.thumbs li:eq(‘ + idx + ‘) a’;
    pause: 1

CSS code

.mainimg img {
background: #EEEEEE;
padding: 2%;
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;

img.loading {
width: 95% !important;
height: auto !important;
max-width: 95%;
height: auto;
border: none;
visibility: none;

Alternative to setting links to open in a new window

It’s neat because it works with my other jQuery applications, but this simple code opens up new links in a lightbox style window on top of your existing page. Standards compliant, or not…?

( GreyBox )

In love with jQuery

In the last few months, the designers and developers at Shepline Creative have discovered, and fallen in love with, jQuery. With reasonably simple and straight-forward, lightweight code, there seems to be endless possibilities for exciting and vibrant designs.

Some of my favourite jQuery effects at the moment are:

  • CrossSlide – some common slide-show animations, traditionally only available via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (that is, a lot!)
  • Catch My Flame: Infinite Caroursel – excellent slideshow/gallery software
  • jTabber – for tabbed pages
  • Accordian – nifty accordian/show-and-hide for cascading content