LinkBack URL
About LinkBacks
Help with Flash Gallery On Website
Hi me and another student have been put in charge of designing the schools new website as part of our coursework for ICT, however we are having a problem with the image galleries on the pages, they work as they should with all images linking to where they should be, our only problem is the navigation keeps on showing up and making it look very messy, i would like the image viewer to be the top layer of the page and not display the annoying navigation over the top of it.
here is an image of the problem...
Untitled.jpg
and here is the code ;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Clearbox : <default></title>
<script type='text/javascript' src='js/clearbox.js'></script>
<style type="text/css">
.container {
width: 500px;
height: 100px;
margin-right:auto;
margin-left:auto;
margin-top:20px;
margin-bottom:5px;
font-size:11px;
}
.container.clearfix #scroll {
height: 300px;
width: 700px;
}
.container.clearfix {
height: 300px;
width: 700px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.item a img {
float:left;
padding:3px;
background-color: #ffffff;
margin: 5px;
border:1px solid #cccccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.item a:hover img, .item a:active img {
padding:3px;
border:1px solid #cccccc;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
}
.clearfix:after{
clear:both;
}
#inline{
visibility: hidden;
color:#444;
}
</style>
<link href="CSS/ddsmoothmenu.css" rel="stylesheet" type="text/css">
<link href="CSS/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript">
/*
// ClearBox Config File (JavaScript)
*/
var
// CB layout:
CB_MinWidth=300, // minimum (only at images) or initial width of CB window
CB_MinHeight=300, // initial heigth of CB window
CB_WinPadd=15, // padding of the CB window from sides of the browser
CB_ImgBorder=3, // border size around the picture in CB window
CB_ImgBorderColor='#ffffff', // border color around the picture in CB window
CB_Padd=4, // padding around inside the CB window
CB_BodyMarginLeft=0, //
CB_BodyMarginRight=0, // if you set margin to <body>,
CB_BodyMarginTop=0, // please change these settings!
CB_BodyMarginBottom=0, //
CB_ShowThumbnails='auto', // it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!
CB_ThumbsBGColor='#000000', // color of the thumbnail layer
CB_ThumbsBGOpacity=.35, // opacity of the thumbnail layer
CB_ActThumbOpacity=.65, // thumbnail opacity of the current viewed image
CB_SlideShowBarColor='#ffffff', // color of the slideshow bar
CB_SlideShowBarOpacity=.60, // opacity of the slideshow bar
CB_SlideShowBarPadd=17, // padding of the slideshow bar (left and right)
CB_SlideShowBarTop=2, // position of the slideshow bar from the top of the picture
CB_SimpleDesign='off', // if it's 'on', CB doesn't show the frame but only the content - really nice
CB_CloseBtnTop=-10, // vertical position of the close button in picture mode
CB_CloseBtnRight=-14, // horizontal position of the close button in picture mode
CB_CloseBtn2Top=-20, // vertical position of the close button in content mode
CB_CloseBtn2Right=-30, // horizontal position of the close button in content mode
CB_OSD='off', // turns on OSD
CB_OSDShowReady='off', // when clearbox is loaded and ready, it shows an OSD message
// CB font, text and navigation (at the bottom of CB window) settings:
CB_FontT='Verdana', //
CB_FontSizeT=13, // these variables are referring to the title or caption line
CB_FontColorT='#777777', //
CB_FontWeightT='normal', //
CB_FontC='arial', //
CB_FontSizeC=11, // these variables are referring to
CB_FontColorC='#999999', // comment lines under the title
CB_FontWeightC='normal', //
CB_TextAlignC='justify', //
CB_txtHCMax=120, // maximum height of the comment box in pixels
CB_FontG='arial', //
CB_FontSizeG=11, // these variables are referring to the gallery name
CB_FontColorG='normal', //
CB_FontWeightG='@@CB_FontWeightG@@', //
CB_PadT=10, // space in pixels between the content and the title or caption line
CB_OuterNavigation='off', // turns outer navigation panel on
CB_ShowURL='off', // it shows the url of the content if no title or caption is given
CB_ItemNum='on', // it shows the ordinal number of the content in galleries
CB_ItemNumBracket='()', // whatever you want
CB_ShowGalName='', // it shows gallery name
CB_TextNav='on', // it shows previous and next navigation
CB_NavTextImgPrvNxt='on', // it shows previous and next buttons instead of text
CB_ShowDL='on', // it shows download controls
CB_NavTextImgDL='on', // it shows download buttons instead of text
CB_ImgRotation='on', // it shows the image rotation controls
CB_NavTextImgRot='on', // it shows the image rotation buttons instead of text
// Settings of the document-hiding layer:
CB_HideColor='#000000', // color of the layer
CB_HideOpacity=.8, // opacity (0 is invisible, 1 is 100% color) of the layer
CB_HideOpacitySpeed=400, // speed of fading
CB_CloseOnH='on', // CB will close, if you click on background
// CB animation settings:
CB_Animation='double', // 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (high cpu usage)
CB_ImgOpacitySpeed=300, // speed of content fading (in ms)
CB_TextOpacitySpeed=300, // speed of text fading under the picture (in ms)
CB_AnimSpeed=300, // speed of the resizing animation of CB window (in ms)
CB_ImgTextFade='on', // turns on or off the fading of content and text
CB_FlashHide='on', // it hides flash animations on the page before CB starts
CB_SelectsHide='on', // it hides select boxes on the page before CB starts
CB_SlShowTime=3000, // default speed of the slideshow (in sec)
CB_Preload='on', // preload neighbour pictures in galleries
CB_ShowLoading='on' //
;
</script>
<div class="container clearfix">
<head>
<style>
#scroll {
height: 100px;
overflow: auto;
}
</style>
<body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ashdown Staff</title>
<!-- Stylesheet -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<!-- Javascript -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/ddsmoothmenu.js" type="text/javascript"></script>
<script src="js/contentslider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/DIN_500.font.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
</head> <link rel="icon" type="image/x-ico" href="http://www.Ashdowncollege.org.uk/favicon.ico" />
<body>
<div id="bg">
<!-- Wapper Sec -->
<div id="wrapper_sec">
<!-- masterhead -->
<div id="masterhead">
<!-- Logo -->
<div class="logo"><a href="Ashdown index.html"><img src="images/ashdown logo.png" alt="" /></a></div>
<!-- masterhead Right Section -->
<div class="topright_sec">
<!-- top navigation -->
<div class="topnavigation"></div>
<div class="clear"></div>
<!-- top search -->
<div class="top_search">
<div class="advance_search"><a href="#">Advance Option</a></div>
<ul>
<li><input name="txt" value="Search you any keyword"
onfocus="if(this.value=='Search Ashdown POST 16=') {this.value='';}"
onblur="if(this.value=='') {this.value='Search you any keyword';}" type="text" /></li>
<li><a class="search" href="#">Search</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
<div class="clear"></div>
<!-- Navigation -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li class="first"><a class="selected" href="../index.html">Home</a></li>
<li><a href="D:\All Websites\Crown Woods Ashdown\UC Ashdown.html">What's On In Ashdown</a></li>
<li><a href="Ashdown Curriculum.html">Ashdown Curriculum</a>
</li>
<li><a href="Ashdown Staff.html">Ashdown Staff</a> </li>
</li>
<li><a href="UC Ashdown.html">Gallery</a></li>
</div>
<!-- navigation ends -->
<div class="clear"></div>
</div>
</div>
<!-- Content Seciton -->
<div id="content_section">
<!-- News Updates -->
<div class="news_updates">
<span class="news_update">News Updates</span>
<span class="news_date"><em>28-11-2010 10:30 PM: </em></span>
<span class="news_des"> </span></div>
<div class="clear"></div>
<!-- Gallery -->
<div class="gallery">
<div class="gallery_top">
<div class="clear">
<p> </p>
<h2>Ashdown School Gallery </h2>
<div id="scroll">
<center>
<div class="item">
<div class="item">
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3478.JPG" title="Ashdown"><img src="School Thumbs/Thumb1.png" alt="Image1" width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3479.JPG" title="Ashdown"><img src="School Thumbs/Thumb2.png" alt="" width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3480.JPG" title="Ashdown"><img src="School Thumbs/Thumb3.png" alt=" " width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3482.JPG" title="Ashdown"><img src="School Thumbs/Thumb4.png" alt=" " width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"></div>
</div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3483.JPG" title="Ashdown"><img src="School Thumbs/Thumb5.png" alt=" " width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3488.JPG" title="Ashdown"><img src="School Thumbs/Thumb6.png" alt=" " width="108" height="101" class="border" /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3489.JPG" title="Ashdown"><img class="border" src="School Thumbs/Thumb7.png" alt=" " /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3491.JPG" title="Ashdown"><img class="border" src="School Thumbs/Thumb8.png" alt=" " /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3493.JPG" title="Ashdown"><img class="border" src="School Thumbs/Thumb9.png" alt=" " /></a>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="example/slides/Ashdown.jpg" title="Ashdown"></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="school/IMG_3495.JPG" title="Ashdown"><img class="border" src="School Thumbs/Thumb11.png" alt=" " /></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"></div>
<div class="item">
<div class="item"></div>
</div>
<p></p>
<div class="item"><a rel="clearbox[gallery=Gallery,,comment= ]" href="example/slides/Ashdown.jpg" title="Ashdown"></a></div>
<div class="item">
<div class="item"></div>
</div>
<div class="item"></div>
</div>
</center>
</div>
</div>
<DIV id=bottom_seciton>
<DIV id=footer><!--Find your way -->
<DIV class=find_your_way>
<H5>Find your Way</H5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Prospectuses.html">Prospectus</a></li>
<li><a href="Latest News.html">Latest News</a></li>
<li><a href="Contact Us.html">Contact Us</a></li>
</ul>
</DIV><!-- Help and Support -->
<DIV class=help_support></DIV><!-- Quick Links -->
<DIV class=quick_links></DIV><!-- Addmission -->
<DIV class=Addmissoin></DIV><!-- Contact Us -->
<DIV class=contact_us>
<H5>Contact Us</H5>
<UL>
<LI class=telephone_no>0208 850 7678 </LI>
<LI class=mailing_address>145 Bexley Road<BR>Eltham<BR>SE9 2PT </LI>
<LI class=email_address><A href="">info@crownwoods.org.uk </A></LI></UL>
<P> </P></DIV>
<DIV class=clear></DIV></DIV></DIV>
</body>
</html>
Reply With Quote
Related threads:
Re: Help with Flash Gallery On Website
