# Problem mit dem Contentflow von Jacks Asylum Bildresize



## RipmaV (12. August 2010)

Hallo zusammen,

ich versuche gerade mit dem Contentflow von Jacks Asylum eine Galerie auf zu bauen.
( http://www.jacksasylum.eu/ContentFlow/ )

Nun hab ich das Problem dass der Contenflow die Bilder immer resized und ich weiß nicht was ich dagegen tun kann.

Der Code dazu sieht wie folgt aus:

```
<script type="text/javascript" src="js/contentflow/contentflow.js" load="gallery"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var cf = new ContentFlow('contentFlow', {visibleItems:5,fixItemSize:true});
	ContentFlowGlobal.setAddOnConf('gallery', {startOnLoad: true});
});
</script>
```

der HTML-Code zu dem ganzen:

```
<div class="ContentFlow">
		<div class="loadIndicator"><div class="indicator"></div></div>
		<div class="flow">
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 1"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 2"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 3"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 4"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 5"/>
		</div>
		<div class="globalCaption"></div>
		<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
	</div>
```

Ich hoffe jemand hat mit dem Contentflow Erfahrung und kann mir da helfen.

Gruß
Rip


----------



## Sven Mintel (12. August 2010)

Moin,

was genau meinst du mit dem Resize'n ?


----------



## RipmaV (12. August 2010)

Wenn ich den Browser verkleinere (er war vorher Maximiert) dann werden die Bilder kleiner.

Ich kann gern Bilder von den beiden Zuständen anhängen wenn meine Erklärung zu ungenau ist.(?)


----------



## Sven Mintel (12. August 2010)

Nö, die Erklärung ist ausreichend 

Du könntest dem div.ContentFlow per CSS eine feste Höhe/Breite verpassen(müsstest du halt probieren, welche Werte da in deinem Fall die besten Ergebnisse bringen).


----------



## RipmaV (12. August 2010)

Danke für die schnelle Antwort doch leider hat mir die Angabe von fester Höhe und Breite nicht den gewünschten Erfolg gebracht.
Die vorgegebene Breite bleibt erhalten doch überschreibt das JS vom ContentFlow per Inlineangabe die Höhe. (Statt angegebenen 500px zeigt Firebug mir an dass per Inline 472px höhe gesetzt werden) Aber auch nach der Änderung der Inline-Angaben per Firebug bleiben die Bilder kleiner. Es scheint auch nur einmal zu passieren wenn sich die Größe des Fensters ändert. Danach kann ich so viel an der Größe vom Browser verändern wie ich will, die Bilder bleiben auf kleiner. Werden aber auch nicht größer oder noch kleiner.


----------



## Sven Mintel (12. August 2010)

Ich habe das mit deinem Code probiert, die Grösse bleibt immer so, wie von mir angegeben 

Ist dein Versuch irgendwo Online?


----------



## RipmaV (12. August 2010)

Nein der ist nicht Online, ist leider ein Kundenprojekt dass ich nicht einfach online stellen darf.
Aber ich kann den Code, soweit es möglich ist, mal Posten. Ich hab alle Texte und Grafiken daraus entfernt oder umbenannt. Vielleicht geht es ja auch so.

HTML:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kunde</title>
<script type="text/javascript" src="js/contentflow/contentflow.js" load="gallery"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var cf = new ContentFlow('contentFlow', {visibleItems:5,fixItemSize:true,reflectionHeight:0});
	ContentFlowGlobal.setAddOnConf('gallery', {startOnLoad: true});
});
</script>
<link rel="stylesheet" type="text/css" href="style/main.css" />

</head>

<body>

<div id="container">
	<div id="top">
		<div id="logo"><img src="img/logo.png" /></div>
		<div id="nav">
			<div class="navelement"><a href="#" class="current">a</a></div>
			<div class="spacing">|</div>
			<div class="navelement"><a href="#">b</a>|</div>
			<div class="spacing">|</div>
			<div class="navelement"><a href="#">c</a>|</div>
			<div class="spacing">|</div>
			<div class="navelement"><a href="#">d</a>|</div>
			<div class="spacing">|</div>
			<div class="navelement"><a href="#">e</a></div>
			<div class="spacing">&nbsp;</div>
			<div class="navelementsuche">
				<form class="suche" action="search.php" method="post">
					<fieldset id="searchbox">
						<input class="searchbox" type="text" id="suche" name="suche" />
						<a href="#" id="searchbutton">Suchen</a>
					</fieldset>
				</form>
				
			</div>
		</div>
	</div>
	<div class="ContentFlow">
		<div class="loadIndicator"><div class="indicator"></div></div>
		<div class="flow">
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 1"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 2"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 3"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 4"/>
			<img class="item" src="img/cflowimages/1.jpg" title="Test Image 5"/>
		</div>
		<div class="globalCaption"></div>
		<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
	</div>
	<div id="body">
		<div id="leer">&nbsp;</div>
		<div id="content">
			<div id="subheadline"><img alt="1" src="img/1.png" /></div>
			<div 
		</div>
	</div>
</div>
</body>

</html>
```

CSS:

```
@CHARSET "ISO-8859-1";

body{
	background-color:		#dbdddc;
	margin: 				0px auto;
	font-family: 			verdana, sans-serif;
	font-size:				10pt;
}

