HowTo: ImageFlow als Filmstrip verwenden
Gehe zu Seite 1, 2  Weiter  :| |:
-> HowTo & Allgemeine Fragen

#1: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 19:17
    ----
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:
Array:
		background-image:url(slider.png);
ersetze mit:
Array:
		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:
Array:
/**
 * Main code
 */
Davor einfügen:
Array:
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:
Array:
	$comments = html_comments($CURRENT_PIC_DATA['pid']);
Danach einfügen:
Array:
	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:
Array:
	// 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.


Zuletzt bearbeitet von Klas am 21.01.2009 01:30, insgesamt 3-mal bearbeitet

#2: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: flatter BeitragVerfasst am: 20.01.2009 21:35
    ----
Hallo Klas ich habe wie beschriben alles ersetzt,
alles hochgeladen in die kategoris,bei mir zeigt alles normal,ohne film
mfg

#3: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: clubhouseWohnort: Eine Insel mit 2 Bergen BeitragVerfasst am: 20.01.2009 21:53
    ----
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:
Array:
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

#4: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 22:17
    ----
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.


Zuletzt bearbeitet von Klas am 21.01.2009 01:33, insgesamt einmal bearbeitet

#5: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 22:26
    ----
clubhouse: mit IE7 und FF3.0.5 geht's auf deiner Seite

#6: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: flatter BeitragVerfasst am: 20.01.2009 22:36
    ----
Mach ich was falsch na ja

#7: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 22:38
    ----
Anscheinend.

#8: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: clubhouseWohnort: Eine Insel mit 2 Bergen BeitragVerfasst am: 20.01.2009 22:39
    ----
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.

#9: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: flatter BeitragVerfasst am: 20.01.2009 22:39
    ----
Klas wrote:
Anscheinend.

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

#10: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: clubhouseWohnort: Eine Insel mit 2 Bergen BeitragVerfasst am: 20.01.2009 22:49
    ----
scheint bei flatter nen div Fehler zu sein?

#11: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: flatter BeitragVerfasst am: 20.01.2009 22:56
    ----
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... zwinker

#12: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: clubhouseWohnort: Eine Insel mit 2 Bergen BeitragVerfasst am: 20.01.2009 23:19
    ----
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.

#13: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: clubhouseWohnort: Eine Insel mit 2 Bergen BeitragVerfasst am: 20.01.2009 23:24
    ----
habs... lol... änderung in der imageflow.css

beim slider: ../images/

#14: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 23:45
    ----
Hab bei dem Firefox 2 eine Stelle bei der Version unterschlagen. Richtig ist:

Array:
				'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:
Array:
		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
Array:
	$max_item = 9;
Einstellen,


Zuletzt bearbeitet von Klas am 21.01.2009 01:36, insgesamt einmal bearbeitet

#15: Re: HowTo: ImageFlow als Filmstrip verwenden Autor: Klas BeitragVerfasst am: 20.01.2009 23:50
    ----
clubhouse wrote:
ok, hab mich mal schlau geschaut, warum bei mir die falsche version angezeigt wird, und habs behoben
Wie hast du das behoben?



-> HowTo & Allgemeine Fragen

Alle Zeitangaben sind in GMT + 1 Stunden

Gehe zu Seite 1, 2  Weiter  :| |:
Seite 1 von 2