jQuery-Cycle verändert die CSS-Positionierung der animierten Bilder @ tutorials.de: Tutorials, Forum & Hilfe

**Jan-Frederik Stieler** · 13.07.10 21:14

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-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>
  <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>

Code 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.07.10 21:45

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.07.10 22:15

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.07.10 23:21

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
{
    [B]/*position: absolute;*/[/B]
    width: 968px;
    line-height: 576px;
    text-align: center;
    z-index:2;
    [B]margin: auto;[/B]
}
 
.center
{
    vertical-align: middle;
[B]    float: left;
    width: 968px;[/B]
}
 
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.07.10 23:31

HI,
naja, das Problem ist das nun das Hintergrundbild

HTML-Code:

<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.07.10 23:38

Das Hintergrundbild der Slidebox als Hintergrund zuweisen geht nicht?

Quaese

**Jan-Frederik Stieler** · 14.07.10 00:00

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

Das Hintergrundbild der Slidebox als Hintergrund zuweisen geht nicht?

Hab ich jetzt noch nicht drangedacht.

**Quaese** · 14.07.10 08:38

Hi,

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

Ciao
Quaese

**Jan-Frederik Stieler** · 14.07.10 11:36

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.07.10 17:46

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

**Jan-Frederik Stieler** · 16.07.10 08:58

Guten Morgen Quase,
auch wenn du dir jetzt diese Arbeit gemacht hast, aber leider hat das nicht funktioniert.

Gruß

**Quaese** · 16.07.10 09:34

Guten Morgen Jan-Frederik,

bei mir funktioniert sowohl das horizontale als auch das vertikale Zentrieren der Bilder im slideshow-Element. Getestet in den aktuell gängigen Browsern.

Wegen der IEs muss noch die Klasse .center derart modifiziert werden, dass kein Hintergrund mehr gezeigt wird. Andernfalls erhalten die Links irgendwoher einen weissen Hintergrund.

Code :

.center{
  width: 968px;
  float: left;
  background: 0 none !important;
  vertical-align: middle;
}

Mein Testdokument habe ich dir mal hochgeladen.

Ciao
Quaese

**Jan-Frederik Stieler** · 16.07.10 16:34

Hi Quese,
ich hab mir das jetzt auch mal in allen möglichen Browsern angeschaut.
Mein FF zeigts falsch an, Safari richtig, Opera mal so, mal so und Chrome auch.

Danke für die Korrektur für den IE. Aber hat auch noch ein paar andere kleine Probleme

.

Gruß

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bilder per jQuery laden

Jquery Cycle Plugin - Foto per URL direkt anwählen aus Galerie

jQuery-Cycle mit Captions versehen

Probleme mit Lightbox und JQuery.Cycle

Beim verändert wird Kennwort mit verändert

E-Mail:

Abonnieren Abbestellen