Any serious web gurus out there?

Capt Quirk

Capt Quirk

Veteran
I seem to have stumped the big shots at Webmaster-Talk.com with this bug, so I'm coming back here to try to find a solution.

I'm making an art portfolio on my website, and wanted to simply post thumbnails that would lead to the larger image. I'm even using divs instead of tables, because I want to do this nice. Now, the problem- the thumbnails were resized in Photoshop to roughly 100x100 pixels. I put them in the page and define the size-
img src="../art/thumb.gif" alt="thumb.gif" name="thumb" width="100" height="100"

But for some unknown reason, every single thumbnail blows up to like 300x300, no matter what I do. I had to cheat it by making separate div classes at 100x100, and using the thumb for a background- far from what I wanted, but at least they are the right size. It only happens on this page, any other blank page and they work fine.

Any ideas?
 
Is the page online so we can see what you're talking about?

When you click the thumbnail do you want it to goto another page that has the enlarged image or do you want it to open a window that has the image? The cool thing to do would be to use jquery and have it load on top of the current page. Cool stuff.
 
PK, the cheated page is online www.video-alchemy.com/v3/html/artwork.html .
And yes, I was going to open it in another page, but I am code challenged, meaning the fanciest I can do is open it in a sized window with no controls. I learned how to cut and paste that bit of javascript. I've never even heard of jquery, but it does sound really cool!

And if you want, here are some screenshots to illustrate my problem-
screenshot 1
screenshot 2

Personally, I'm not sure, but I think it is either Gremlins or Communists, but I can't substantiate either theory ;)
 
Last edited:
The Cold War is over, so I'm guessing Gremlins. :)

Really not sure what's causing your problem. It would really help if you could post the entire html for the page and also the contents of your css file. It's possible that your css is altering the image size but we won't know until we see all of it. The link you posted goes to a 404 page not found.
 
So that version has the images as the background which is not what you want because you want the images clickable, right?

How many images will you have in your gallery? If it's more than 6 then I would suggest a simple little script like this one. It's really easy to setup and place inside your current template. You can just copy and paste the code, upload a small javascript file, and WALLA a cool little gallery to show off your work.

http://sandbox.leigeber.com/javascript-slideshow/

The How To: http://www.leigeber.com/2008/12/javascript-slideshow/

Here's some more options - http://blog.redren.com/en/2009/01/top-14-albums-of-jquery-slide-and-plug-ins/

It looks complicated but it's really not. Most of the tutorials provide the code. You just need to copy/paste, change the html to point to your images, and then upload. Might be a a good work-around for the image width/height problem you're having.
 
Last edited:
That is right, they are currently just a quick fix, not proper by any means. I'm not sure how many I'll end up with, but that is the basic format I want, as opposed to the slideshow format. I never liked those, as you have to go through everything else, when all you wanted was to look at one or two.

I'm guessing you can't find a reason for them acting up either? I'm pretty sure the doctype is correct, and the only css affecting images is the for the divs I created to cheat the thumbnails.
 
You're right. I have no idea what's causing the image size problems so I'm trying to distract you with some smoke and mirrors. The jquery gallery was just a red herring.

:) :)

Sorry, man. If I have time this weekend I'll try to recreate what you've done and see if it does the same thing here.
 
If you would, that would be awesome. Just copy the page, and see if you can paste a 100x100 thumbnail in it. Like I said, I was able to do it with a blank page, so it isn't Dreamweaver or my browser. I think I'll try it out later with some of the other pages. Right now, I am whipped. I've been on that page for the last two days till close to 1AM, and I just really can't bear to look at it yet.
 
Ok, curiosity got the best of me. I tried a blank page, and it worked. I attached the css to that page, it worked. I took the index page, and saved it as an untitled.html, and placed the thumbnail in it- it blew up. I removed the css, and it worked. Would that be the doctype at work?
 
I got lazy for my Baby pix... http://www.genjerdan.com/private/Andrew/ (He's waaaaay cute in pages further down, of course...)

A little application generates the pages (I templated it so it has video, too, but that just shows you can do fancier things with templates...) and I didn't use the "create link to full rez photos", but it's in the program, too.)
 
That is cool, and a very cute kid. Of course, they are all cute, until they learn to walk. That's also a cool template builder, totally not what I'm looking to do, but still cool. No, right now I am having a code issue, and I need to figure out where it is. But thanks just the same :)
 
Hey Capt, that link didn't work for me, can you post the entire html page along with the CSS, I usually hand code, may be cross browsers issues, just off the top off my head have you tried two things :

it should be "100px" you need to specify the units, secondly if you do not specify the height or widths, then the image will display its native size anyway.

OT

Sorry, I'm typing away from a dead laptop (friends) which is only running because I've got Ubuntu Live CD, since this is the first time using this OS, I'm stumbling my way through.

