logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-05-2009, 06:01 AM   #1
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default mystery scroll bars/white space w/ camera upload

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
Code:
 
/*
  Auto Generating Photo Gallery
  by Chris Coyier
  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:
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
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... much love,
Deaf Boyz Audio
deafboyzaudio is offline   Reply With Quote
Old 09-10-2009, 08:16 PM   #2
dwguy
 
Join Date: Aug 2009
Posts: 14
Default

try doing somethin like this for the links... (http://www.yourdomain.com/images/fancy_closebox.png)
dwguy is offline   Reply With Quote
Old 09-10-2009, 08:21 PM   #3
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default

thanks dw guy, that worked... im still workin on the pics bein screwed up from an external source though... any ideas anyone? thanks
deafboyzaudio is offline   Reply With Quote
Old 09-11-2009, 02:10 AM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Provide a link. That makes it soooo easy to troubleshoot
domedia is offline   Reply With Quote
Old 09-11-2009, 03:13 AM   #5
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default

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.

Last edited by deafboyzaudio; 09-11-2009 at 03:22 AM..
deafboyzaudio is offline   Reply With Quote
Old 09-11-2009, 04:56 AM   #6
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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:
HTML Code:
<img src="../Java/http://www.deafboyzaudio.com/images/upload/IMG_1149.jpg?rand=426601751">
domedia is offline   Reply With Quote
Old 09-12-2009, 06:22 PM   #7
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default

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

Last edited by deafboyzaudio; 09-12-2009 at 06:52 PM..
deafboyzaudio is offline   Reply With Quote
Old 09-12-2009, 11:17 PM   #8
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default

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
deafboyzaudio is offline   Reply With Quote
Old 09-13-2009, 06:15 PM   #9
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

display: block;
domedia is offline   Reply With Quote
Old 09-14-2009, 09:14 PM   #10
deafboyzaudio
 
Join Date: Jul 2009
Location: west coast, U.S.A.
Posts: 176
Default

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.
deafboyzaudio is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:49 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com