PDA

View Full Version : mystery scroll bars/white space w/ camera upload


deafboyzaudio
09-05-2009, 07:01 AM
Hey,
I have a gallery that is fed by user uploads. the pics are resized and formatted to a thumbnail and a 640X480 full-size pic JPG. Issue i have is when the pics are uploaded straight from an external source(camera) they have a white border around them for the first load, then later they have a scroll bar.
I tested this and if i upload them directly from my hard drive they work like their supposed to, no scroll and a 1px black border. styles seem to be set right although i am new to js....

my js style

/*
Auto Generating Photo Gallery
by Chris Coyier
http://css-tricks.com (http://css-tricks.com/)
*/
* { margin: 0; padding: 0; }
body {
font-family: Tahoma, Geneva, sans-serif;
background: url(resources/bg.png) top center repeat-x #2a2a2a;
}
a img, img { border: none; }
#page-wrap {
width: 725px;
margin-top: 0em;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
}
.photo-link { padding: 5px; margin: 5px; border: 1px solid #999; display: block; width: 100px;
float: left; }
.photo-link:hover { border-color: white; }


source code:

<!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>Pics</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="stylesheet" type="text/css" href="styles/fancy.css" />

<script type="text/javascript" src="java/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="java/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="java/jquery.fancybox-1.0.0.js"></script>

<script type="text/javascript">

$(function(){

$(".photo-link").fancybox({ 'zoomSpeedIn': 400, 'zoomSpeedOut': 400, 'overlayShow': true });

});

</script>
<style type="text/css">
<!--
@import url("styles/main.css");
#mainContent {
height: auto;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/top banner.jpg" width="967" height="110" alt="Deaf Boyz Audio - Way too loud..." /></div>
<div id="mainContent">
<div id="headerDiv">
<h1>Deaf Boyz Audio</h1>
</div>
<div id="textDivC">Check out these pictures uploaded by your fellow Car Audio Lovers... More added daily, check back soon!!!</div>
<div id="page-wrap">

<?php

/* settings */
$image_dir = 'images/upload/';
$per_column = 4;


/* step one: read directory, make array of files */
if ($handle = opendir($image_dir)) {
while (false !== ($file = readdir($handle)))
{
if ($file != '.' && $file != '..')
{
if(strstr($file,'-thumb'))
{
$files[] = $file;
}
}
}
closedir($handle);
}

/* step two: loop through, format gallery */
if(count($files))
{
foreach($files as $file)
{
$count++;
echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb','',$file),'"><img src="',$image_dir,$file,'" width="100" height="100" /></a>';
if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
}
}
else
{
echo '<p>There are no images in this gallery.</p>';
}

?>

</div>
</div>

<div id="sidebar">
<p class="sidebarLink"><a href="index.htm">home</a></p>
<p class="sidebarLink"><a href="pics.php">pics</a></p>
<p class="sidebarLink"><a href="video.htm">video</a></p>
<p class="sidebarLink"><a href="upload.php">upload</a></p>
<p class="sidebarLink"><a href="about.htm">about</a></p>
<p class="sidebarLink"><a href="feedback.php">feedback</a></p>
</div>
<div id="footer">
<h6 class="copyright">Copyright Deaf Boyz Audio, 2009. All Rights Reserved.</h6>
</div>
</div>
</body>
</html>


And i think these styles are all for the effect upon opening, the next previous and close buttons on fullsize and such.... which bring me to another issue!!!!
My "X" to close and next and previous buttons work but the image doesnt show up, image is in the right folder... maybe a style issue, i have tried to figure it out but im sorta out of my league until i learn... any advice? here is the code

div#fancy_overlay {
position:absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
background-color: #333;
}
div#fancy_loading {
position: absolute;
height: 40px;
width: 40px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100;
}
div#fancy_loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url(fancy_progress.png) no-repeat;
}
div#fancy_close {
position: absolute;
top: -12px;
right: -12px;
height: 30px;
width: 30px;
background: transparent url(fancy_closebox.png) ;
cursor: pointer;
z-index: 100;
display: none;
}
div#fancy_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
z-index: 96;
}
#fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none;
}
img#fancy_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
padding: 0;
margin: 0;
z-index: 92;
}
div#fancy_title {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
z-index: 100;
display: none;
}
div#fancy_title table {
margin: 0 auto;
}
div#fancy_title div {
color: #FFF;
font: bold 12px Arial;
padding-bottom: 2px;
}
td#fancy_title_left {
height: 32px;
width: 15px;
background: transparent url(fancy_title_left.png) repeat-x;
}
td#fancy_title_main {
height: 32px;
background: transparent url(fancy_title_main.png) repeat-x;
}
td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url(fancy_title_right.png) repeat-x;
}
div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 58px 18px;
margin: 0;
overflow: hidden;
background: transparent;
display: none;
}
div#fancy_inner {
position: relative;
width:100%;
height:100%;
border: 1px solid #444;
background: #FFF;
}
a#fancy_left, a#fancy_right {
position: absolute;
bottom: 10px;
height: 100%;
width: 35%;
cursor: pointer;
background-image: url(data:image/gif;base64,AAAA);
z-index: 100;
}
a#fancy_left {
left: 0px;
}
a#fancy_right {
right: 0px;
}
a#fancy_left:hover {
background: transparent url(fancy_left.gif) no-repeat 0% 100%;
}
a#fancy_right:hover {
background: transparent url(fancy_right.gif) no-repeat 100% 100%;
}
#fancy_bigIframe, #fancy_freeIframe {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
div#fancy_bg {
display: none;
}

