Well you need a cookie in those other browsers. This could probably be tightened up and/or have options added, but basically:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title></title>
<style>
#slideshow {
position:relative;
visibility: hidden;
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.6;
background-color: #006600;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 600px;
display: block;
border: 0;
}
#hover {
font-size: 18px;
margin: 20px;
background-color: yellow;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var cook = {
set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cook.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
}, re = /[^\d]/g, activeslide;
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 800, function() {
activeslide = '' + $('#slideshow').children().index($next);
$active.removeClass('active last-active');
});
}
if((activeslide = cook.get('active-slide'))){
$('#slideshow').children().removeClass('active').eq(activeslide).addClass('active');
}
$('#slideshow').css({visibility: 'visible'});
setInterval( slideSwitch, 2000 );
$(window).on('unload', function(){
if(activeslide){
cook.set('active-slide', activeslide);
}
});
});
</script>
</head>
<body>
<map name="2" id="2">
<area shape="rect" coords="0,0,400,600" href="page-left.html" title="" target="_self" alt="" />
<area shape="rect" coords="400,0,800,600" href="page-right.html" title="" target="_self" alt="" />
</map>
<div id="slideshow">
<div class="active">
<div id="captionbar">Caption for image 1</div>
<img src="http://i284.photobucket.com/albums/ll12/lexxxijh/Beaches/Wallpaper-green-beach.jpg" alt="Slideshow Image 1" usemap="#2" />
</div>
<div>
<div id="captionbar">Caption for image 2</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Venice_beach_panorama.jpg" alt="Slideshow Image 2" usemap="#2" />
</div>
<div>
<div id="captionbar">Caption for image 3</div>
<img src="http://latitudes.nu/wp-content/uploads/2011/09/Perhentian-Islands.jpg" alt="Slideshow Image 3" usemap="#2" />
</div>
<div>
<div id="captionbar">Caption for image 4</div>
<img src="http://www.my-miami-beach.de/miami-beach-fotos/gross/Wetter-und-Klima-in-Miami-Beach-Florida.jpg" alt="Slideshow Image 4" usemap="#2" />
</div>
</div>
</body>
</html>
Bookmarks