Jump to content

Empty Space Showing In A Frame


chwebdesigns

Recommended Posts

Hi,

 

I have no idea what is causing the problem, so any help or ideas would be greatly appreciated.

 

I am using a 3rd party script to connect the website to a flickr account and pull the images from there. The images then appear in a css defined <div> area with a scrollbar across the bottom. This works fine, however when the page is first loaded there is a load of blank space at the end of the scroll area, however once the page has been refreshed or reloaded this blank space disappears. I don't want the blank space to appear as it looks like the images haven't fully loaded when they have.

 

As I am not sure what is causing the problem I have included the PHP Code, HTML Code and relevant CSS snipets.

 

Any help or ideas are much appreciated!

 

Many thanks,

Cal

 

 

1) PHP Function to get the relevant set from flickr

function getSet($which) {
global $user;
global $apikey;

$method = 'flickr.photosets.getPhotos';
$params['user_id'] = $user;
$photoCollection =& new DOMIT_Document();
   $request_url = 'http://www.flickr.com/services/rest/?';

   if (empty($params)) $params = array();
$params['api_key'] = $apikey;
$params['method'] = $method;
$params['photoset_id'] = $which;
   foreach ($params as $var => $val) {
	 $var = urlencode($var);
	 $val = urlencode($val);
	 $request_url .= "&$var=$val";
   }

$safe_return = getFileContents($request_url);
$response = $photoCollection->parseXML($safe_return);
$photos =& $photoCollection->documentElement->getElementsByTagName("photo");
$total = $photos->getLength();

for ($i=0; $i<$total; $i++) {
   $currImg =& $photos->item($i);
 $id =& $currImg->getAttributeNS($URI, 'id');
 $server =& $currImg->getAttributeNS($URI, 'server');
 $secret =& $currImg->getAttributeNS($URI, 'secret');
 echo "<a href=\"http://static.flickr.com/".$server."/".$id."_".$secret.".jpg\" rel=\"lightbox[flickr]\" title=\"".$id."\" name=\"$user\"><img src=\"http://static.flickr.com/".$server."/".$id."_".$secret.".jpg\"  alt=\"Catherine Laura Photography\" class=\"photo\" /></a>";
}
}

 

2) HTML Code to display photos

 

<div id="photostream">
 <div id="streamcontainer">
 <?php
  $flickr = getSet($theSet);
 ?>
 </div>
</div>

 

3) CSS Code for Containers

#streamcontainer {
white-space: nowrap;
height: 360px;
}
#photostream {
width: 670px;
height: 365px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

 

Thanks again!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.