HowTo: ImageFlow als Filmstrip verwenden

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

Getestet nur mit DragonflyCMS Version 9.2.1. Ich übernehme keine Haftung für Schäden/Verluste die durch diese Anleitung entstehen.
ImageFlow ist nur für den nicht-kommerziellen Gebrauch kostenlos, bitte die Lizensbestimmungen beachten!

ImageFlow gibt es auf finnrudolph.de

Folgende Dateien aus dem Paket werden benötigt:
reflect2.php
reflect3.php
imageflow.packed.js
slider_dark.png
slider.png
imageflow.css

Editiere imageflow.css:
finde:

Code::

		background-image:url(slider.png);

ersetze mit:

Code::

		background-image:url(../images/slider_dark.png);

Die Dateien in das DragonflyCMS Verzeichnis kopieren:
reflect2.php in das Hauptverzeichniss
reflect3.php in das Hauptverzeichniss
imageflow.packed.js nach includes/javascript
slider_dark.png nach YOUR-THEME/images
slider.png nach YOUR-THEME/images
imageflow.css nach YOUR-THEME/style

Backup machen der Datei modules/coppermine/displayimage.php.

Editiere modules/coppermine/displayimage.php:

Finde:

Code::

/**
 * Main code
 */

Davor einfügen:

Code::

function is_good_browser($browsers) { // ;)
	return (is_array($browsers) &&
			isset($browsers[MSD_BROWSER_AGENT]) &&
				version_compare(MSD_BROWSER_VERSION, $browsers[MSD_BROWSER_AGENT], '>=') );
}
function display_ImageFlow($meta, $album, $cat, $pos)
{
	global $CONFIG, $AUTHORIZED,$CURRENT_PIC_DATA;
	global $album_date_fmt,  $lang_byte_units;

//	$max_item = $CONFIG['max_film_strip_items'];
	$max_item = 9;

	$start = 1;
	$thumb_per_page = $max_item * 2;
	$l_limit = max(0, $pos - $max_item);
	$new_pos = max(0, $pos - $l_limit);
	$pic_data = get_pic_data($meta, $album, $thumb_count, $album_name, $l_limit, $thumb_per_page);
	if (count($pic_data) < $max_item) {
		$max_item = count($pic_data);
	}
	$lower_limit = 3;
	if (!isset($pic_data[$new_pos + 1])) {
		$lower_limit = $new_pos - $max_item + 1;
	} else if (!isset($pic_data[$new_pos + 2])) {
		$lower_limit = $new_pos - $max_item + 2;
	} else if (!isset($pic_data[$new_pos-1])) {
		$lower_limit = $new_pos;
	} else {
		$hf = $max_item / 2;
		$ihf = (int)($max_item / 2);
		if ($new_pos > $hf) {
			$lower_limit = $new_pos - $ihf;
		} elseif ($new_pos < $hf) {
			$lower_limit = 0;
		}
	}
	$pic_data = array_slice($pic_data, $lower_limit, $max_item);
	$i = $l_limit;
	if (count($pic_data) > 0) {

		$html = '<div style="width:500px;background-color:#ffffff;" id="DFImageFlow" class="imageflow">';

		$meta_link = ($meta != '') ? '&meta='.$meta : '';
		if (is_numeric($album) && $meta != 'random') {
			$alb_link = '&album='.$album;
		} else {
			$alb_link = '&cat='.(isset($cat) ? $cat : '0');
		}
		foreach ($pic_data as $key => $row) {
			$hi = (($pos == ($i + $lower_limit)) ? '1': '');
			$i++;
			$image_size = compute_img_size($row['pwidth'], $row['pheight'], $CONFIG['thumb_width']);

			if ($CONFIG['seo_alts'] == 0) {
				$pic_title = FILENAME . $row['filename'] . "\n" . FILESIZE . ($row['filesize'] >> 10) . $lang_byte_units[1] . "\n" . DIMENSIONS . $row['pwidth'] . "x" . $row['pheight'] . "\n" . DATE_ADDED . localised_date($row['ctime'], ALBUM_DATE_FMT);
			} else {
				if ($row['title'] != '') {
					$pic_title = $row['title'];
					if ($row['keywords'] != '') {
						$pic_title .= "\n";
						$pic_title .= $row['keywords'];
					}
				} elseif ($row['keywords'] != '') {
					$pic_title = $row['keywords'];
				} else {
					$pic_title = substr($row['filename'], 0, -4);
				}
			}
			if ($meta == 'random') {
				$pos = $row['pid'];
			} else {
				$p = $i - 1 + $lower_limit;
				$p = ($p < 0 ? 0 : $p);
				$pos = $key < 0 ? $key : $p;

			}
			if ($CONFIG['seo_alts'] == 0) {
				$html .= "<img src=\"" . get_pic_url($row, 'thumb') . "\" class=\"image\" {$image_size['geom']} border=\"0\" longdesc=\"".getlink("&amp;file=displayimage$meta_link$alb_link&amp;pos=".$pos)."\" alt=\"{$row['filename']}\" title=\"$pic_title\" />";
			} else {
				$html .= "<img src=\"" . get_pic_url($row, 'thumb') . "\" class=\"image\" {$image_size['geom']} border=\"0\" longdesc=\"".getlink("&amp;file=displayimage$meta_link$alb_link&amp;pos=".$pos)."\" alt=\"$pic_title\" title=\"$pic_title\" />";
			}
			if ($row['pid'] == $CURRENT_PIC_DATA['pid']) $start = $i-$l_limit;
		}
		$html .= '</div>';
		$html .= '
<script type="text/javascript" language="javascript">
domReady(function()
{
	var instanceOne = new ImageFlow();
	instanceOne.init({ ImageFlowID:\'DFImageFlow\',
		imageFocusM: 1.0,
		reflections: true,
		reflectionP: 0.5,
		reflectionGET: \'&bgc=FFFFFF&fade_start=40%\',
		xStep: 155,
		imageFocusM: 1.0,
		startID: '.$start.'
	});

});
</script>
<noscript>'.
display_film_strip($meta, $album, (isset($cat) ? $cat : 0), $pos, true) .
'</noscript>
';

		return $html;
	} else {
		//theme_no_img_to_display($album_name);
		trigger_error('film_strip '.NO_IMG_TO_DISPLAY.' '.$album_name,E_USER_WARNING);
	}
} //end display filmstrip

