Overlays


Simple design,
basic setup

  demo-slideshow.css     2.85 KB (2,924 bytes)
  jquery.cycle2.js     46.4 KB (47,564 bytes)
  jquery.js     262 KB (268,381 bytes)
  raznye.html     (IE9: Save target as... saves it only as .htm, so add L for accuracy!)
  01.jpg
  02.jpg
  03.jpg
  04.jpg

  Code for the HTML file:

<head>
<link rel="stylesheet" href="demo-slideshow.css">
<script src="jquery.js"></script>
<script src="jquery.cycle2.js"></script>
</head>

<body>

<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td>

<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="4000"
data-cycle-loop="1">
<div class="cycle-overlay"></div>

<img src="01.jpg" data-cycle-title="Собо́р Васи́лия Блаже́нного" data-cycle-desc="St. Basil's Cathedral">
<img src="02.jpg" data-cycle-title="Храм Хри́ста, Спаси́теля" data-cycle-desc="Cathedral of Christ, the Savior">
<img src="03.jpg" data-cycle-title="Храм Хри́ста, Спаси́теля (внутри́)" data-cycle-desc="Cathedral of Christ, the Savior (interior)">
<img src="04.jpg" data-cycle-title="Кра́сная пло́щадь" data-cycle-desc="Red Square">

</div>

</td>
</tr>
</table>

</body>

  FYI for the CSS file:

Because the overlay strips were displayed in solid black instead of transparent in IE 9, the code filter: alpha(opacity=70); had to be added to the /* overlay */ section's background: property in the demo-slideshow.css file. This is a modification to the original file on the author's website, who was unresponsive in addressing this issue.