Ankündigung

Einklappen
Keine Ankündigung bisher.

Link für Fullscreen Gallery

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

  • Link für Fullscreen Gallery

    Ich bin gerade ein "Banner Modul" für Werbeaktionen zu bauen.
    Als Vorlage habe ich das CE Fullscreen Gallary genommen.

    Die Darstellung konnte ich für mich passend umstellen. Leider scheitere ich beim aber hinzufügen des Links.
    Ich hätte gerne, dass jeder Slide einen Link verpasst bekommt, wenn im Backend ein Link hinzugefügt wird.
    Egal wo ich den Link posiotniere, es verhaut mir immer die Anzeige der Images.

    Einfügen möchte ich den Link mit einem Auszug aus dem CE Image Box
    PHP-Code:
    <?php if ($this->field('link')->value()): ?><a href="<?php echo $this->field('link')->value(); ?>" class="ce_text_imagebox_link"<?php if($this->field('link')->option('target')): ?> target="_blank"<?php endif; ?><?php if($this->field('link')->option('titleText')): ?> title="<?php echo $this->field('link')->option('titleText'); ?>"<?php endif; ?>><?php endif; ?>
    Kann mir jemand sagen, wie den Link hier einfügen kann, ohne dass es ein Auswirkung auf andere Elemente hat?
    PHP-Code:
    <div class="ce_revolutionslider ce_fullscreen_gallery <?php echo $this->class?> <?php echo $this->field('version')->value(); ?> block" <?php echo $this->cssID?><?php if ($this->style): ?> style="<?php echo $this->style?>"<?php endif; ?>>        
        <div class="rs-container fullscreen block">
            <div  class="banner fullscreen tp-banner fullscreen-container my_revolutionslider_<?php echo $this->id?> block">
                <ul>
                    <?php foreach($this->group('images') as $i => $fields): ?>
                        <li  class="slide" data-transition="<?php echo $this->field('data_transition')->value(); ?>" data-slotamount="4" data-thumb="<?php echo \FilesModel::findByPk($this->field('image#'.$i)->value())->path?>" data-masterspeed="<?php echo $this->field('data_speed')->value(); ?>">
                            <img src="<?php echo $this->field('image#'.$i)->generate(); ?>" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">
                            <div  class="ce_revolutionslider_text caption tp-caption block bold fade<?php if($this->field('invertcolor#'.$i)->value()): ?> invertcolor<?php endif; ?>" style="font-size:<?php echo $this->field('fontsize_headline')->value(); ?>px" data-easing="easeInBack" data-x="40" data-y="<?php echo $this->field('headline_pos')->value(); ?>" data-start="1" data-speed="<?php echo $this->field('data_speed')->value(); ?>" data-endeasing="easeInSine" >
                                <?php echo $this->field('headline#'.$i)->value(); ?>
                               </div>
                               <div  class="ce_revolutionslider_text caption tp-caption block fade<?php if($this->field('invertcolor#'.$i)->value()): ?> invertcolor<?php endif; ?>" style="font-size:<?php echo $this->field('fontsize_text')->value(); ?>px" data-easing="easeInBack" data-x="40" data-y="<?php echo $this->field('text_line_1_pos')->value(); ?>" data-start="1" data-speed="<?php echo $this->field('data_speed')->value(); ?>" data-endeasing="easeInSine" >
                                   <?php echo $this->field('text_line_1#'.$i)->value(); ?>
                               </div>
                                <div  class="ce_revolutionslider_text caption tp-caption block fade<?php if($this->field('invertcolor#'.$i)->value()): ?> invertcolor<?php endif; ?>" style="font-size:<?php echo $this->field('fontsize_text')->value(); ?>px" data-easing="easeInBack" data-x="40" data-y="<?php echo $this->field('text_line_2_pos')->value(); ?>" data-start="1" data-speed="<?php echo $this->field('data_speed')->value(); ?>" data-endeasing="easeInSine" >
                                    <?php echo $this->field('text_line_2#'.$i)->value(); ?>
                                </div>
                    <?php endforeach; ?>
                 </ul>
             </div>
        </div>
    </div>
    Wäre wie imer sehr dankbar für jegliche Hilfe.

  • #2
    Der Link sollte z.B. das <img> umschließen. Und je nach gesetzten Link öffnen und dahinter schließen und die Zählvariable nicht vergessen.

    Code:
    [COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]if ([/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'link#'.$i[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]value[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]()): [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR]
    [COLOR=#000000][FONT=&quot][SIZE=12px]<a href="[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]echo [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][SIZE=12px]'link#'.$i[/SIZE][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]value[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px](); [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px]" class="ce_text_imagebox_link"[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]if([/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][SIZE=12px]'link#'.$i[/SIZE][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]option[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'target'[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])): [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px] target="_blank"[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]endif; [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?><?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]if([/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][SIZE=12px]'link#'.$i[/SIZE][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]option[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'titleText'[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])): [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px] title="[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]echo [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][SIZE=12px]'link#'.$i[/SIZE][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]option[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'titleText'[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]); [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px]"[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]endif; [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px]>[/SIZE][/FONT][/COLOR]
    [COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]endif; [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR]
    
    [COLOR=#000000][FONT=&quot][SIZE=12px]<img src="[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]echo [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'image#'[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px].[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$i[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]generate[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px](); [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR][COLOR=#000000][FONT=&quot][SIZE=12px]" data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat">[/SIZE][/FONT][/COLOR]
    
    [COLOR=#0000BB][FONT=&quot][SIZE=12px]<?php [/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]if ([/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]$this[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]field[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]([/SIZE][/FONT][/COLOR][COLOR=#DD0000][FONT=&quot][SIZE=12px]'link[/SIZE][/FONT][/COLOR][COLOR=#DD0000][SIZE=12px]#'.$i[/SIZE][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px])->[/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]value[/SIZE][/FONT][/COLOR][COLOR=#007700][FONT=&quot][SIZE=12px]()): [/SIZE][/FONT][/COLOR][COLOR=#0000BB][FONT=&quot][SIZE=12px]?>[/SIZE][/FONT][/COLOR]
    [COLOR=#000000][FONT=&quot][SIZE=12px]</a>
    <?php endif; ?>[/SIZE][/FONT][/COLOR]
    Zuletzt geändert von Tim; 11.10.2018, 15:11.
    http://www.premium-contao-themes.com

    Kommentar


    • #3
      Hallo Tim,

      vielen Dank für die schnelle Antwort. Leider hat sich nichts geändert....
      Genau wie zuvor werden die eingebundenen Bilder werden nicht mehr zentriert:
      Klicke auf die Grafik für eine vergrößerte Ansicht

Name: fullscreengallery.PNG
Ansichten: 160
Größe: 508,3 KB
ID: 13147
      Angehängte Dateien

      Kommentar


      • #4
        Jetzt hast du auch ein anderes Element um das img und ggf. muss das css angepasst werden. Der Link selbst muss 100% jetzt laufen, damit das Bild diesen als großen Container ansieht.
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          Das hier wird nicht mehr übernommen, sobald der Link drin ist:
          PHP-Code:
          data-bgfit="contain" data-bgposition="center center" data-bgrepeat="no-repeat" 
          Wie kann ich das Bild per CSS ansprechen? Hab jetzt schon zig Varianten versucht ber ich bekomm es verändert. Auch das vergeben eine ID hilf nicht weiter.

          Kommentar


          • #6
            Hast du einen Link, wo man deinen aktuellen Stand sehen kann?
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              Zitat von Tim Beitrag anzeigen
              Hast du einen Link, wo man deinen aktuellen Stand sehen kann?
              Aber sicher doch: https://neu.motoyama.de/home-1865.html

              Kommentar


              • #8
                Nun gut, sicher nicht der richtige Einsatzort für eine "Fullscreen" Gallery, aber ok. Das CE erstellt einen RS-Slider, aber mit abgespeckten Funktionen, würdest man hier bereits einen richtigen RS Slider aus dem Modul nehmen, könntest du direkt je Slide, in den Slide-Einstellungen einen Link wählen.

                So zieht sich das Bild auf.
                1. Link auf 100%
                2. Bild darin auf 100%

                .ce_revolutionslider .ce_text_imagebox_link {float:left; width:100%;}
                .ce_revolutionslider .ce_text_imagebox_link img {width:100%;max-width:100%;}
                http://www.premium-contao-themes.com

                Kommentar


                • #9
                  Ja, das Modul wird hier etwas Zweckentfremdet. Man könnte natürlich auch direkt den RS Slider nehmen aber ich wollte etwas mit eher wenig Einstellmöglichkeiten, damit man nicht zu viel verstelllen kann ;-)

                  .ce_revolutionslider .ce_text_imagebox_link {float:left; width:100%;}
                  .ce_revolutionslider .ce_text_imagebox_link img {width:100%;max-width:100%;}
                  So wird das Bild auf die gesamte größe gezogen aber das Bild soll mittig und immer voll angezeigt werden. Aber ich denke, das bekomme ich jetzt hin...

                  Dankeschön!

                  Kommentar

                  Lädt...
                  X