highlights.rhtml
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%= block_title(block.title) %>
<% if !block.featured_images.empty? %>
<div class='highlights-border'>
<div class='highlights-container'>
<% block.featured_images.each do |img| %>
<a href="<%= img[:address] %>" title="<%= img[:title] %>" class="highlights-image-link">
<%= content_tag :img, nil, :src => img[:image_src], :alt => img[:title] %>
<p class="highlights-label"><%= img[:title] %></p>
</a>
<% end %>
</div>
<% if block.navigation %>
<div class='highlights-block-pager'>
</div>
<% end %>
</div>
<p class="highlights-block-footer"></p>
<script type="text/javascript">
(function($) {
$.fn.cycle.transitions.customFade = function($cont, $slides, opts) {
$slides.not(":eq(" + opts.currSlide + ")").css("opacity", 0);
opts.before.push(function(curr, next, opts) {
$.fn.cycle.commonReset(curr, next, opts);
opts.cssBefore.opacity = 0;
});
opts.animIn = {
opacity: 1
};
opts.animOut = {
opacity: 0
};
opts.cssBefore = {
top: 0,
left: 0,
zIndex: 1,
display: 'block'
};
opts.cssAfter = {
zIndex: 0
};
};
var options = {
fx: 'customFade',
fastOnEvent: 1,
timeout: <%= block.interval * 1000 %>
};
<% if block.navigation %>
options.pager = '#block-<%= block.id %> .highlights-block-pager';
<% end %>
$('#block-<%= block.id %> .highlights-container').cycle(options);
})(jQuery);
</script>
<% else %>
<em><%= _('Please, edit this block and choose some images') %></em>
<% end %>