OK, to get rid of the nav links, comment this out like so:
Code:
<!-- <script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script> -->
You could just remove it, but if you get more images you will want it, and will want to style it so that it goes with the rest of the page.
Now to do the fading, add this script to the head:
Code:
<script type="text/javascript">
/* Cross Browser Image Fader © 2007 John Davenport Scheuer
This comment must remain for Legal Use */
var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['fader', 0];
////////////// Stop Editing //////////////
function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>
right before your MM_swap script, and change this:
Code:
function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var imgHTML='<img src="'+imgsrc.href+'">';
document.getElementById('loadarea').innerHTML=imgHTML;
return false
}
else
return true
}
to:
Code:
function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
if(document.getElementById('fader'))
fade(document.getElementById('fader'),'out',0,10,0);
var imgHTML='<table width="100%" height="100%"><tr><td style="border:none;background:none;"><img id="fader" src="'+imgsrc.href+'"></td></tr></table>';
setTimeout(function(){
document.getElementById('loadarea').innerHTML=imgHTML;
fade(document.getElementById('fader'),'in',100,2,40);
},200);
return false
}
else
return true
}
and change your loadarea css to:
Code:
#loadarea {
margin-top: 10px;
padding: 0px;
float: right;
height: 330px;
width: 365px;
margin-right: 10px;
}
Bookmarks