Google Chrome Problem mit Slideshow

hugo22

Hallo Community,

ich habe ein Problem mit einer Slideshow. Und zwar wird sie im Internet Explorer und Firefox richtig angezeigt, jedoch in Google Chrome nicht ganz richtig.
Die Slideshow umfasst 4 Schritte welche mittels JavaScript nach einer gewissen Zeit wechseln, der Wechsel umfasst jeweils ein Bild, Container und der darin liegenden Text. Das Problem ist nun, dass bei Schritt 3 und 4 die Containerposition nach unten verschoben wird. Dies passiert jedoch nur bei Google Chrome. Hat vielleicht jemand ein Tipp? Ich habe schon alles probiert was mir möglich war, jedoch erfolglos.

Code

<div id="slideshow" class="clearfix no-print">
<div id="slideshow-inner">
<div class="caption promoSlideshow left">
<div class="head"><div class="contentConstrain"><div class="breadcrumb" style="display:none"></div></div></div>
<div class="body">
<ul class="list" id="promotions_slideshow_grid" jsid="promotions_slideshow_grid" style="height:560px">




<li class="item first" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_25cc613b-ca49-471c-a1e9-926c29324cbb',true)">
<div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
<div class="claim clearfix">
<h1>Überschrift*</h1>
<h2>2. Überschrift</h2></div>
<div class="subelement clearfix">
<div class="teaser-slide clearfix">
<h3 id="slide-text" style=" display: block;">Text</h3></div>
<div class="teaser-subline">
<h3>Text</h3></div>
<a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
<p>*</p></div></div>
<div style="overflow:hidden; height:560px">
<img src="Bild" border="0"  /></div>
</li>










<li class="item first" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_7fa1d475-a8c9-45b2-bca0-c5995b46b2de',true)">
<div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
<div class="claim clearfix">
<h1>Überschrift*</h1>
<h2>2. Überschrift</h2></div>
<div class="subelement clearfix">
<div class="teaser-slide clearfix">
<h3 id="slide-text" style=" display: block;">Text</h3></div>
<div class="teaser-subline">
<h3>Text</h3></div>
<a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
<p>*</p></div></div>
<div style="overflow:hidden; height:560px">
<img src="Bild" border="0"  /></div>
</li>










<li class="item" title="Vernetzt Mit der Zukunft 4" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_36a18383-fb74-4713-8a3d-8dd83d9f9bdd',true)">
<div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
<div class="claim clearfix">
<h1>Überschrift*</h1>
<h2>2. Überschrift</h2></div>
<div class="subelement clearfix">
<div class="teaser-slide clearfix">
<h3 id="slide-text" style=" display: block;">Text</h3></div>
<div class="teaser-subline">
<h3>Text</h3></div>
<a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
<p>*</p></div></div>
<div style="overflow:hidden; height:560px">
<img src="Bild" border="0"  /></div>
</li>






<li class="item last" title="Vernetzt Mit der Zukunft 2" tabindex="0" onfocus="javascript:popInlineEdit('Toolbar_09153c29-25db-4d10-b859-edebbbb67124',true)">
<div class="contentConstrain" style='z-index: 2;'><div class="XslideCaption"><div class="clearfix" id="teaser">
<div class="claim clearfix">
<h1>Überschrift*</h1>
<h2>2. Überschrift</h2></div>
<div class="subelement clearfix">
<div class="teaser-slide clearfix">
<h3 id="slide-text" style=" display: block;">Text</h3></div>
<div class="teaser-subline">
<h3>Text</h3></div>
<a href="link" ><button class="arr">Link</button></a><a href="Link" title="Link"  class="textlink-arr">Link</a></div></div>
<p>*</p></div></div>
<div style="overflow:hidden; height:560px">
<img src="Bild" border="0"  /></div>
</li>


</ul>




</div>
<div class="foot">




<script type="text/javascript">
require({
    packages : [ { name : 'ctc', location : '/ctc_theme/js/portal_dojo_17/ctc/' } ]
  }, ['ctc/component_layer'], function() {
  require(['ctc/component'], function(component) {
component.parseSlideshow('promotions_slideshow_grid', 
               'Crossfade', 
               'Automatic Forward',
               4000,
               'Hover');


component.parseSlideshowControl('promotions_slideshow_grid', 
                      'promotions_slideshow_grid_Controls', 
                      'Titles',
                      '');


component.setupSlideshowCaption('promotions_slideshow_grid', 'promotions_slideshow_grid_Caption');
});
});
</script>


</div></div></div></div>

Alles anzeigen

Code

/***************************************************************
 HOME SLIDESHOW SCREEN
 ***************************************************************/ 
 
 #primaryContainer #slideshow {
  float: none;
  height: 560px;
  clear: none;
  width: 100%;
  min-height: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  min-width: 0;
  z-index: 0;
  overflow:hidden;
 
  }
 #primaryContainer #slideshow #slideshow-inner{
  position:relative;
  height: 100%;
  width:1280px;
  margin:auto;
  overflow:hidden;
 }
 #primaryContainer #slideshow #slideshow-inner img{
  position:absolute;
  z-index:1 ;
  top: 0px;
  }
 #primaryContainer #slideshow #slideshow-inner img.active{
  z-index:3;
  }

Alles anzeigen

Gruß
Hugo

Grevas

Geht nicht.

...

Dein Snippet ist standalone nicht lauffähig, da haufenweise Javascript fehlt. Wie wärs mit einem Link?

hugo22

sorry, hier das Script.

Code

/*! slidewhow.js 1.0
 *
 * sr
 */
function ImageSlider(){
    var $active = $('#slideshow-inner .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow-inner img:first');
    $next.css('z-index',2);



     $('#slide-text').fadeOut(500,function(){
    $('#slide-text').html($next.attr('alt'));
    $('#slide-text').fadeIn(500);
      });
      $active.fadeOut(1000,function(){
    $active.css('z-index',1).show().removeClass('active');
         $next.css('z-index',3).addClass('active');
      });
}

Alles anzeigen

explanator

Packe doch mal bitte alles auf eine Seite und lade den Kram auf einen Server hoch. Kein Mensch hat Lust sich das alles zusammen zu basteln, zumal man dann immer noch nicht deine Originalseite hat, da Doctype, Zeichensatz, Bilder und jQuery-Version fehlen.

Grevas

Mit "haufenweise" meine ich tatsächlich was ich schreibe, nicht nur eine Funktion...
Z.B. seh ich das da require.js verwendet wird, ist aber bei deinem schnipsel nicht referenziert.

Beim drüberschauen schon mal ein paar Fehler:
- h3#slide-text gibt es 4 mal, eine ID darf aber nur 1x verwendet werden.
- jQuery.next geht nur auf das nächste Element (du kannst damit auch erst recht nicht aus dem Parent springen!)
> $active.parents('darfst-selbst-schauen-wenn-du-nicht-einrückst').next().find('img')

Für mehr würde ich das dann aber ebenfalls auf einem Server sehen wollen oder eben eine Standalone Version des Sliders.

Tags