div#container{
	position: 				absolute;
	width: 					1280px;
	min-height:				800px;
	margin: 				0px auto;
	background-color:		#d0cfce;
}

div#top{
	position: 				relative;
	background: 			#dbdddc url("../img/head.jpg") no-repeat;
	width: 					1280px;
	height: 				500px;
	margin: 				0px;
}

div#logo{
	position: 				relative;
	left:					40px;
	top:					35px;
	width:					110px;
	height:					38px;
	float:					left;
	z-index:				2;
}

div#nav{
	position: relative;
	background: 			#fdfdfd;
	height: 				30px;
	width: 					850px;
	right:					-150px;
	top:					35px;
	float:					left;
	-moz-border-radius:		10px;
	-khtml-border-radius:	10px;
	-wekit-border-radius:	10px;
	border-radius:			10px;
	color:					#636363;
	padding:				8px 8px;
	
}

div#nav a:link, a:visited, a:hover, a:active{
	color: 					#636363;
	text-decoration: 		none;
	font-size: 				10pt;
}

div#nav a.current{
	font-weight: 			bold;
	text-decoration: 		none;
}

div#nav div.navelement,div.spacing{
	position: 				relative;
	top:					5px;
	float: 					left;
}

div#nav div.navelement{
	z-index:				2;
}

div#nav div.spacing{
	position: 				relative;
	top:					5px;
	float:					left;
	margin:					0px 3px;
}

div#nav div.navelementsuche{
	position: 				relative;
	top:					5px;
	z-index: 				1;
}

form input#suche{
	width: 					155px;
}

.ContentFlow{
	position: 				relative;
	top:					-300px;
	z-index:				999;
	height:					380px;
	width:					1280px;
}

div#body{
	background:				0px #dbdddc url("../img/background.jpg") no-repeat;
	height:					2500px;
	position:				relative;
	top:					-490px;
}

div#content{
	width:					940px;
	margin:					0px auto;
	position:				relative;
	top:					35px;
}

div#leer{
	height:					150px;
}

fieldset#searchbox{
	position: 				relative;
	top:					-6px;
	left:					5px;
	border:					0px #fdfdfd;
}
```


----------



## Sven Mintel (13. August 2010)

Ich kann dir nicht sagen, wo  es genau berechnet  wird, es scheint aber eine bestimmtes Verhältnis zu geben, was height+width bestrifft.
Es liegt so ca. bei 1:2.59 .(es kann darunter liegen, aber nicht darüber)
Wenn du also eine fixe Breite angibst, und dort das Skript den Wert für height ändert, ist dieser geänderte Wert zumindest ein fixer, mit dem du arbeiten könntest.

Es scheint also, dass du damit leben musst, dass du nur einen der Werte selbst bestimmen kannst.
da ich mal annehme, dass die Höhe für dein Layout wichtiger ist als die Breite, wäre eine Breitenangabe von maximal 984px das äusserste, womit du bei einer Höhe von 380px bleibst.


----------



## RipmaV (13. August 2010)

Herzlichen Dank! Dass funktioniert soweit mit der Maximalen Breite von 984px.
Auch wenn dass eigentlich ein neues Thema wäre, ich will dafür aber nicht extra eins aufmachen, hab ich eine kleine Frage noch zum ContentFlow.
Ist es möglich mit ContentFlow alle Bilder, bis auf dass groß angezeigt, verschwommen dar zu stellen?


----------



## Sven Mintel (13. August 2010)

Jo, das geht zumindest im IE recht einfach, da es da einen entsprechenden Filter gibt.

Hier mal kleines Beispiel:


```
.item{filter:Alpha(opacity=20) Gray() Blur(direction=90, strength=70);opacity:0.2}
.item.active{filter:none;opacity:1}
```

das aktive Bild hat die Klassen item & active, die anderen nur "item"

Man kann also für .item Formate definieren(welche man für .item.active wieder deaktiviert)

Der IE kennt wie gesagt diverse Filter, für andere muss CSS-seitig die Transparenz ausreichen.
Man kann zwar das dort verwendete <canvas> per Javascript blurren, aber das ist nicht mein Fachgebiet :-(

Vielleicht schaut ja Quaese hier herein, der weiss da bestens Bescheid


----------



## Quaese (16. August 2010)

Hi,

der Quaese schaut herein.

Eine eigene blur-Funktionalität besitzt das canvas-Element nicht. Hier muss selbst Hand angelegt werden.

Weil mich das Thema interessiert hat, habe ich entsprechendes Script geschrieben und dieses auf canvas.quaese.de und hier bereit gestellt.

Ciao
Quaese


----------



## RipmaV (17. August 2010)

Große Klasse! Danke euch beiden.
Das ist eine Community hier wie man sie selten findet!
Ich werde es gleich mal ausprobieren und dann Bescheid geben über Erfolg oder Misserfolg.
-----------------
Edit:
Ja ich nochmal, ich habe gerade das Problem entdeckt dass der ContentFlow nur im Firefox, Opera und IE8(x32) geladen wird, im Safari und IE8(x64) wird dieser nicht geladen.
Und scheinbar gibt es auch nen unterschied zwischen MacOS und Windows da bei MacOS + Firefox der ContenFlow nicht geladen wird.
Hat jemand ne Idee woran dass liegen könnte?

Lg
Rip


----------

