Ankündigung

Einklappen
Keine Ankündigung bisher.

Revolution-Slider zum MediaQuery-gesteuerten Bildslider umrüsten

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Revolution-Slider zum MediaQuery-gesteuerten Bildslider umrüsten

    Hi Leute,
    der RS erm�glicht bereits von Haus aus eine responsive Darstellung. Um den RS in ein "media query driven" Slider um zu wandeln, anbei ein kleines modifiziertes revoslider_ Template.
    Mit dem Template werden die Contao-responsive-Image Bildgr��en in die Slide-Hintergr�nde geladen und deren MediaQuery-Definitionen dynamisch eingesetzt.

    revoslider_...html5

    Code:
      <?php
      $objSlides = \RevolutionSlider\Models\Slides::findBy( array('pid=?','published=?'), array($this->id,1), array('order' => 'sorting') );
      $arrSlides = $objSlides->getModels();
      $arrMediaQueries = array();
      ?>
        <?php if(!empty($this->slides)): ?>
        <div <?php echo $this->sliderID; ?> class="banner <?php echo $this->class; ?> block">
      <ul>
      <?php foreach($this->slides as $i => $slide): ?>
      <?php
      $objSlide = $arrSlides[$i];
      if( $objSlide->singleSRC && $objSlide->background == 'image' )
      {
          $slide['class'] .= ' rs_mq_image_'.$this->id.'_'.$i;
          $objFile = \FilesModel::findByPk( $objSlide->singleSRC );
          $objPicture = \Picture::create($objFile->path,deserialize( $objSlide->size) );
          if( $objPicture !== null )
          {
              $arrPicture = $objPicture->getTemplateData();
          
              foreach($arrPicture['sources'] ?: array() as $data)
              {
                  if( strlen($data['media']) < 1 )
                  {
                      continue;
                  }
                  $arrMediaQueries[] = '@media ('.$data['media'].') { .rs_mq_image_'.$this->id.'_'.$i.' .tp-bgimg { background-image:url('.$data['src'].') !important; } }';
              }
          }
      }
        if( count($arrMediaQueries) > 0 )
      {
          $GLOBALS['TL_HEAD'][] = '<style> '.implode("\n",$arrMediaQueries).'</style>';
      }
      ?>
        <li <?php echo $slide['cssID']; ?> class="<?php echo $slide['class']; ?>" <?php echo $slide['attributes']; ?>>
          <?php foreach($slide['content'] as $content): ?>
          <?php echo $content; ?>
          <?php endforeach; ?>
      </li>
      <?php endforeach; ?>
      </ul>
      <div class="tp-bannertimer"></div>
      </div>
      <?php else: ?>
      <p class="info empty"><?php echo $this->emptyMsg; ?></p>
      <?php endif; ?>

    Angeh�ngte Dateien
    http://www.premium-contao-themes.com

  • #2
    Hallo, gibt es eine M�glichkeit auch das "gallery_revoslider.html5" Template so zu modifizieren ? Habe es probiert, bekomme es leider nicht hin. Vielen Dank schonmal !

    Kommentar


    • #3
      Zitat von sfx12 Beitrag anzeigen
      Hallo, gibt es eine M�glichkeit auch das "gallery_revoslider.html5" Template so zu modifizieren ? Habe es probiert, bekomme es leider nicht hin. Vielen Dank schonmal !
      Frohes Neues

      ps. Hier das MediaQuery in Contao mit Klammern schreiben. So wie es in der Feldbeschreibung aufgezeigt wird z.B. (max-width: 600px)


      Angeh�ngte Dateien
      http://www.premium-contao-themes.com

      Kommentar

      Lädt...