PDA

View Full Version : picture help please

spyboy1o1
03-20-2009, 07:25 PM
please help me get this code working, why is it that what im doing isnt working?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Gallery</title>

<style type="text/css">
body {
background-color: #000000;
}
#big_pic {
width: 700px;
height: 450px;
background-color: white;
}
#pic_list table {
margin-top: 5%;
width: 700px;
height: 65px;
background-color: white;
}
#pic_list img {
width: 80px;
height: 60px;
margin-right: 7px;
filter:alpha(opacity=60);-moz-opacity:.60;
margin-left: 7px;
border: none;
margin-top: 5px;
}
#pic_list img:hover {
width: 80px;
height: 60px;
filter:alpha(opacity=100);-moz-opacity:1.0;
}
#pic_list img:selected {
width: 80px;
height: 60px;
filter:alpha(opacity=90);-moz-opacity:.90;
}
</style>
</head>

<body>
<center>
<div id="big_pic" >
<script type="text/javascript">
var picsel;
document.write(picsel);
function gg(){
picsel = 5;
}
</script>
</div><!-- end of big_pic -->
<div id="pic_list">
<table>
<tr>
<td><a href="#big_pic" onclick="gg()" id="name1"><img src="http://devkick.com/lab/galleria/img/flowing-rock.jpg"></a></td>
<td><img src="http://devkick.com/lab/galleria/img/stones.jpg"></td>
<td><img src="http://devkick.com/lab/galleria/img/grass-blades.jpg"></td>
<td><img src="http://devkick.com/lab/galleria/img/ladybug.jpg"></td>
<td><img src="http://devkick.com/lab/galleria/img/lightning.jpg"></td>
<td><img src="http://devkick.com/lab/galleria/img/lotus.jpg"></td>
<td><img src="http://devkick.com/lab/galleria/img/mojave.jpg"></td>
</tr>
</table>
</div><!-- end of pic_list -->
</center>
</body>

