Jump to content


Photo

Empty Space Showing In A Frame


  • Please log in to reply
No replies to this topic

#1 chwebdesigns

chwebdesigns

    Advanced Member

  • Members
  • PipPipPip
  • 73 posts
  • LocationUK

Posted 15 November 2012 - 02:40 PM

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!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com