if (!defined(MSD_BROWSER_VERSION)) {
	$HTTP_USER_AGENT = $_SERVER['HTTP_USER_AGENT'];

	//http://www.traum-projekt.com/forum/54-traum-scripts/62037-systeminfos.html
	if (preg_match('@Firefox/([0-9]{1,2}(\.[0-9]{1,2}){1,3})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[1]);
(isset($log_version[2]) ? $log_version[2] : '')  . (isset($log_version[3]) ? $log_version[3] : ''));
        define('MSD_BROWSER_AGENT', 'FIREFOX');
    } else if (preg_match('@MSIE ([0-9].[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[1]);
        define('MSD_BROWSER_AGENT', 'IE');
    } else if (preg_match('@Opera(/| )([0-9].[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[2]);
        define('MSD_BROWSER_AGENT', 'OPERA');
	} else if (preg_match('@OmniWeb/([0-9].[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[1]);
        define('MSD_BROWSER_AGENT', 'OMNIWEB');
    } else if (preg_match('@(Konqueror/)(.*)(;)@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[2]);
        define('MSD_BROWSER_AGENT', 'KONQUEROR');
    } else if (preg_match('@Chrome/([0-9].[0-9].[0-9]{1,3}.[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[1]);
        define('MSD_BROWSER_AGENT', 'CHROME');
    } else if (preg_match('@Safari/([0-9]{1,3}.[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)
               && preg_match('@Version/([0-9]{1,2}.[0-9]{1,2})(.[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version2)) {
        define('MSD_BROWSER_VERSION', $log_version2[1] . (isset($log_version2[2])) ? $log_version2[2] : '');
        define('MSD_BROWSER_AGENT', 'SAFARI');
    } else if (preg_match('@Mozilla/([0-9].[0-9]{1,2})@', $HTTP_USER_AGENT, $log_version)) {
        define('MSD_BROWSER_VERSION', $log_version[1]);
        define('MSD_BROWSER_AGENT', 'MOZILLA');
    } else {
        define('MSD_BROWSER_VERSION', 0);
        define('MSD_BROWSER_AGENT', 'OTHER');
    }
}

Finde:

Code::

	$comments = html_comments($CURRENT_PIC_DATA['pid']);

Danach einfügen:

Code::

	if ($album != 'search') {
		if (is_good_browser(array(
				'IE'=>'5.5',
				'OPERA'=>'6.0',
				'FIREFOX'=>'2.0.0.9',
				'SAFARI'=>'1.3.2',
				'KONQUEROR'=>'3.5.7',
				'CHROME'=>'0.2.149.30') )) {
			$modheader .= '<script type="text/javascript" language="javascript" src="includes/javascript/imageflow.packed.js"></script>'."\n"
				.'<link rel="stylesheet" href="themes/'.$CPG_SESS['theme'].'/style/imageflow.css" type="text/css" media="screen" />'."\n";
			$film_strip = display_ImageFlow($meta, $album, (isset($cat) ? $cat : 0), $pos, true);
		}
		else
			$film_strip = display_film_strip($meta, $album, (isset($cat) ? $cat : 0), $pos, true);
	}

Finde:

Code::

	// Display Filmstrip if the album is not search
	if ($album != 'search') {
		$film_strip = display_film_strip($meta, $album, (isset($cat) ? $cat : 0), $pos, true);
	}

Diese 4 Zeilen löschen!
Speichern!

Danach sollten die Bilder im Filmstrip mittels ImageFlow angezeigt werden.

flatter · Doppel-Null-Agent Joined: Jul 29, 2004 Posts: 148

Hallo Klas ich habe wie beschriben alles ersetzt,
alles hochgeladen in die kategoris,bei mir zeigt alles normal,ohne film
mfg

clubhouse

Ich habs bei mir genau so gemacht, wie du es hier schreibst, doch ich bekomme nur die 5 Bilder im Filmstreifen....

hat wohl was damit zutun:

Code::

if (is_good_browser(array(
				'IE'=>'5.5',
				'OPERA'=>'6.0',
				'FIREFOX'=>'2.0.9',
				'SAFARI'=>'1.3.2',
				'KONQUEROR'=>'3.5.7',
				'CHROME'=>'0.2.149.30') )) {
			$modheader .= '<script type="text/javascript" language="javascript" src="includes/javascript/imageflow.packed.js"></script>'."\n"
				.'<link rel="stylesheet" href="themes/'.$CPG_SESS['theme'].'/style/imageflow.css" type="text/css" media="screen" />'."\n";
			$film_strip = display_ImageFlow($meta, $album, (isset($cat) ? $cat : 0), $pos, true);
		}
		else
			$film_strip = display_film_strip($meta, $album, (isset($cat) ? $cat : 0), $pos, true);
	}

scheint wohl nicht die browser zu erkennen

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

Ok, könnt ihr das mal hier testen: test.terralights.de/in...at=0&pos=1 ?
Wenn das nicht geht: welchen Browser in welcher Version benutzt ihr? Evtl. mal schreiben was hier angezeigt wird: test.terralights.de/agent.php
Wenn das geht: Mal den cache leeren (ausser .htacess!). Oder versucht es mal mit der displayimage.php im Anhang.

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

clubhouse: mit IE7 und FF3.0.5 geht's auf deiner Seite

flatter · Doppel-Null-Agent Joined: Jul 29, 2004 Posts: 148

Mach ich was falsch Rolling Eyes

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

Anscheinend.

clubhouse

mh also dein Agent test, sagt
Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.0.5) Gecko/2008120122 Firefox/2.0.0.14 (de) (TL-FF) FirePHP/0.2.1

Also 2.0.0.14

Aber, ich kann auch kein Update machen.... Also is es wohl die Aktuelle version.

Ich hab mal 2 Bilder angehängt.: das erste is aus dem IE. was mir auffällt, das er das div des Main schon vorher beendet. Sieht dadurch bisschen komisch aus, und es fehlt dieser Bottum zum hin und her schieben.

Und das 2 aus dem Firefox, dort sieht man den normalen filmstreifen.

flatter · Doppel-Null-Agent Joined: Jul 29, 2004 Posts: 148

Klas wrote:

Anscheinend.

von unten nach oben. und von oben nach unten .nicht lings und rechts. Shocked

clubhouse

scheint bei flatter nen div Fehler zu sein?

flatter · Doppel-Null-Agent Joined: Jul 29, 2004 Posts: 148

clubhouse wrote:

scheint bei flatter nen div Fehler zu sein?

Ja habs jetzt rausgefunden..
ja es ligt an Themes,bei default funz wie bei dir ..keine probleme..

Und ein großes Lob für den Klas und die Arbeit... Wink

clubhouse

ok, hab mich mal schlau geschaut, warum bei mir die falsche version angezeigt wird, und habs behoben,

aber, bei mir wird immer noch nicht dieser Button angezeigt, womit die Leute hin und her schieben können.

clubhouse

habs... lol... änderung in der imageflow.css

beim slider: ../images/

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

Hab bei dem Firefox 2 eine Stelle bei der Version unterschlagen. Richtig ist:

Code::

				'FIREFOX'=>'2.0.0.9',

Diese Zeile ist zu ändern, habs oben schon berichtigt:

Bei der Browserkompatibilität hab ich mich hiernach gerichtet: finnrudolph.de/ImageFlow/Features
Um die Anzeige anzupassen gibt es noch ein paar Einstellungen, voreingestellt hab ich:

Code::

		imageFocusM: 1.0,
		reflections: true,
		reflectionP: 0.5,
		reflectionGET: \'&bgc=FFFFFF&fade_start=40%\',
		xStep: 155,
		imageFocusM: 1.0,

Die Einstellungen und weitere werden hier beschrieben: finnrudolph.de/ImageFl...umentation
Einfach mal ausprobieren.

Die Anzahl der Bilder die mit ImageFlow Angezeigt werden kann man in der Zeile

Code::

$max_item = 9;

Einstellen,

Klas · Moderator Joined: Apr 14, 2004 Posts: 293

clubhouse wrote:

ok, hab mich mal schlau geschaut, warum bei mir die falsche version angezeigt wird, und habs behoben

Wie hast du das behoben?