</html>
haukke45
03-28-2009, 01:30 PM
I hope this helps: just copy and past over your old one this is the first half it was to long to put in one message :o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gallery</title>
<style type="text/css">
body {background-color: #000000;}
/* Tables within main text, ie., brings them into alignment with margined text*/
.show { margin-left: 10px; margin-top: 10px; text-align: left; }
/* jsoff for hyperlink font-size for error messages where JavaScript isn't working & media error messages */
.jsoff { font-family: verdana, Geneva, arial, helvetica, sans-serif; font-size: 11px; color: #585858; font-weight: normal;
font-style: normal; text-align: left; text-decoration: none; margin-left: 10px; margin-right: 10px; }
.jsoff a:link{ font-size: 11px; text-decoration: none; }
.jsoff a:visited{ font-size: 11px; text-decoration: none; }
.jsoff a:hover{ font-size: 11px; text-decoration: underline; }
.jsoff a:active{ font-size: 11px; text-decoration: none; }
.big_pic { margin-left: 28px; margin-top: 10px; text-align: center;
width: 700px;
height: 450px;
background-color: #white;
}
.pic_list table {
margin-top: 5%;
width: 700px;
height: 65px;
background-color: white;
}
.pic_list img {
width: 80px;
height: 60px;
margin-right: 7px;
filter:alpha(opacity=60);-moz-opacity:.60;
margin-left: 7px;
border: none;
margin-top: 5px;
}
.pic_list img:hover {
width: 80px;
height: 60px;
filter:alpha(opacity=100);-moz-opacity:1.0;
}
.pic_list img:selected {
width: 80px;
height: 60px;
filter:alpha(opacity=90);-moz-opacity:.90;
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" align="center" height="100%" bgcolor="#FFFFFF" >
<tr>
<td width="700px" height="438" valign="top">
<!-- begin of big_pic -->
<div style="display: none;" id="picGallery_loading">
<div class="big_pic">
<script type="text/javascript">
<!--
document.write('<p class="jsoff">YOUR PICTURE GALLERY IS NOW LOADING...</p>')
//-->
</script><p class="jsoff">YOUR PICTURE GALLERY IS NOW LOADING...</p>
</div>

<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGallery_loading').style.display = 'block';}
//-->
</script>
</div>
<!-- this is like this because of html rendering oddity in firefox -->
<div style="display: block; visibility: visible;" id="picGalleryNoScript_0">
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/flowing-rock.jpg"
alt="flowing-rock"
id="picture_0" width="700" height="438"></p>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_0').style.display = 'none';}
//-->
</script></div>


<div class="show" id="picGalleryNoScript_1">
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/stones.jpg"
alt="stones"
id="picture_1" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_1').style.display = 'none';}
//-->
//-->
</script></div>


<div class="show" id="picGalleryNoScript_2" >
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/grass-blades.jpg"
alt="grass-blades"
id="picture_2" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_2').style.display = 'none';}
//-->
</script></div>


<div class="show" id="picGalleryNoScript_3">
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/ladybug.jpg"
alt="ladybug"
id="picture_3" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_3').style.display = 'none';}
//-->
</script></div>


<div class="show" id="picGalleryNoScript_4">
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/lightning.jpg"
alt="lightning"
id="picture_4" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_4').style.display = 'none';}
//-->
</script></div>


<div class="show" id="picGalleryNoScript_5">
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/lotus.jpg"
alt="lotus"
id="picture_5" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_5').style.display = 'none';}
//-->
</script></div>
<div class="show" id="picGalleryNoScript_6">
<div>
<p class="big_pic">
<img src="http://devkick.com/lab/galleria/img/mojave.jpg"
alt="mojave"
id="picture_6" width="700" height="438"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_6').style.display = 'none';}
//-->
</script></div>

</td>
<td width="31px"><img src="spacer.gif" width="2" height="1">
</TD></TR></TBODY></TABLE>

<!-- end of big_pic -->
haukke45
03-28-2009, 01:32 PM
Here we go with second half: <center>
<div class="pic_list">
<table>
<tr>
<td class="pic_list"><A id=back style="FONT-WEIGHT: bold; FONT-SIZE: 7.5pt" onclick="showDivPrev();return false;" href="spyboy101.html#" target=_top span>Back</A></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_0 onmouseover=ColorOver(this); title="Slide 1" onclick="showDiv(0);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/flowing-rock.jpg"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_1 onmouseover=ColorOver(this); title="Slide 2" onclick="showDiv(1);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/stones.jpg"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_2 onmouseover=ColorOver(this); title="Slide 3" onclick="showDiv(2);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/grass-blades.jpg" id="name3"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_3 onmouseover=ColorOver(this); title="Slide 4" onclick="showDiv(3);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/ladybug.jpg" id="name4"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_4 onmouseover=ColorOver(this); title="Slide 5" onclick="showDiv(4);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/lightning.jpg" id="name5"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_5 onmouseover=ColorOver(this); title="Slide 6" onclick="showDiv(5);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/lotus.jpg" id="name6"></a></td>
<td class="pic_list"><A class=popupStyle id=pictureLink_6 onmouseover=ColorOver(this); title="Slide 7" onclick="showDiv(6);return false;"
onmouseout=ColorOut(this); href="spyboy101.html#" target=_top><img src="http://devkick.com/lab/galleria/img/mojave.jpg" id="name7"></a></td>
<td class="pic_list"><A id=next style="FONT-WEIGHT: bold; FONT-SIZE: 7.5pt" onclick="showDivNext(this);return false;" href="spyboy101.html#" target=_top span>Next</A></td>
<!-- end of pic_list -->

<!-- Begin of Gallery Javascript -->
<SCRIPT type=text/javascript>
<!--
var hasLoaded = false;

// picture Gallery background colours
var currentPicColor = '#AF7E6D';
var unselectedColor = '#AB3108';
var deadLinkColor = '#cccccc';

//constants
var NUMBER_OF_PICTURES = 7;
var PICTURES_ID_PREFIX = "picGalleryNoScript_";
var PICTURES_LINK_ID_PREFIX = "pictureLink_";

var currentPic = 0;

//divs
var LOADING_DIV = "picGallery_loading";
var NEXT_DIV = "next";
var BACK_DIV = "back";
var NAVBOX_DIV = "navBox";
var THUMBNAILS_DIV = "thumbnails";

function init() {
dvs=document.getElementsByTagName('div');
for(c=0;c<dvs.length;c++) {
if (dvs[c].className=='show'){
dvs[c].className='hide';
}
}
document.getElementById
hasLoaded = true;
showDiv(0);

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(LOADING_DIV).style.display='none';
document.getElementById(NAVBOX_DIV).style.display='block';
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

if (document.getElementById(THUMBNAILS_DIV)) {
document.getElementById(THUMBNAILS_DIV).style.display='block';
}
}

function doBgColor() {
for(var i = 0; i < NUMBER_OF_PICTURES; i++) {
document.getElementById(PICTURES_LINK_ID_PREFIX + i).style.background= unselectedColor;
}
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

function doNextColor() {
document.getElementById(BACK_DIV).style.color= unselectedColor;
if(currentPic < (NUMBER_OF_PICTURES - 1)) {
document.getElementById(NEXT_DIV).style.color= unselectedColor;
} else {
document.getElementById(NEXT_DIV).style.color= deadLinkColor;
}
}

function doBackColor(){
document.getElementById(NEXT_DIV).style.color= unselectedColor;

if(currentPic > 0) {
document.getElementById(BACK_DIV).style.color= unselectedColor;
} else {
document.getElementById(BACK_DIV).style.color= deadLinkColor;
}
}

function showDiv(nDiv) {
for(var i = 0; i < NUMBER_OF_PICTURES; i++) {

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(PICTURES_LINK_ID_PREFIX + i).style.background= unselectedColor;
document.getElementById(NEXT_DIV).style.color= unselectedColor;
document.getElementById(BACK_DIV).style.color= unselectedColor;
}

var buttonid = i;
var id = PICTURES_ID_PREFIX + i;
var node = document.getElementById(id);
if(node && i==nDiv) {
node.style.display='block';
node.style.visibility='visible';
currentPic = i;

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}
} else if(node) {
node.style.display='none';
node.style.visibility='hidden';
}
}
}

function showDivNext() {
if(currentPic < (NUMBER_OF_PICTURES - 1)) {
showDiv(currentPic + 1);
doBgColor();
doNextColor();
}
}

function showDivPrev() {
if(currentPic > 0) {
showDiv(currentPic - 1);
doBgColor();
doBackColor();
}
}

function ColorOver(o) {
o.style.backgroundColor= currentPicColor;
}

function ColorOut(o) {
o.style.backgroundColor= unselectedColor;
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

if (document.getElementById) {
document.onLoad = init();
}
//-->
</SCRIPT>
<!-- End of Gallery Javascript -->
</tr>
</table>
</div>

</center><br><br>
</body>
</html>Thanks to another member here i took some stuff and implimented to yours : :lol:
haukke45
03-28-2009, 01:36 PM
I couldn't figure out your javascript. but what i gave you is the same look and same action for your html if it was your javascript you was wanting fixed and not the html set up I'm sorry i just looked at the way your html looked and made my modification :)
coothead
03-28-2009, 02:40 PM
Hi there spyboy1o1,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<!--this is for coothead testing and may be removed -->
<base href="http://devkick.com/lab/galleria/img/">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Gallery</title>

<style type="text/css">
body {
background-color:#000;
}
#container {
width:700px;
margin:20px auto 0;
}
#big_pic {
height:438px;
background-color:#0f0f0f;
}
#pic_list {
padding:15px 7px;
margin-top:20px 0 0;
height:60px;
background-color:#fff;
list-style-type:none;
}
#pic_list li {
width:98px;
float:left;
}
#pic_list a img {
display:block;
width:78px;
height:58px;
margin:auto;
filter:alpha(opacity=60);
opacity:.60;
border:1px solid #000;
}
#pic_list a img:hover {
filter:alpha(opacity=100);
opacity:1.0;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',displayBigPic,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',displayBigPic);
}
}

