carouFredSel-Karussells als Newsticker - Teaser Image

[foil]

Hi Dirk,

Vielen Dank für die geniale Erweiterung.

Ist es möglich bei der Konfiguration des Karussels als Newsticker, dass das Teaserbild als Hintergrund hinter dem Teasertext zu liegen kommt?

Ich bin dankbar für jeden Input.

Foil

[Dirch]

Hallo Foil,

nein das geht nicht über Einstellungen. Der Slider legt sich auch nur um die News herum. Aber du solltest das Bild per CSS und ggf. mit Template-Anpassung des Newstemplates auch in den Hintergrund legen können. Wie es genau geht kann ich dir nicht sagen, denn ich müßte das selbst ausprobieren. Bei der Hitze ist mir aber nicht danach... Jedenfalls ist das keine Slider-Sache, sondern eine allgemeine CSS-Sache...

Liebe Grüße...
...Dirk

[foil]

Hallo Dirk

Vielen Dank für die rasche Antwort.

Ich bin schon fast fertig damit, was ich bisher gemacht habe (ev. willst du das dann ins Template aufnehmen)

1. Folgender Code ins news_caroufredsel_ticker.html5 template einfügen damit das Teaser Bild auch angezeigt wird.

<?php if ($this->addImage): ?>
    <figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
      <?php endif; ?>

      <img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>">

      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>

      <?php if ($this->caption): ?>
        <figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
      <?php endif; ?>

    </figure>
  <?php endif; ?>

2. CSS anpassen um den Teasertext an den gewünschten Ort zu platzieren.

3. Was ich nun noch gerne ändern sollte und aber bis jetzt nicht herausgefunden habe:

<div class="caroufredsel_wrapper caroufredsel_wrapper_21" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 940px; height: 397px; margin: 0px; overflow: hidden;">

Wo im JS code wird das height: 397px berechnet und eingefügt. Ich habe ein Teaser Bild von 940px mal 250 px und dann sollte das height des caroufredsel_wrapper auch nur 250px sein. Jetzt berechnet er aber noch den Teasertext dazu, deshalb ist hier 397px.

Dank wenn Du mir da einen Tipp geben kannst wo ich das im JS code ändern kann.

[Dirch]

Dankeschön - ich schau mal was und wie ich das einbauen kann.

3. Was ich nun noch gerne ändern sollte und aber bis jetzt nicht herausgefunden habe:

<div class="caroufredsel_wrapper caroufredsel_wrapper_21" style="display: block; text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 940px; height: 397px; margin: 0px; overflow: hidden;">

Wo im JS code wird das height: 397px berechnet und eingefügt. Ich habe ein Teaser Bild von 940px mal 250 px und dann sollte das height des caroufredsel_wrapper auch nur 250px sein. Jetzt berechnet er aber noch den Teasertext dazu, deshalb ist hier 397px.

Dank wenn Du mir da einen Tipp geben kannst wo ich das im JS code ändern kann.

Den caroufredsel_wrapper generiert das Script und setzt die Stile anhand seiner internen Berechnungen, die auf den Einstellungen basieren bzw. wenn da keine Größen vergeben wurden automatisch berechnet werden aus den Element-Größen, die in dem Container enthalten sind. Hast du den Inhalt gefloatet oder wie hast du das Bild platziert?

[foil]

Hi Dirk

Danke für die Antwort, damit hast du mich auf den richtigen Weg geführt.
1. Fest Höhe des Karoussell angeben (in diesem Fall 250 px = Bilderhöhe)
2. Teasertext absolut positionieren (in diesem Fall 397px-250px=bottom 147px)

Ein schönes Wochenende

Foil