Featured Content Glider + PHP Photo Album

[forestgump]

1) Script Title: Featured Content Glider + PHP Photo Album

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...tentglider.htm
http://www.dynamicdrive.com/dynamici...photoalbum.htm


3) Describe problem:

I am using Featured Content Glider now and love it. I however would like to be able to have it pull dynamically from a php function like in PHP Photo Album. I still want to retain the next and previous function, but be able to pull from a single directory of a hundred plus jpgs without having to manually configure each one in the html.

How hard would it be to add this functionality to FCG?

Cheers

[ddadmin]

Well, Featured Content Glider does support contents embedded from an external file, by setting the "remotecontent" property:

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "myimages/contents.php", //Get gliding contents from external file on server? "filename" or "" to disable
"

More details on this feature here. The idea is to create a PHP page called "contents.php" that scans through the images within the residing "myimages" directory and outputs them, something like:

<?

function outputgliderdivs($dirname=".") {
   $pattern="\.(jpg|jpeg|png|gif|bmp)$";
   $files = array();
   $curimage=0;
   if($handle = opendir($dirname)) {
       while(false !== ($file = readdir($handle))){
               if(eregi($pattern, $file)){
		 $filedate=date ("M d, Y H:i:s", filemtime($file));
                 echo '<div class="glidecontent"><img src="' . $file . '" /></div>\n';
               }
       }

       closedir($handle);
   }
}

outputgliderdivs();
?>

The above is untested, but that's the idea. Basically, get the output to conform to the structure required by Featured Content Glider's remote content feature:

<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
</div>

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

[forestgump]

This solution seems to be trying to work. I have it up here

http://gaffmag.net/igallery/itest/index.php

I have 15 jpgs in the folder. The php echo is only returning 15 "\n" and no images. I tried to remove the /n from your original code and put in the word test before the </div> tag and now that word loads.

The script is not passing the correct parameter of the file. Can you assist?

Thanks.

[ddadmin]

From what I can tell it is now working actually. The images aren't showing up since when pulled in via Ajax, their path files remain relative to the "/pics" directory. Just change all the file references inside getpics.php to either absolute URLs, or relative to where your page is (so "/pics/gaffgirl1.jpg" for example).

Since you have 15 or so slides, you'll also want to manually add in more pagination links inside your pagination DIV.

[forestgump]

yup that did it. I put in the "pics/" directory before the .file. in the php code and it seems to be working fine.

Thanks for your time!

[forestgump]

Would it be possible to have some sort of loading buffer. This is being used for a mobile device application and it has a limited amount of memory. Is it possible to load a pre set number of pics at a time instead of it trying to load all images at the beginning?

Thanks.

[ddadmin]

There are many ways to do this, but one way would be to modify the external file so the image in each slide to be shown is set to a blank gif, and its true image path contained in a "re" attribute instead:

<div class="glidecontent">
<img src="blank.gif" rel="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
</div>

<div class="glidecontent">
<img src="blank.gif" rel="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent">
<img src="blank.gif" rel="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

In your case, since the external file is dynamically generated using PHP, you'll need to modify the PHP script to do this for each image. What you have now are "blank" images that get loaded when the page loads. The next step is to modify the Content Glider script so the actual image is loaded for a slide when that slide is being shown, effectively only loading the image inside each slide only when it's requested. You do this by finding the below line in the .js file, and add to it the 2 new lines in red:

		var $target=config.$contentdivs.eq(selected)
		var $targetimg=$target.find('img[@rel]').eq(0)
		$targetimg.attr('src', $targetimg.attr('rel'))

That should do it.