PDA

View Full Version : no show of fullsize pics in gallery.


deafboyzaudio
09-10-2009, 09:57 PM
I use php and js to generate a gallery with a thumbnail and a fullsize. this morning i was doing some site cleaning when i noticed my fullsize images no longer display. If i upload them from an external source directly like a camera, they show up but with scroll bars on the fullsize. REALLY frustrating as my site is live... Checked everything and stuff seems to be fine(image location, js) but obviously not... NEED HELP!!! see site here...www.deafboyzaudio.com/pics.php (http://www.deafboyzaudio.com/pics.php)

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="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="js/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>


styles for opening effect and such...
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(http://www.deafboyzaudio.com/js/fancy_progress.png) no-repeat;
}
div#fancy_close {
position: absolute;
top: -12px;
right: -12px;
height: 30px;
width: 30px;
background: transparent url(http://www.deafboyzaudio.com/js/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(http://www.deafboyzaudio.com/js/fancy_title_left.png) repeat-x;
}
td#fancy_title_main {
height: 32px;
background: transparent url(http://www.deafboyzaudio.com/js/fancy_title_main.png) repeat-x;
}
td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url(http://www.deafboyzaudio.com/js/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(http://www.deafboyzaudio.com/js/fancy_left.gif) no-repeat 0% 100%;
}
a#fancy_right:hover {
background: transparent url(http://www.deafboyzaudio.com/js/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(http://www.deafboyzaudio.com/js/fancy_shadow_n.png) repeat-x;
}
div.fancy_bg_ne {
top: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(http://www.deafboyzaudio.com/js/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(http://www.deafboyzaudio.com/js/fancy_shadow_se.png) no-repeat;
}
div.fancy_bg_s {
bottom: -18px;
width: 100%;
height: 18px;
background: transparent url(http://www.deafboyzaudio.com/js/fancy_shadow_s.png) repeat-x;
}
div.fancy_bg_sw {
bottom: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(http://www.deafboyzaudio.com/js/fancy_shadow_sw.png) no-repeat;
}
div.fancy_bg_w {
left: -13px;
height: 100%;
width: 13px;
background: transparent url(http://www.deafboyzaudio.com/js/fancy_shadow_w.png) repeat-y;
}
div.fancy_bg_nw {
top: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(http://www.deafboyzaudio.com/js/fancy_shadow_nw.png) no-repeat;
}

///////////////////and another style sheet:

* { 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; }


i didnt mess with the scripts so i didnt post them, i tried to fix this for over an hour and i have no clue... all help is GREATLY sppreciated:) thanks