I'm in the processes of creating a gallery with JCycle. I was given a
request to have:
gallery with forward/back arrows.
small grey box thumbnails for each image.
title displayed for each image/thumbnail.
onhover of another non-active thumbnail, the name changes to that,
onmouse out, it goes back to the name that is present.
I have all these things done BUT onmouse out, changing back to
original name.
Below is the code:
<script type="text/javascript">
$(document).ready(function(){
$.fn.cycle.defaults.timeout = 6000;
$(function() {
// run the code in the markup!
$('table pre code').not('#skip,#skip2').each(function() {
eval($(this).text());
});
$('#portfolio').after('<ul id="nav" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
before: onBefore,
after: onAfter,
next: '#next2',
prev: '#prev2',
pause: '1',
pagerEvent: 'click',
pagerAnchorBuilder: function(idx, slide, title) {
return '<a href="#" title="' + slide.title + '"><span
style="border: 1px solid rgb(255, 255, 255); background-position:
center center; background-repeat: no-repeat; width: 9px; height: 9px;
visibility: visible; cursor: pointer; float: left;" class="thumbnail"
title="' + slide.title + '" /></a>';
}
});
});
function onBefore() {
}
function onAfter() {
$('#output').html("") .append('<h4>' + this.title + '</h4>');
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".thumbnail").mouseover (
function onAfter() {
var largeAlt = $(this).attr("title");
$("h4").html("" + largeAlt + ""); return false;
});
});
</script>
