Horizonal Carousel
Required JavaScript jQuery files
-
2 weeks 6 days ago
There new questions emerging about the viability of a...
-
2 weeks 6 days ago
A new version of the Boeing 747 is to be launced 2012....
-
15 weeks 3 days ago
Zerotuch has released a new website for Wally's Toy Shop...
-
15 weeks 4 days ago
One of Zerotouch's clients, the Fee Group Plc, has...
-
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's Toy Shop Website" title="New
website for Wally'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;#039;s Website" alt="Wally&amp;#039;s
Website">Wally'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-->