Horizonal Carousel

Required JavaScript jQuery files

  • News photo alt text
    2 weeks 6 days ago

    There new questions emerging about the viability of a...

  • News photo alt text
    2 weeks 6 days ago

    A new version of the Boeing 747 is to be launced 2012....

  • Wally's Toy Shop Website
    15 weeks 3 days ago

    Zerotuch has released a new website for Wally's Toy Shop...

  • Chris Derret collecting business award
    15 weeks 4 days ago

    One of Zerotouch's clients, the Fee Group Plc, has...

  • News photo alt text
    16 weeks 6 days ago

    After 8-weeks development Zerotouch released a brand new...

CSS


/*--------------------------------------------------------------------------
jcarousel - used by news on home page (and aircaft if not superseeded)
--------------------------------------------------------------------------*/
.jcarousel-skin-tango .jcarousel-container-horizontal {
	padding:0 15px;
	width:930px;
	}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
	height:33px;
	width:928px;
}

.jcarousel-skin-tango .jcarousel-item {
	height:33px;
	width: 225px;
	/*background: transparent url('images/white-20-percent.png') repeat;	*/
	/*background-color: #050505;*/
	}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin: 0;
	padding-left: 7px;
	background: transparent url('images/news-carosel-item-bg.png') repeat-y;
	}
	
li.jcarousel-item p {
	font-size: 10px;
	margin: 0px 0 0 0;
	color:	#6F7074;
	}

li.jcarousel-item img.imagecache-news-thumb,
li.jcarousel-item img.imagecache-100by60,
li.jcarousel-item img.imagecache-cnews {
	float: right;
	margin-left: 5px;
	margin: 0px 0px 0 5px;	
	}

/* e.g. 1 hour 40 min ago */
li.jcarousel-item div.views-field-created {
	font-size: 10px;
	color:	#6F7074;
	display: none;
	}

li.jcarousel-item div.views-field-title a {
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: -57px;
    right: 8px; /* -17px+25px = 8px */
    width: 26px;
    height: 51px;
    cursor: pointer;
    background: transparent url(images/nav-phoenix.png) no-repeat 0 -60px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: -57px;
    left: 10px;
    width: 26px;
    height: 51px;
    cursor: pointer;
    background: transparent url(images/nav-phoenix.png) no-repeat 0 0;
    background-position: 0px 0px;
}

JavaScript


jQuery(document).ready(function() {
	jQuery('#viewscarousel-news-block-1').jcarousel({ 
		scroll: '1', 
		animation: 'slow', 
		wrap: 'both',
		skin: 'tango' 
	});
});



$(document).ready(function(){

	$("body .jcarousel-skin-tango .jcarousel-item").animate({opacity:
'0.5'}, "fast");
	
	$("body .jcarousel-skin-tango .jcarousel-item").hover(function() {
		$(this).animate({opacity: '1'},  "slow");

	}, function () {
		$(this).animate({opacity: '0.5'}, "slow");
	});

});

HTML


<div id="horizontal-news">
<div id="block-views-news-block_1" class="block block-views">
<div class="content">
<div class="view view-news view-id-news view-display-id-block_1 view-dom-id-2">
<div class="view-content">
<ul id="viewscarousel-news-block-1" class="jcarousel-skin-tango">
<li>
<div class="views-field-field-news-photo-fid">
                <span class="field-content"><a href="/drupal/phoenix/news/92/t4-heathrow" class="imagecache imagecache-cnews imagecache-linked
imagecache-cnews_linked"><img src="http://beamish/drupal/phoenix/sites/default/files/imagecache/cnews/gulfstream_aircraft.jpg" alt="News photo alt text" title="News photo
title text"  class="imagecache imagecache-cnews" width="106" height="33" /></a></span>
  </div>
<div class="views-field-title">
                <span class="field-content"><a href="/drupal/phoenix/news/92/t4-heathrow" title="T4 at Heathrow?" alt="T4 at Heathrow?">T4 at
Heathrow?</a></span>
  </div>
<div class="views-field-created">
                <span class="field-content"><em>2 weeks 6 days</em> ago</span>
  </div>