div.fancy_bg {
position: absolute;
display: block;
z-index: 70;
}
div.fancy_bg_n {
top: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_n.png) repeat-x;
}
div.fancy_bg_ne {
top: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_ne.png) no-repeat;
}
div.fancy_bg_e {
right: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_e.png) repeat-y;
}
div.fancy_bg_se {
bottom: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_se.png) no-repeat;
}
div.fancy_bg_s {
bottom: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_s.png) repeat-x;
}
div.fancy_bg_sw {
bottom: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_sw.png) no-repeat;
}
div.fancy_bg_w {
left: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_w.png) repeat-y;
}
div.fancy_bg_nw {
top: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_nw.png) no-repeat;
}


well, hope your eyes arent worn out by now, tryin to learn some JS here, why is it that everything related to web design comes at a premium???? man i wish i was rich, but im not... gotta learn, so any help or suggestions or ideas is appreciated...:mrgreen: much love,
Deaf Boyz Audio

dwguy
09-10-2009, 09:16 PM
try doing somethin like this for the links... (http://www.yourdomain.com/images/fancy_closebox.png)

deafboyzaudio
09-10-2009, 09:21 PM
thanks dw guy, that worked... im still workin on the pics bein screwed up from an external source though... any ideas anyone? thanks

domedia
09-11-2009, 03:10 AM
Provide a link. That makes it soooo easy to troubleshoot :)

deafboyzaudio
09-11-2009, 04:13 AM
www.deafboyzaudio.com/pics.php (http://www.deafboyzaudio.com/pics.php) i will point out that i have developed another problem with my gallery that needs to be solved as well... now the fullsize pics wont show up, only a white box with red x, but the uploads from an external source still work, kind of, they still have the scroll bar. I have uploaded a pic directly from the camera for your convenience (its the last one, the pic of the dashboard and steering wheel)
so to reiderate, normally the fullsize work from the hardrive, just recently today they aren't... sorry, im a newb.

domedia
09-11-2009, 05:56 AM
The red cross is IE's way of lettting you know that it cannot find the image in the SRC attribute.

Check your script, this is what it's trying to find. You can see immediately what is wrong:
<img src="../Java/http://www.deafboyzaudio.com/images/upload/IMG_1149.jpg?rand=426601751">

deafboyzaudio
09-12-2009, 07:22 PM
cool, found that spot and took out the "../java/" now it works like its supposed to. i never would of found that, i looked everywhere else b/c i hadnt touched the script... must of changed it indirectly. thanks a ton DM

deafboyzaudio
09-13-2009, 12:17 AM
Ok now for the original treason i started this thread.... When i upload from an external source like a camera the fullsize pic shows up with white border and scroll bar. From searching the forum i believe this is bc the fulsize is not "block"
How do i set a style so that all pictures from an external source are displayed in block style? my styles are above

domedia
09-13-2009, 07:15 PM
display: block;

deafboyzaudio
09-14-2009, 10:14 PM
ok i tried what you said and it didnt seem to work. I put display:block in 3 different places and nothing worked. most pics displayed fullsize display in block, just not the ones uploaded directly from a camera, same pic from the hard drive displays in block....
my page with pics don't display in live view so i cant use DW to see what styles apply to the fullsize div to test your styles idea. is there a way to see what styles apply to a div if i cant get that div to display in DW? that way i could make sure "display:block" was applied to all the right styles and maybe elimanate a style issue.

domedia
09-16-2009, 02:19 PM
The FF Firebug plugin will let you select HTML elements and it will show you a list over the CSS that is applied and which are overridden.

deafboyzaudio
09-21-2009, 08:58 PM
got the plug in but i am a lil confused at the results i am getting. on the camera uploaded pic firebug says that there is a "element.style {display: inline}" style that im sure is making the pic appear with a white border. Problem is i cant find that style anywhere, it dont exist in my sheet.
I can write other styles so that one gets overridden but i still have an issue with white space.
It is with that one style that firebug doesnt give a location and i cant find it anywhere... how can this be?

deafboyzaudio
09-22-2009, 05:04 AM
ok the whitespace is gone, i just had to re upload a pic for it to refresh. thanks DM for all your help. i still dont get the non existent style problem but oh well, my main problem is solved8-)

domedia
09-22-2009, 04:31 PM
All images are display: inline by default unless you set it to something else.