Anmeldung

Artikel

Hintergrund Bilder

Hintergrund Bilder dynamisch

Hintergrund Bilder für die gesamte Seite werden über die Seiteneigenschaft "Ressourcen" - "Media" ausgewählt. Die JQuery lib "backstrech" ermöglicht dynamisch angepasste Hintergrundbilder und Slideshows für Seiten und Inhaltselemente.

HTML page wrapper für Hintergrund Bilder 

<html>
  <body>
    <div class="page bck">
      Inhalte ....
   </div>
  </body>
</html>

Folgendes Typoscript erzeugt den JSinline-Code für die Hintergrund Bildershow einer Seite. 

lib.backstretch = FILES
lib.backstretch {
    references {
        table = pages
        uid.data = tsfe:id
        fieldName = media
    }

    begin = 0
    maxItems = 5

    renderObj = IMG_RESOURCE
    renderObj {
        file.import.data = file:current:uid
        file.treatIdAsReference = 1
        stdWrap.wrap = "{$website.settings.baseUrl}|",
    }
    stdWrap.wrap = $('.bck').backstretch([|], {duration: 3000, fade: 800});
}

[globalVar = TSFE:page|media != ""]
 page.jsFooterInline.90 < lib.backstretch
[global]

Hintergrund Show für Bereiche / Sections

Hintergrund Bilder & Shows für Bereiche / Sections realisierte ich mit folgenden Einstellungen. Der Seitenaufbau mit dynamisch generiertem JS inline Code. 

<html>
 <body>
 <section class="sec_1">
 weitere Inhalte ...
 </section>
 <script type="text/javascript"></script>

 <section class="sec_2">
 weitere Inhalte ...
 </section>
 <script type="text/javascript"></script>

 </body>
</html>

Fluid Code zur Erstellung des JS inline Code: 

<f:if condition="{data.flexform_image}">
  <f:then>
     <f:cObject typoscriptObjectPath="lib.gridsection" data="{data}" />
  </f:then>  
</f:if>

Das TS-Script zur Erzeugung des JS inline Code: 

lib.gridsection = COA
lib.gridsection {
  10 = TEXT
  10.field = uid
  10.wrap = <script type="text/javascript"> $(document).ready(function(){$('.sec_|').
  
  20 = COA
  20 {
    10 = TEXT
    10.stdWrap.field = flexform_image
    10.stdWrap.split {
      token = ,
      cObjNum = 1
      1.current = 1
      1.wrap = "{$website.templates.settings.baseUrl}/uploads/tx_gridelements/|",
    }
    wrap = backstretch([|], {duration: 3000, fade: 800});});
  }
  wrap = |</script>
}

Demo Webseite

typo3

Tag Cloud

Kategorien

  1. typo3

Archiv

  1. November 2015 (1 entry)
  2. Oktober 2015 (2 entries)
RSS 2.0 Fetzen (Blog)