Slider über »Dateisammlung«

Slider über »Dateisammlung«

Ich habe mal unter FSC mit dem Template "uploads.html" (Dateisammlung) einen Slider mit dem Javascript "bs_slider.js" umgesetzt.

Das möchte ich Euch gerne hier vorstellen (Der Wunsch dazu kam aus einem Facebook-TYPO3-Forum).

Erweitern des Felds "uploads_type" per TSConfig

"uploads_type" = "Datei/Symbol/Vorschaubild anzeigen"

in die Page-TSConfig kommt:

 

TCEFORM.tt_content {
   layout {
      uploads {
         removeItems = 1,2,3
         altLabels {
            0 = Standard
            1 = ---
            2 = ---
         }
         addItems {
            horizontal = Bei Slider »gleiten«
            fade = Bei Slider »überblenden«
         }
      }
   }

   uploads_type {
      // Slider hinzufügen
      addItems.3 = Bilddateien als Slider ausgeben
   }
}

 

Der Tipp mit TSConfig anstatt TCA ($GLOBALS['TCA']['tt_content']['columns']['uploads_type']['config']['items']['3']['0'] = 'Bilddateien als Slider ausgeben';)

kam von Roman Ott aus dem TYPO3-Forum in Facebook: TYPO3 Fragen, Antworten - inoffizielle Gruppe

Backend: Das CE Dateisammlung [Template: "Uploads.html"]

Screenshots aus dem Backend zum Silder per "Dateisammlung":

Erweiterung des Standard-Templates zu "Textmedia.html"

<f:section name="Main">

    <div class="
         ce-textpic
         ce-{gallery.position.horizontal}
         ce-{gallery.position.vertical}
         {f:if(condition: gallery.position.noWrap, then: ' ce-nowrap')}
         ">

      <f:if condition="{data.frame_class} == 'imageSlider'">
         <f:then>
               <f:render partial="Media/Slider" arguments="{_all}" />
         </f:then>
         <f:else>
            <f:if condition="{gallery.position.vertical} != 'below'">
                  <f:render partial="Media/Gallery" arguments="{_all}" />
              </f:if>
         </f:else>
      </f:if>

...

 

Das Partial Media/Slider:

<f:if condition="{gallery.rows}">
    <div id="imageSlider{data.uid}"
        class="ce-gallery
           {f:if(condition: data.imageborder, then: ' ce-border')}
           imageSlider
        "
    >

        <f:for each="{gallery.rows}" as="row">
            <f:for each="{row.columns}" as="column">
                <f:if condition="{column.media}">
                    <div class="slider-item">
                        <f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
                    </div>
                </f:if>
            </f:for>
        </f:for>

     </div>

   <script>
      $(document).ready(function(){
         $('#imageSlider{data.uid}').bxSlider({
            auto: true,
            speed: 800,
            pause: 5000,
            autoControls: true,
            stopAutoOnClick: true,
            pager: true,
            captions: true,
            autoHover: true
         });
      });
   </script>

</f:if>

Dateisammlung / Uploads

Der Slider muss natürlich über ein Uploads-CE gefüttert werden. Dazu hier zwei Bilder zur »Dateisammlung«

Das Ergebnis als HTML-Code