jQuery-Cycle verändert die CSS-Positionierung der animierten Bilder

Jan-Frederik Stieler · 13. Juli 2010

Hallo,
ich hab ein Problem mit der mittigen Positionierung von Bildern welche mittels jQuery Cycle animiert sind.
Also es geht um das Div mit der ID slideshow

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
  <base href="http://localhost/joomla1.5_bueroexit/index.php" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="büro exit, buero exit, büroexit, bueroexit, Büro Exit, Buero Exit, BüroExit, BueroExit, briefpapier, design, büro design, corporate design, corporate design agentur, corporate design erstellen, design
design agentur, designagentur,designbüro, editorial design, firmenlogo design, gestalter, gestaltung, gestaltung internetauftritt, grafik design, grafik design agentur, grafik designer, grafik und design, 
grafikbüro, internet design, logodesign, logoentwicklung, logos design, visitenkarten design, visitenkarten erstellen, webseiten design, webseiten gestalten, website design, werbeagenturen, darmstadt" />
  <meta name="title" content="startseite" />
  <meta name="author" content="Administrator" />
  <meta name="language" content="deutsch, de" />

  <meta name="content-language" content="de" />
  <meta name="description" content="Büro Exit - Design Büro Darmstadt" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Büro Exit - Design Büro Darmstadt - startseite</title>
  <link href="/joomla1.5_bueroexit/templates/be_template/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link rel="stylesheet" href="/joomla1.5_bueroexit/templates/be_template/css/template.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_bueroexit/templates/be_template/css/link.php" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/jquery.mousewheel.js"></script>

<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/jquery.em.js"></script>
<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/jScrollPane.js"></script>
<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/bloggallery.js"></script>
<script type="text/javascript" src="/joomla1.5_bueroexit/templates/be_template/js/preload.js"></script>
</head>
<body >
<!-- zentrierte website -->
<div id="distance"></div>
<!-- wrapper -->
<div id="wrapper">
<!-- topmenu -->

<div id="mainmenu">
<ul class="menu"><li class="parent item2"><a href="/joomla1.5_bueroexit/index.php/arbeiten.html" title="arbeiten"><span>arbeiten</span></a></li><li class="parent item3"><a href="/joomla1.5_bueroexit/index.php/info.html" title="info"><span>info</span></a></li><li class="item204"><a href="/joomla1.5_bueroexit/index.php/kontakt.html" title="kontakt"><span>kontakt</span></a></li><li class="item5"><a href="/joomla1.5_bueroexit/index.php/neues.html" title="neues"><span>neues</span></a></li></ul>
</div>
<!-- homelink -->
<ul class="menu-frontpage"><li id="current" class="active item1"><a href="http://localhost/joomla1.5_bueroexit/" title="Startseite"><img src="/joomla1.5_bueroexit/images/stories/blindesmenue.gif" alt="link-zur-startseite" /></a></li></ul>
<!-- content -->
<div><!-- <div id="content"> -->
<script type="text/javascript">
    $(document).ready(function()  {   $.preloadImages("../images/stories/be_logo_hover_signet_ff00fb-trans.png", "../images/stories/be_logo_hover_ff00fb-trans.png", "../images/stories/be_logo_hover_signet_fbd72b-trans.png", "../images/stories/be_logo_hover_fbd72b-trans.png", "../images/stories/be_logo_hover_signet_00ff00-trans.png", "../images/stories/be_logo_hover_00ff00-trans.png", "../images/stories/be_logo_hover_signet_00d8ff-trans.png", "../images/stories/be_logo_hover_00d8ff-trans.png")
        $('#slideshow').cycle({  
        fx: 'scrollLeft',  
        speed: 4000,  
        timeout: 2000,
        });        
                                     });
</script>
<div id="slideshow"><a class="center" href="#"><img src="../images/stories/frontpage/birkenhof_kürbiskernöl_fp.png" alt="birkenhof_kürbiskernöl" title="birkenhof kürbiskernöl" /> <span class="caption b01">Birkenhof<br />Kürbiskernöl</span> </a> <a class="center" href="#"><img src="../images/stories/frontpage/birkenhof_webseite_fp.jpg" alt="birkenhof_webseite" title="birkenhof webseite" /> <span class="caption b01">Birkenhof<br />webseite</span> </a></div>

