tru visual
New member
Hi Leute,
ich habe folgendes Problem:
habe mir eine JSscript Galerie in bestehenden HTML Code integriert.
Alles funktioniert, alles.
Nur optisch passt mir da was nicht, undzwar der blauer Rahmen um die Galeriebilder. Das blau lässt mich erahnen, das es sich wohl um ein "Link" blau handelt.
Kann mir da jemand weiterhelfen? Hab in der HTML nachgeschaut, in der gallery.css und in der gallery.js.
Aber nichts gefunden, wo ich einfluß auf den blauen Rahmen nehmen kann.
Schaut hier: Twilight arts
Ich danke euch schon einmal für eure Aufmerksamkeit, danke.
LG
tru
das jsscript:
und die CSS
ich habe folgendes Problem:
habe mir eine JSscript Galerie in bestehenden HTML Code integriert.
Alles funktioniert, alles.
Nur optisch passt mir da was nicht, undzwar der blauer Rahmen um die Galeriebilder. Das blau lässt mich erahnen, das es sich wohl um ein "Link" blau handelt.
Kann mir da jemand weiterhelfen? Hab in der HTML nachgeschaut, in der gallery.css und in der gallery.js.
Aber nichts gefunden, wo ich einfluß auf den blauen Rahmen nehmen kann.
Schaut hier: Twilight arts
Ich danke euch schon einmal für eure Aufmerksamkeit, danke.
LG
tru
das jsscript:
Code:
//GLOBALS
var nl = "\n"; // new line, for nice code :-)
var imgFolder = 'images'; //folder with subfolders that contain big images
var smallFolder = 'small'; //folder with subfolders that contain small images (thumbnails)
var imgName = 'photo'; //image name (e.g. the first image is photo-001 - or if you change name to "image" then the first image name is image-001)
var imgExt = 'jpg'; //extension (filetype) for big images
var smallExt = 'gif'; //extension (filetype) for small images
var setColumns = 5; // how many columns per page
var setRows = 0; // how many rows to skip before scroll starts, check and adjust manually
var setHeight = 76+10+10; // this is important for scroller: max small image (thumbnail) height + <td> padding-top + <td> padding-bottom (see css file)
//GLOBALS - GALLERY FOLDERS ('<folder>', <number of images>)
var setFolders = Array (
Array('sailing',11),
Array('skiing',5),
Array('misc',6),
Array('me',1)
);
//GALLERY FUNCTIONS
function leadingZero(getImage){
if (getImage < 10)setImage = "00" + getImage;
if (getImage > 9 && getImage < 100)setImage = "0" + getImage;
if (getImage > 99)setImage = getImage;
return setImage;
}
function initGallery(){
showGallery(0,setFolders[0][1],setFolders[0][0]);
}
function showMenu(){
returnData = '<tr><td id="menu" colspan="'+ setColumns +'"> | ';
for (getFolder = 0; getFolder < setFolders.length; getFolder++){
returnData += '<a href="javascript:showGallery(0,'+setFolders[getFolder][1]+',\''+setFolders[getFolder][0]+'\')">'+setFolders[getFolder][0]+'</a> | ';
}
returnData += '</td></tr>'+nl;
return returnData;
}
function showGallery(getImage,maxImages,setFolder){
i = 0;
setScroll = Math.round(getImage / setColumns)-setRows;
if (setScroll < 0)setScroll = 0;
setScroll = setScroll*setHeight;
returnData = '<table>'+nl;
returnData += '<tr><td id="header" colspan="'+ setColumns +'">Gallery</td></tr>'+nl;
returnData += showMenu();
returnData += '<tr><td id="title" colspan="'+ setColumns +'">'+ setFolder +'</td></tr>'+nl;
for (displayImage = 1; displayImage <= maxImages; displayImage++){
i++;
setImage = leadingZero(displayImage);
if (i == 1)returnData += '<tr>'+nl;
setClass = '';
if (displayImage == getImage)setClass = ' class="selected"';
returnData += '<td id="image" '+ setClass +'>';
returnData += '<a style="a:link; color:#FFFFFF" href="javascript:showImage('+ displayImage +','+ maxImages +',\''+ setFolder +'\')"><img src="'+ smallFolder +'/'+ setFolder +'/'+ imgName +'-'+ setImage +'.'+ smallExt +'"></a>'+nl;
returnData += '</td>';
if (i == setColumns){
returnData += '</tr>'+nl;
i = 0;
}
}
if (i > 0)returnData += '<td colspan="'+ (setColumns - i) +'"></td>'+ nl +'</tr>'+nl;
returnData += '<tr><td id="footer" colspan="'+ setColumns +'"><a href="http://truvisual.justskullz.de">tru visual</a></td></tr>'+nl;
returnData += '</table>'+nl;
writeData(returnData,setScroll);
}
function showImage(getImage,maxImages,setFolder){
setImage = leadingZero(getImage);
imgNxt = getImage + 1;
imgPre = getImage - 1;
if (imgNxt > maxImages)imgNxt = 1;
if (imgPre < 1)imgPre = maxImages;
returnData = '<table>'+nl;
returnData += '<tr id="selector">'+nl;
returnData += '<td><a href="javascript:showImage('+ imgPre +','+ maxImages +',\''+ setFolder +'\')">previous</a></td>'+nl;
returnData += '<td align="center"><a href="javascript:showGallery('+ getImage +','+ maxImages +',\''+ setFolder +'\')">close</a></td>'+nl;
returnData += '<td align="right"><a href="javascript:showImage('+ imgNxt +','+ maxImages +',\''+ setFolder +'\')">next</a></td>'+nl;
returnData += '</tr>'+nl;
returnData += '<tr><td colspan="3"><a href="javascript:showGallery('+ getImage +','+ maxImages +',\''+ setFolder +'\')"><img src="'+ imgFolder +'/'+ setFolder +'/'+ imgName +'-'+ setImage +'.'+ imgExt +'"></a></td></tr>'+nl;
returnData += '<tr id="selector"><td colspan="3">'+ getImage +' / '+ maxImages +'</td></tr>'+nl;
returnData += '</table>'+nl;
writeData(returnData,0);
}
function writeData(returnData,setScroll){
document.getElementById('gallery').innerHTML = returnData;
scrollTo(0,setScroll);
}
//START
initGallery();und die CSS
Code:
body {
background-color: #404040;
color : #FF8000;
margin: 0px;
font-family: Verdana, Arial, helvetica;
}
body a:link, body a:visited, body a:active {
text-decoration: none;
font-weight: bold;
color : #FF8000;
}
body a:hover {
text-decoration: none;
color : #FF8000;
}
a.MENU {
background-color:#323232;
text-align:left;
width: 100px;
height: 14px;
padding:8px;
border:thin solid #CCCCCC;
border-left:0px;
border-right:0px;
font-family:arial;
font-size: 12px;
font-weight:100;
color:#FF8000;
text-decoration:none;
display: block;
margin-bottom: 10px;
}
a.MENU:hover {
color:#CCCCCC;
border:thin solid #FF8000;
border-left:0px;
border-right:0px;
img {
border: 0px none;
}
table {
margin-top: 10px;
margin-bottom: 10px;
border: 0px none;
border-collapse: collapse;
}
td {
padding-top: 10px;
padding-bottom: 10px;
background-color: #404040;
text-align: center;
font-size: 11px;
border: 0px solid #FF8000;
}
#image {
width: 130px;
}
.selected {
background-color: #FF8000; /*#F29733;*/ }
#menu,#header,#footer {
background-color: #EAEAEA;
}
#menu,#header {
border-bottom: 1px solid #EAEAEA;
letter-spacing: 2px;
text-transform: capitalize;
}
#selector td {
font-weight: bold;
width: 30%;
padding: 2px;
}
#menu,#header,#title {
padding: 2px;
}
#header {
font-size: 19px;
font-weight: bold;
}
#title, #footer {
text-align: left;
background-color: #FFFFFF;
padding-left: 10px;
}
#title {
font-weight: bold;
color: #F29733;
font-size: 13px;
}
#footer {
padding: 10px;
font-size: 10px;
}
