Modifying Horizontal Exhibit Plugin for Indexhibit

[tomhole1986]

First post here - any help would be much appreciated.

 

I am a bit stuck trying to modify a plugin for the popular cms indexhibit.

 

The plugin is the horizontal scroll plugin. What I am attempting to do is modify it so the images scale to 90% the height of the browser.

 

You can find the original plugin here: http://www.indexhibit.org/script/downloader.script.php?id=9

 

My attempt so far 'works' in that it scales the images up successfully, but I am stuck on how I can collate all the new widths (at the moment it is just css 'auto' against height 90%) and return it to the img-container tag so the page width is fixed correctly to contain the images. At the moment if on a small resolution there is to much white space and at high resolution it overflows to the line below.

 

<?php if (!defined('SITE')) exit('No direct script access allowed');

/**
* Full Frontal Horizontal Format
*
* Exhbition format
* Originally created for SharoneLifschitz.com
* Modified Tom Hole
* @version 1.2
* @author Vaska 
*/

$DO = new FullHorizontally;

$exhibit['exhibit'] = $DO->createExhibit();
$exhibit['dyn_css'] = $DO->dynamicCSS();

class FullHorizontally
{
// PADDING AND TEXT WIDTH ADJUSTMENTS UP HERE!!!
var $picture_block_padding_right = 50;
var $text_width = 400;
var $text_padding_right = 75;
var $final_img_container = 0; // do not adjust this one
var $scale = 100;

function createExhibit()
{
	$OBJ =& get_instance();
	global $rs;

	$pages = $OBJ->db->fetchArray("SELECT * 
		FROM ".PX."media, ".PX."objects_prefs 
		WHERE media_ref_id = '$rs[id]' 
		AND obj_ref_type = 'exhibit' 
		AND obj_ref_type = media_obj_type 
		ORDER BY media_order ASC, media_id ASC");

	if (!$pages) return $rs['content'];

	$s = ''; $a = ''; $w = 0;
	$this->final_img_container = ($rs['content'] != '') ? ($this->text_padding_right + $this->text_width ) : 0;

	foreach ($pages as $go)
	{
		$title = ($go['media_title'] == '') ? '' : "<div class='title'>" . $go['media_title'] . "</div>";
		$title .= ($go['media_caption'] == '') ? '' : "<div class='caption'>" . $go['media_caption'] . "</div>";
		$this->final_img_container += ($go['media_x'] + $this->picture_block_padding_right);

		$a .= "<div class='picture_holder' style='height: auto; width: auto; margin-left: 10px; margin-right: 10px;'>\n";
		$a .= "<div class='picture' style='height: 100%;'>\n";
		$a .= "<img src='" . BASEURL . GIMGS . "/$go[media_file]' width='auto' height='85%' alt='" . BASEURL . GIMGS . "/$go[media_file]' />\n";
		$a .= "<div class='captioning'>$title</div>\n";
		$a .= "</div>\n";
		$a .= "</div>\n\n";
	}

	$s .= "<div id='img-container'>\n";
	if ($rs['content'] != '') $s .= "<div id='text'>" . $rs['content'] . "</div>\n";
	$s .= $a;
	$s .= "<div style='clear: left;'><!-- --></div>";
	$s .= "</div>\n";

	return $s;
}


function dynamicCSS()
{
return "#img-container {  width: " . ($this->final_img_container * 1) . "px; }
#img-container #text { float: left; width: " . ($this->text_width + $this->text_padding_right) . "px; }
#img-container #text p { width: " . $this->text_width . "px; }
#img-container .picture_holder { float: left; }
#img-container .picture { /* padding-top: 10px; */ }
#img-container .captioning .title { margin-top: 12px; font-weight: bold; }
#img-container .captioning .caption { }";
}
}