<img id="frontpagecontent" src="../images/stories/frontpagebackground.jpg" title="Startbild - Leeres Sofa vor Wand" alt="frontpagebackground.jpg" />

</div>

<noscript>
<p>Sie ben&ouml;tigen einen Webbrowser mit aktiviertem JavaScript um alle Features dieser Seite nutzen zu k&ouml;nnen.<br /> Die Seite kann aber auch ohne aktiviertem JavaScript benutzt werden.</p>
</noscript>
</div>
<!-- wrapper end -->
</div>
<script type="text/javascript">
    <!--
    	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    -->
    </script>
    <script type="text/javascript">
    <!--
    	try {
    var pageTracker = _gat._getTracker("UA-8440043-2");
    pageTracker._trackPageview();
  } catch(err) {}
  -->
    </script>
    </body>
</html>

CSS:

#slideshow
{
	position: absolute;
	width: 968px;
	line-height: 576px;
	text-align: center;
	z-index:2;
}

.center
{
    vertical-align: middle;
}

span.caption
{
	position: absolute;
	font-size: 45pt;
	text-transform: uppercase;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
}

span.caption.b01
{
	left: 56px;
	top: 400px;
}

Also das Problem ist dass das die Bild durch das Cycle Plugin neu positioniert werden und der CSS-Code ignoriert wird. Weild as zentrierte Positionieren funktioniert ohne JS einwandfrei.

Viele Grüße

Quaese · 13. Juli 2010

Hi,

was wird falsch positioniert, der Slideshow-Holder oder die Bilder?

Falls es der Holder ist, könntest du es über CSS versuchen.

Code:

#slideshow
{
    /*position: absolute;*/
    width: 968px;
    line-height: 576px;
    text-align: center;
    z-index:2;
    margin: auto;
}

Vielleicht hilfts.

Ciao
Quaese

Jan-Frederik Stieler · 13. Juli 2010

Hi,
erstmal Danke!
Aber das hilft leider nichts.
Das Problem ist das cycle eben die Animation auf Basis von position:absolute macht und dann eben left animiert. und das versaut mir das gestylte .center.
Ich blick nur nicht so richtig durch wie ich das vernünftig hinbekomme.

Ich hab grad gesehen das dem DIV#slideshow noch ein style="width: 596px; height: 639px; overflow: hidden;" hinzugefügt wird. wo das herkommt wüßte ich auch mal gerne. Das überschreibt das width in meinem StyleSheet.
Wenn ich nun dem .center noch ein width mirgebe dann läuft die Animation wenigstens über die gesammte Webseitenbreite. Wie es auch gewünscht ist. Nur ist das Bild nicht zentriert, und darum geht es eigentlich.

Gruß

Quaese · 13. Juli 2010

Hi,

wenn du das position: absolute wie von mir gezeigt auskommentierst, sollte cycle das Element eigentlich relativ positionieren. Darin werden die Bilder anschliessen absolute angeordnet und über die CSS-Eigenschaft left bewegt.

Vielleicht würde es bei der Fehleranalyse helfen, wenn du ein funktionierendes Dokument zur Verfügung stellen würdest (am besten online). Denn sich alles zusammensuchen zu müssen, ist mühselig .. zumal dein sonstiges CSS gänzlich unbekannt ist.

Und in meinem Testdokument, dass auf das Notwendigste reduziert ist, funktioniert das Zentrieren der Slidebox mit meiner oben vorgestellten Variante, wenn ich die Klasse .center um float: left und width erweiter.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="content-language" content="de" />
<meta name="description" content="Büro Exit - Design Büro Darmstadt" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Büro Exit - Design Büro Darmstadt - startseite</title>
<style type="text/css">
  <!--
#slideshow
{
    /*position: absolute;*/
    width: 968px;
    line-height: 576px;
    text-align: center;
    z-index:2;
    margin: auto;
}

.center
{
    vertical-align: middle;
    float: left;
    width: 968px;
}

span.caption
{
    position: absolute;
    font-size: 45pt;
    text-transform: uppercase;
    font-weight: bold;
    text-align: left;
    line-height: 120%;
}