function displayBigPic(){
pic=document.getElementById('pic_list').getElementsByTagName('img');
for(c=0;c<pic.length;c++) {
pic[c].onclick=function() {
document.getElementById('big_pic').style.backgroundImage='url('+this.src+')';
return false;
}
}
}
</script>

</head>
<body>
<div id="container">

<div id="big_pic" ></div>

<ul id="pic_list">
<li><a href="flowing-rock.jpg"><img src="flowing-rock.jpg" alt=""></a></li>
<li><a href="stones.jpg"><img src="stones.jpg" alt=""></a></li>
<li><a href="grass-blades.jpg"><img src="grass-blades.jpg" alt=""></a></li>
<li><a href="ladybug.jpg"><img src="ladybug.jpg" alt=""></a></li>
<li><a href="lightning.jpg"><img src="lightning.jpg" alt=""></a></li>
<li><a href="lotus.jpg"><img src="lotus.jpg" alt=""></a></li>
<li><a href="flowing-rock.jpg"><img src="mojave.jpg" alt=""></a></li>
</ul><!-- end of #pic_list -->

</div><!-- end of #container -->

</body>

</html>
haukke45
03-29-2009, 10:14 AM
hey coothead did you see this http://devkick.com/lab/galleria/demo_01.htm
it is the same html done really good check it out lol
coothead
03-29-2009, 10:32 AM
Hi there haukke45,

that is done using the jquery library. :agree:

Nothing wrong with that if you are not any good at javascript. :agree:

Many forums provide links to ready made code in response to members' problems.

I prefer the personal approach and offer members code that I have written myself. ;)

Having said that I doubt if the OP will give us his preferences in this thread. :disagree:
coothead
03-29-2009, 10:44 AM
Hi there haukke45,

I have just noticed that spyboy1o1 has hot linked the images from the site that you mentioned. :supereek:

He really is a naughty boy and deserves a damn good spanking. :agree:
fast1
03-31-2009, 12:59 AM
more excellent tag in this forum. I grab some tag at your post guys, thanks keep it up


http://photosnag.com/img/3322/n09x0302vnsn/clear.gif
haukke45
04-10-2009, 03:51 AM
hi there coothead,
i took that html. add a swap image script re-did the css alittle, added a few pics from my picture folder lol and it looks cool lol i was bored lmao!