Демо
----------
Архивы
Это в head и /head
Code
<link href="/css/styles_storev5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript" src="/js/cluster.js"></script>
А это в самом конце перед /body
Code
<script type="text/javascript">
var ClusterHandler = new Cluster( {
cCapCount: 10,
nCapWidth: 616 + 4,
elClusterArea: $('home_main_cluster'),
elSlider: $('main_cluster_control'),
rgImageURLs: rgImageURLs
} );
</script>
Активация: Ставьте следующий код где вам угодно
Code
<div class="leftcol">
<div id="home_main_cluster">
<div class="main_cluster_content">
<div id="main_cluster_scroll" class="cluster_scroll_area" style="width: 7440px; ">
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_901589" src="картинка">
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_42700" src="картинка">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_901588" src="картинка">
<div class="main_cap_discount discount_block discount_block_large ">
<div class="discount_pct">текст</div>
<div class="discount_original_price">текст</div>
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" title="Buy it once. Play it on Mac or PC." src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_steamplay.png" width="123" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_58520" src="картинка">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_35460" src="картинка">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_550" src="картинка">
<div class="main_cap_discount discount_block discount_block_large ">
<div class="discount_pct">текст</div>
<div class="discount_original_price">текст</div>
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" title="текст" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_steamplay.png" width="123" height="22"> </div>
<h1>текст</h1>
<p>текст"
</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_18040" src="картинка" alt="DeathSpank">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_901574" src="картинка" alt="Fallout: New Vegas">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_6120" src="картинка">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_2450" src="картинка">
<div class="main_cap_discount discount_block discount_block_large ">
<div class="discount_pct">текст</div>
<div class="discount_original_price">текст</div>
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_47790" src="картинка">
<div class="main_cap_price">
<div class="discount_final_price">текст</div>
</div>
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<a class="cluster_capsule" href="ссылка">
<img class="cluster_capsule_image" id="img_901589" src="картинка">
<div class="main_cap_desc">
<div class="desc_overlay"></div>
<div class="main_cap_content">
<div class="main_cap_platform_area platform_area">
<img class="platform_img" src="http://cdn.store.steampowered.com/public/images/v5/platforms/platform_win.png" width="22" height="22"> </div>
<h1>текст</h1>
<p>текст</p>
</div>
</div>
</a>
<div style="clear: left;"></div>
<script type="text/javascript">
var rgImageURLs = {
'img_901589': 'картинка 1 слайда',
'img_42700': 'картинка 2 слайда',
'img_901588': 'картинка 3 слайда',
'img_58520': 'картинка 5 слайда',
'img_35460': 'картинка 6 слайда',
'img_550': 'картинка 7 слайда',
'img_18040': 'картинка 8 слайда',
'img_901574': 'картинка 9 слайда',
'img_6120': 'картинка 10 слайда',
'img_2450': 'картинка 11 слайда',
'img_47790': 'картинка 12 слайда',
'': ''
}
</script>
</div>
<div class="cluster_control_left" style="display: none;">
<h5><img src="/images/arrow_blue_left.gif"> Prev</h5>
</div>
<div class="cluster_control_right" style="display: none;">
<h5>Next <img src="/images/arrow_blue_right.gif"></h5>
</div>
</div>
<div id="main_cluster_control_ctn">
<div class="slider" id="main_cluster_control">
<div class="slider_bg">
</div>
<div class="handle">
</div>
</div>
</div>
</div>
Картинки должны иметь размер 615px на 353px и не забудьте про архивы!