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...
      X