<div class="views-field-body">
<div class="field-content">
<p>There new questions emerging about the viability of a...</p></div>
</div>
</li>
<li>
<div class="views-field-field-news-photo-fid">
                <span class="field-content"><a href="/drupal/phoenix/news/91/boeing-747" class="imagecache imagecache-cnews imagecache-linked
imagecache-cnews_linked"><img src="http://beamish/drupal/phoenix/sites/default/files/imagecache/cnews/shutterstock_3011599.jpg" alt="News photo alt text" title="News photo
title text"  class="imagecache imagecache-cnews" width="106" height="33" /></a></span>
  </div>
<div class="views-field-title">
                <span class="field-content"><a href="/drupal/phoenix/news/91/boeing-747" title="Boeing 747" alt="Boeing 747">Boeing 747</a></span>
  </div>
<div class="views-field-created">
                <span class="field-content"><em>2 weeks 6 days</em> ago</span>
  </div>
<div class="views-field-body">
<div class="field-content">
<p>A new version of the Boeing 747 is to be launced 2012....</p></div>
</div>
</li>
<li>
<div class="views-field-field-news-photo-fid">
<p>                <span class="field-content"><a href="/drupal/phoenix/news/73/wallys-website" class="imagecache imagecache-cnews imagecache-linked
imagecache-cnews_linked"><img src="http://beamish/drupal/phoenix/sites/default/files/imagecache/cnews/wallys-temp_0.jpg" alt="Wally&#039;s Toy Shop Website" title="New
website for Wally&#039;s Toy Shop"  class="imagecache imagecache-cnews" width="106" height="33" /></a></span>
  </p></div>
<div class="views-field-title">
                <span class="field-content"><a href="/drupal/phoenix/news/73/wallys-website" title="Wally&amp;amp;#039;s Website" alt="Wally&amp;amp;#039;s
Website">Wally&#039;s Website</a></span>
  </div>
<div class="views-field-created">
                <span class="field-content"><em>15 weeks 3 days</em> ago</span>
</div>
<div class="views-field-body">
<div class="field-content">
<p>Zerotuch has released a new website for Wally's Toy Shop...</p></div>
</div>
</li>
<li>
<div class="views-field-field-news-photo-fid">
                <span class="field-content"><a href="/drupal/phoenix/news/46/%C2%A320k-%C2%A320million" class="imagecache imagecache-cnews imagecache-linked
imagecache-cnews_linked"><img src="http://beamish/drupal/phoenix/sites/default/files/imagecache/cnews/fee-collect-business-award.jpg" alt="Chris Derret collecting business award"
title="Chris Derret collects prestigious award"  class="imagecache imagecache-cnews" width="106" height="33" /></a></span>
  </div>
<div class="views-field-title">
<p>                <span class="field-content"><a href="/drupal/phoenix/news/46/%C2%A320k-%C2%A320million" title="£20K to £20million"
alt="£20K to £20million">£20K to £20million</a></span>
  </p></div>
<div class="views-field-created">
                <span class="field-content"><em>15 weeks 4 days</em> ago</span>
  </div>
<div class="views-field-body">
<div class="field-content">
<p>One of Zerotouch's clients, the Fee Group Plc, has...</p></div>
</div>
</li>
<li>
<div class="views-field-field-news-photo-fid">
                <span class="field-content"><a href="/drupal/phoenix/news/45/new-website-fee-group-plc" class="imagecache imagecache-cnews imagecache-linked
imagecache-cnews_linked"><img src="http://beamish/drupal/phoenix/sites/default/files/imagecache/cnews/you.jpg" alt="News photo alt text" title="News photo title text" 
class="imagecache imagecache-cnews" width="106" height="33" /></a></span>
  </div>
<div class="views-field-title">
                <span class="field-content"><a href="/drupal/phoenix/news/45/new-website-fee-group-plc" title="New website for the Fee Group Plc" alt="New website for
the Fee Group Plc">New website for the Fee Group Plc</a></span>
  </div>
<div class="views-field-created">
<p>                <span class="field-content"><em>16 weeks 6 days</em> ago</span>
  </p></div>
<div class="views-field-body">
<div class="field-content">
<p>After 8-weeks development Zerotouch released a brand new...</p></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--end of #horizontal-news--><!--end of #horizontal-news-->