Commit cd1333f4 authored by Richard Mansfield's avatar Richard Mansfield
Browse files

Change styling on slideshow & add button to rewind back to first slide


Signed-off-by: default avatarRichard Mansfield <richard.mansfield@catalyst.net.nz>
parent 9fe12b11
function Slideshow(id, count) {
var self = this;
this.id = '#slideshow' + id;
this.count = count - 1;
this.current = 0;
this.advance = function() {
if(this.current < this.count) {
$j(this.id).height($j(this.id + " img:eq(" + this.current + ")").height());
var self = this;
$j(this.id + " img:eq(" + this.current + ")").fadeOut(500, function() {
self.current++;
$j(self.id + " img:eq(" + self.current + ")").fadeIn(500);
$j(self.id).height($j(self.id + " img:eq(" + self.current + ")").height());
});
this.change = function(to) {
if (to == this.current || to < 0 || to > this.count) {
return false;
}
}
this.rewind = function() {
if(this.current > 0) {
$j(this.id).height($j(this.id + " img:eq(" + this.current + ")").height());
var self = this;
$j(this.id + " img:eq(" + this.current + ")").fadeOut(500, function() {
self.current--;
$j(self.id + " img:eq(" + self.current + ")").fadeIn(500);
$j(self.id).height($j(self.id + " img:eq(" + self.current + ")").height());
});
$j(this.id).height($j(this.id + " img:eq(" + this.current + ")").height());
$j(this.id + " img:eq(" + this.current + ")").fadeOut(500, function() {
self.current = to;
$j(self.id + " img:eq(" + self.current + ")").fadeIn(500);
$j(self.id).height($j(self.id + " img:eq(" + self.current + ")").height());
});
$j(this.id + ' td.control span').removeClass('disabled');
$j(this.id + ' td.control span.first').addClass('hidden');
if (to == 0) {
$j(this.id + ' td.control span.prev').addClass('disabled');
}
else if (to == this.count) {
$j(this.id + ' td.control span.next').addClass('disabled');
$j(this.id + ' td.control span.first').removeClass('hidden');
}
return false;
}
$j(this.id + ' td.control span.next').click(function() {return self.change(self.current + 1);});
$j(this.id + ' td.control span.prev').click(function() {return self.change(self.current - 1);});
$j(this.id + ' td.control span.first').click(function() {return self.change(0);});
// $j(this.id + ' td.control span.last').click(function() {return self.change(self.count);});
$j(this.id + " img").hide();
$j(this.id + " img:eq(" + this.current + ")").show();
}
......
<div class="slideshow" id="slideshow{$instanceid}">
<table class="images">
<tr>
<td class="control" onClick="slideshow{$instanceid}.rewind();"
onMouseOver="this.className='control highlight'"
onMouseOut="this.className='control'">&#060;</td>
<td class="control">
<span class="first hidden">&laquo;</span>
<span class="prev disabled">&lsaquo;</span>
</td>
<td>
{foreach from=$images item=image}
<a href="{$image.link}" target="_blank"><img src="{$image.source}" alt="{$image.title}" title="{$image.title}" /></a>
{/foreach}
</td>
<td class="control" onClick="slideshow{$instanceid}.advance();"
onMouseOver="this.className='control highlight'"
onMouseOut="this.className='control'">&#062;</td>
<td class="control">
<span class="next">&rsaquo;</span>
{*<span class="last">&raquo;</span>*}
</td>
</tr>
</table>
</div>
......
......@@ -173,21 +173,3 @@ ul.colnav li a {
.blockinstance-content .groupviewsection h5 {
color: #333;
}
/* Slideshow */
.slideshow .control {
background: #333333;
font-weight: bold;
font-size: 3em;
color: #FFFFFF;
}
.slideshow .highlight {
background: #555555;
}
.slideshow .images td {
border: 5px solid #888888;
}
.slideshow img {
max-width: 100% !important;
}
......@@ -403,21 +403,29 @@ html>body #column-container {
}
/* Slideshow */
.thumbnails img {
padding: 5px;
}
.slideshow {
margin: auto;
padding: .5em 0;
text-align: center;
width: 100%;
}
.slideshow .images td {
margin: 0;
padding: 0;
}
.slideshow .images td.control {
padding: 8px;
.slideshow table.images {
margin: 0 auto;
vertical-align: middle;
}
.slideshow .control {
vertical-align: middle;
font-size: 2em;
padding: 0;
}
.slideshow .control .disabled:hover,
.slideshow .control .disabled {
color: #ddd;
cursor: default;
}
.slideshow .control span:hover {
color: #888;
cursor: pointer;
}
.thumbnails {
padding: .5em;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment