shepline creative

Utilising the cycle.js code on a Responsive website

The solution that worked for me as found here: http://forum.jquery.com/topic/integrate-cycle-plugin-in-a-responsive-layout-using-media-queries

HTML code

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

<div>
<ul>
<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>
</ul>
</div>
</div><!– project –>

JavaScript Code

  1. $(document).ready(function() {
    $(‘.mainimg’).prepend(‘<img src=”images/loading.gif” >’);
    $(‘.mainimg’).cycle({
    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;
}

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