Web Design Bournemouth | Blog | 123 | Web design and SEO » rotating header http://www.123webdesignbournemouth.co.uk/web-design-blog 123 Bournemouth Web Design | http://www.123webdesignbournemouth.co.uk/ Mon, 05 Dec 2011 07:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How To Customise jQuery Carousel for Your Header http://www.123webdesignbournemouth.co.uk/web-design-blog/web-design/web-design-bournemouth/how-to-customise-jquery-carousel-for-your-header/ http://www.123webdesignbournemouth.co.uk/web-design-blog/web-design/web-design-bournemouth/how-to-customise-jquery-carousel-for-your-header/#comments Mon, 01 Mar 2010 23:33:38 +0000 Darren http://www.123webdesignbournemouth.co.uk/web-design-blog/?p=290 Read the Rest...]]> Customised jQuery Carousel

This is a working example of how to get jQuery Carousel customised to work as a rotating graphic header on your webpage.

First things first – head over to http://sorgalla.com/projects/jcarousel/ and get yourself the http://sorgalla.com/projects/download-zip.php?jcarousel download file.

  • Download, extract,  stick it in the root of your site.
  • Include this inside the <head> tag of the page you’re inserting the jQuery Carousel into, modifying the “src” path name to match the location on your server:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
  • I used the ‘autoscrolling’ version to get going, and inserted the following script inside the <head> tag of my page:
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 4,
        wrap: 'last',
		animation: 800,
		scroll: 1,
        initCallback: mycarousel_initCallback
    });
});
</script>
  • Html – all I had to do to the html is insert:
<ul id="mycarousel" class="jcarousel-skin-ie7">

    <li>
      <img id="logotext" src="images/123-header-logo.png" width="516"
height="151" alt="123 web design bournemouth logo text" />
    </li>

    <li>
      <img id="logotext" src="images/123-header-logo3.png" width="516" 
height="151" alt="123 web design bournemouth logo text" />
    </li>


</ul>
  • Rinse and repeat the <li> tags again and again with different images as required in each.
  • You can also add in custom styled elements such as divs with other content within the <li></li> tags if you want text etc as well as an image – see this link for how we’ve done the 123 web design Bournemouth jquery carousel
  • Edit the skin.css file, and / or your own css file if required so that the widths match the header you want to apply the jQuery Carousel to.

I had a little bit of ‘fun’ tweaking my css to get the animation running nicely, but it wasn’t too much of a ball-ache to get the desired effect!

Mucho thanks to our German friends over at Sorgalla.com where I believe this code originated – eternal grateful-nesses to them!

]]> http://www.123webdesignbournemouth.co.uk/web-design-blog/web-design/web-design-bournemouth/how-to-customise-jquery-carousel-for-your-header/feed/ 0