span.caption.b01
{
    left: 56px;
    top: 400px;
}
 //-->
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
</head>
<body >
<div id="wrapper">
  <div>
    <script type="text/javascript">
    $(document).ready(function()  {
      $('#slideshow').cycle({
        fx: 'scrollLeft',
        speed: 4000,
        timeout: 2000
      });
    });
    </script>
    <div id="slideshow"><a class="center" href="#"><img src="bild1.jpg" alt="birkenhof_kürbiskernöl" title="birkenhof kürbiskernöl" /> <span class="caption b01">Birkenhof<br />Kürbiskernöl</span> </a> <a class="center" href="#"><img src="bild2.jpg" alt="birkenhof_webseite" title="birkenhof webseite" /> <span class="caption b01">Birkenhof<br />webseite</span> </a></div>
  </div>
</div>
</body>
</html>

Ciao
Quaese

Jan-Frederik Stieler · 13. Juli 2010

HI,
naja, das Problem ist das nun das Hintergrundbild

HTML:

<img id="frontpagecontent" src="http://www.tutorials.de/forum/images/stories/frontpagebackground.jpg" title="Startbild - Leeres Sofa vor Wand" alt="frontpagebackground.jpg" />

nun nicht mehr richtig positioniert wird da ich ja ohne position: absolute kein z-index für die Animation verwenden kann und die soll eüber dem Hintergrundbild ablaufen.
Ich versuch mal eien Version dafür online zu stellen.

Gruß

Quaese · 13. Juli 2010

Das Hintergrundbild der Slidebox als Hintergrund zuweisen geht nicht?

Quaese

Jan-Frederik Stieler · 14. Juli 2010

http://bueroexit.de/index.php?option=com_content&view=article&id=135
hier mal hochgestellt.

Das Hintergrundbild der Slidebox als Hintergrund zuweisen geht nicht?

Hab ich jetzt noch nicht drangedacht.

Quaese · 14. Juli 2010

Hi,

wenn ich es richtig überblicke, funktioniert es jetzt wie gewünscht. Oder habe ich etwas übersehen?

Ciao
Quaese

Jan-Frederik Stieler · 14. Juli 2010

Naj noch nicht ganz. eben das Bild welche mit center positioniert werden werden jetzt halt eben nur horizontal zentriert ausgerichtet und nicht mehr vertical.

Viele Grüße

Quaese · 14. Juli 2010

Hi,

vielleicht hilft es, das ganze mittels JS auszurichten:

Code:

$(document).ready(function()  {
  $.preloadImages("../images/stories/be_logo_hover_signet_ff00fb-trans.png", "../images/stories/be_logo_hover_ff00fb-trans.png", "../images/stories/be_logo_hover_signet_fbd72b-trans.png", "../images/stories/be_logo_hover_fbd72b-trans.png", "../images/stories/be_logo_hover_signet_00ff00-trans.png", "../images/stories/be_logo_hover_00ff00-trans.png", "../images/stories/be_logo_hover_signet_00d8ff-trans.png", "../images/stories/be_logo_hover_00d8ff-trans.png")

  $('#slideshow').cycle({
    fx: 'scrollLeft',
    speed: 4000,
    timeout: 2000
  });

  var intLineHeight = parseInt($('#slideshow').css("line-height"));

  // Slide-Elemente durchlaufen
  $('#slideshow .center').each(function(){
    // onload-Handler für die Bilder
    $(this).find("img").load(function(){
      // Falls schon Offset existiert (IE 7)
      if(this.offsetTop != 0) return;

      // Benötigten Marginwert berechnen und zuweisen
      var intMarginTop = parseInt((intLineHeight-this.height)/2);
      $(this).css({
        'margin-top': intMarginTop + "px"
      });
    });
  });
});

Ciao
Quaese

jQuery-Cycle verändert die CSS-Positionierung der animierten Bilder

Jan-Frederik Stieler

Monsterator

Quaese

Moderator

Jan-Frederik Stieler

Monsterator

Quaese

Moderator

Jan-Frederik Stieler

Monsterator

Quaese

Moderator

Jan-Frederik Stieler

Monsterator

Quaese

Moderator

Jan-Frederik Stieler

Monsterator

Quaese

Moderator

Neue Beiträge