On a side note (OT) any Linux Gurus know how to access the C drive from Ubuntu? I need to replace a few XP system files to resurrect this dead laptop... (I've tried, says something about not being able to mount, because the drive was not cleanly shut down??)

Anhar,
 
You guys really want me to post the code? It's long, because of some java, but I'll try.
Page-
<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video Alchemy</title>
<link rel="stylesheet" href="../Alchemy.css" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_timelinePlay(tmLnName, myID) { //v1.2
//Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
if (myID == tmLn.ID) { //if Im newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew = ++tmLn.curFrame;
for (i=0; i<tmLn.length; i++) {
sprite = tmLn;
if (sprite.charAt(0) == 's') {
if (sprite.obj) {
numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
keyFrm=1;
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr != props.length) {
if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
} else {
while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
else sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
} } } } }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
if (fNew > tmLn.lastFrame) tmLn.ID = 0;
} }
}

function MM_initTimelines() { //v4.0
//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
var ns = navigator.appName == "Netscape";
var ns4 = (ns && parseInt(navigator.appVersion) == 4);
var ns5 = (ns && parseInt(navigator.appVersion) > 4);
var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
document.MM_Time = new Array(1);
document.MM_Time[0] = new Array(1);
document.MM_Time["Timeline1"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Timeline1";
document.MM_Time[0].fps = 15;
document.MM_Time[0][0] = new String("sprite");
document.MM_Time[0][0].slot = 1;
if (ns4)
document.MM_Time[0][0].obj = document["remote"];
else if (ns5)
document.MM_Time[0][0].obj = document.getElementById("remote");
else
document.MM_Time[0][0].obj = document.all ? document.all["remote"] : null;
document.MM_Time[0][0].keyFrames = new Array(1, 15);
document.MM_Time[0][0].values = new Array(2);
if (ns5 || macIE5)
document.MM_Time[0][0].values[0] = new Array("-187px", "-173px", "-159px", "-146px", "-132px", "-118px", "-104px", "-91px", "-77px", "-63px", "-49px", "-35px", "-22px", "-8px", "6px");
else
document.MM_Time[0][0].values[0] = new Array(-187,-173,-159,-146,-132,-118,-104,-91,-77,-63,-49,-35,-22,-8,6);
document.MM_Time[0][0].values[0].prop = "left";
if (ns5 || macIE5)
document.MM_Time[0][0].values[1] = new Array("202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px", "202px");
else
document.MM_Time[0][0].values[1] = new Array(202,202,202,202,202,202,202,202,202,202,202,202,202,202,202);
document.MM_Time[0][0].values[1].prop = "top";
if (!ns4) {
document.MM_Time[0][0].values[0].prop2 = "style";
document.MM_Time[0][0].values[1].prop2 = "style";
}
document.MM_Time[0].lastFrame = 15;
for (i=0; i<document.MM_Time.length; i++) {
document.MM_Time.ID = null;
document.MM_Time.curFrame = 0;
document.MM_Time.delay = 1000/document.MM_Time.fps;
}
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body bgcolor="#FFFFFF" onload="MM_timelinePlay('Timeline1')">
<div id="masthead">
<div id="lens"><img src="../art/lens.gif" alt="Lens.gif" name="Lens" width="200" height="200" id="Lens" /><img src="../art/logo.gif" alt="Logo.gif" width="463" height="200" /></div>
</div>
<div id="nav"></div>
<div id="remote" style="left: 6px" left="-187" top="202">
<div class="remote_spacer"> </div>
<div class="remote">
<div align="center"><a href="../index.html" target="_self" class="remote_a">Home</a></div>
</div>
<div class="remote">
<div align="center"><a href="portfolio.html" target="_self" class="remote_a">Portfolio</a></div>
</div>
<div class="remote">
<div align="center"><a href="../Artwork.html" target="_self" class="current">Artwork</a></div>
</div>
<div class="remote">
<div align="center"><a href="contact.html" target="_self" class="remote_a">Contact</a></div>
</div>
<div class="remote">
<div align="center"><a href="../reserved.html" target="_self" class="remote_a">Reserved</a></div>
</div>
</div>
<div id="content">
<h2>Artwork-</h2>
<div class="left_cubicle">
<p>Album Cover<br />
<span class="company">"Great Lizard Cuckoo"</span><br />
For Swedish Whistler</p>
</div>
<div class="right_cubicle">
<div class="lizard_thumb"></div>
</div>
<div class="spacer"></div>
<div class="left_cubicle">
<p align="left">Birth Certificates </p>
</div>
<div class="right_cubicle">
<div class="girls_thumb"></div>
<div class="boys_thumb"></div>
<div class="art_referral">"I hired Keith to do a graphic design for me. I
have found him to be very talented, and professional. He was
able to take a very abstract idea and create an end product
that was above and beyond what I was expecting. "<br />
Sincerely,<br />
Stephanie</div>
</div>
<div class="spacer"></div>
<div class="left_cubicle"><span class="company">"Swamp Fox"</span> Logo for CD, DVD, and Web </div>
<div class="right_cubicle">
<div class="fox_thumb"></div>
</div>
<div class="spacer"></div>
<div class="left_cubicle"><span class="company">"Chi Ro"</span></div>
<div class="right_cubicle">
<div class="ChiRo_thumb"></div>
</div>
<div class="spacer"></div>
</div>
<div id="siteInfo"><a href="../index.html" target="_self">About Us</a> | <a href="portfolio.html" target="_self">Portfolio</a> |<a href="artwork.html" target="_self"> Artwork</a> | <a href="contact.html" target="_self">Contact Us</a> | ©2001-2009 Video Alchemy </div>
</body>
</html>

CSS-
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.166;
padding: 0px;
background-color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
}

a{
vertical-align: middle;
font-size: 12px;
text-align: center;
}
a:active{
color: #FFFF00;
}
a:current{
color: #006699;
text-decoration: none;
}
a:link{
text-decoration: none;
}

a:visited{
text-decoration: none;
}

a:hover{
color: #F7F720;
text-decoration: none;
}

#remote{
position:absolute;
width:185px;
height:290px;
z-index:1;
left: -187px;
top: 202px;
background-image: url(art/remote.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
color: #DFD1A;
padding-top: 0px;
margin: 10;
margin-top: 0px;
}
.remote_spacer{
height: 20px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
margin: 0px;
text-align: center;
vertical-align: middle;
}
.remote_a{
height: 28px;
display: block;
vertical-align: middle;
padding-top: 10px;
font-size: 12px;
background-image: url(art/up_button.jpg);
text-align: center;
width: 92px;
color: #00CCFF;
}
.remote_a:active{
color: #00FFFF;
}
.remote_a:current{
color: #006699;
text-decoration: none;
}
.remote_a:link{
text-decoration: none;
color: #FFFF00;
font-weight: bold;
}

.remote_a:visited{
color: #CCCC00;
text-decoration: none;
}

.remote_a:hover{
color: #FFFF00;
text-decoration: none;
background-image: url(art/down_button.jpg);
}
.current{
color: #FFFF00;
background-image: url(art/down_button.jpg);
width: 92px;
height: 28px;
padding-top: 10px;
display: block;
text-align: center;
font-size: 14px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #0066FF;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #006699;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
width: 100%;
height: 200px;
background-image: url(art/banner.jpg);
}
#advert{
float: right;
width: 100px;
}
#content{
float: left;
width: 50%;
overflow : auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
clear: none;
height: 600px;
}
#content img{
float: left;
padding: 10px 10px 10px 10px;
width: 250px;
height: 213px;
}
#portfolio_content{
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 0px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
clear: none;
height: auto;
}
#nav{
float: left;
height: 300px;
width: 200px;
}
.referral{
padding: 3px;
font-size: 12px;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
background-color: #99CCFF;
clear: none;
width: 160px;
border: thin solid #000000;
text-align: left;
color: #000000;
height: 150px;
overflow:auto
}
#siteInfo{
clear: both;
font-size: 75%;
padding: 3px;
margin-top: 0px;
background-color: #081331;
border-top-width: medium;
border-bottom-width: medium;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #87803C;
border-bottom-color: #87803C;
text-align: center;
height: 25px;
color: #FFFFFF;
}
.company {
font-size: 12px;
font-style: italic;
font-weight: bold;
color: #FFFFFF;
}
.spacer {
height: 15px;
border: 1px solid #000000;
width: 100%;
clear: none;
float: right;
}
.lizard_thumb {
height: 100px;
width: 100px;
background-image: url(artwork/lizard_thumb.gif);
float: left;
clear: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: medium solid #000000;
}
.boys_thumb {
height: 80px;
width: 100px;
background-image: url(artwork/boys_thumb.gif);
float: left;
clear: both;
border: medium solid #000000;
}
.girls_thumb {
height: 80px;
width: 100px;
background-image: url(artwork/girls_thumb.gif);
float: left;
clear: none;
border: medium solid #000000;
}
.fox_thumb {
height: 100px;
width: 58px;
background-image: url(artwork/fox_thumb.gif);
float: left;
clear: none;
border: medium solid #000000;
}
.ChiRo_thumb {
height: 110px;
width: 90px;
background-image: url(artwork/chi-ro_thumb.gif);
float: left;
clear: none;
border: medium solid #000000;
}

.left_cubicle {
height: auto;
padding: 0;
border: 1px solid #000000;
float: left;
width: 200px;
clear: none;
color: #FFFFFF;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.right_cubicle {
height: auto;
width: 300px;
padding: 10;
border: 1px solid #000000;
float: right;
clear: none;
}
.art_referral{
padding: 5px;
font-size: 12px;
float: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
background-color: #99CCFF;
clear: none;
width: 160px;
border: medium solid #000000;
text-align: left;
color: #000000;
height: auto;
overflow:auto
}
 
You must log in or register to reply here.
Back
Top