Problem mit dem Contentflow von Jacks Asylum Bildresize

RipmaV

RipmaV

Mitglied
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:
Code: 
<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:
HTML: 
	<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
 
Zuletzt bearbeitet:
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.(?)
 
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).
 
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.
 
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:
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:
Code: 
@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;
}
 
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.
 
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?
 
Jo, das geht zumindest im IE recht einfach, da es da einen entsprechenden Filter gibt.

Hier mal kleines Beispiel:

CSS: 
.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 :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück