Responsive Zoom Galerie

[mandrake]

Hat jemand das Script der Isotope Zoom Galerie (http://www.elevateweb.co.uk/image-zoom) schon einmal so eingesetzt/ angepasst, dass sich die Größe des Overlays in einem responsive Layout korrekt an Änderungen der Viewportgröße anpasst? Wenn nein, hat jemand ggf. eine Idee, wie man dies am besten realisieren könnte?

Aktuell ist es so, dass sich die Größe erst nach einem Reload der Seite, nicht aber bei manueller Änderung der Fenstergröße (Desktop) oder wechsel der Orientation (Mobile) entsprechend anpasst.

Bin für jeden Tipp dankbar.

[stefan-at-work]

Hallo Peter,

ungetestet: es gibt auch eine responsive Alternative: http://www.jqueryrain.com/?qlWppOQI

[mandrake]

Danke Dir für den Link - werde ich mir anschauen.

Unabhängig davon, bin ich weiterhin an einer Lösung bzgl. der Standard Isotope Zoom Galerie interessiert. Oder ist diese nur Makulatur und wird von niemandem in einem responsive Shop Layout produktiv eingesetzt? Kann doch eigentlich nicht sein, dass darüber noch niemand gestolpert ist?!

[Samuell]

Also ich habe Sie noch nie eingesetzt.
Da ist so viel absolut positioniert und per JS berechnet.
Ich würde vielleicht mal versuchen ob es was bringt ähnlich eines iFrame oder einer google map einen Container mit pos. relativ und padding für die Höhe zu setzen, so dass der inhalte immer mit pos absolute so groß sein will sie der umgebende Container. Aber das ist nur eine spontane Idee und klappt vielleicht nicht.

[mandrake]

Hatte diesen Post aus dem Blickfeld verloren. Mit nachfolgendem Beispiel Template "iso_gallery_elevatezoom.html5" funktioniert bei mir alles wie gewünscht:

<?php if ($this->type == 'gallery'): ?>
   <figure data-type="gallery" data-uid="g<?php echo $this->uid; ?>" class="image_container<?php if ($this->class) echo ' '.$this->class; ?>">
      <a title="<?php echo $this->title; ?>" href="<?php echo $this->link; ?>"<?php if($this->zoom): ?> data-zoom-image="<?php echo $this->zoom['zoom']; ?>" onclick="return Isotope.elevateZoom(this, 'g<?php echo $this->uid; ?>');"<?php endif; ?>>
         <img src="<?php echo $this->src; ?>" itemprop="image" alt="<?php echo $this->alt; ?>" <?php echo $this->size; ?><?php if ($this->class) echo ' class="'.$this->class.'"'; ?>>
      </a>
   </figure>
<?php else: ?>
   <figure class="image_container"><img id="g<?php echo $this->uid; ?>" src="<?php echo $this->src; ?>"<?php if($this->zoom): ?> data-zoom-image="<?php echo $this->zoom['zoom']; ?>"<?php endif; ?> itemprop="image" alt="<?php echo $this->alt; ?>"></figure>

   <?php if ($this->zoom): ?>
      <script>
         (function($) {
            "use strict";

            $(document).ready(function() {
               var g<?php echo $this->uid; ?>_options = {
                  zoomEnabled: true,
                  <?php if ($this->zoom_windowSize[0]): ?>
                  zoomresponsive: 'True',
                  zoomType: 'inner',
                  cursor: 'crosshair',
                  // Original Isotope Konfiguration
                  zoomWindowWidth: <?php echo $this->zoom_windowSize[0]; endif; if ($this->zoom_windowSize[1]): ?>,
                  zoomWindowHeight: <?php echo $this->zoom_windowSize[1]; endif; if ($this->zoom_position[0]): ?>,
                  zoomWindowOffetx: <?php echo $this->zoom_position[0]; endif; if ($this->zoom_position[1]): ?>,
                  zoomWindowOffety: <?php echo $this->zoom_position[1]; endif; if ($this->zoom_position[2]): ?>,
                  zoomWindowPosition: <?php echo substr($this->zoom_position[2], 3); endif; if ($this->zoom_windowFade[0]): ?>,
                  zoomWindowFadeIn: <?php echo $this->zoom_windowFade[0]; endif; if ($this->zoom_windowFade[1]): ?>,
                  zoomWindowFadeOut: <?php echo $this->zoom_windowFade[1]; endif; if ($this->zoom_border[0]): ?>,
                  borderColour: '#<?php echo $this->zoom_border[0]; ?>'<?php endif; if ($this->zoom_border[1]): ?>,
                  borderSize: <?php echo $this->zoom_border[1]; ?>
                  <?php endif; ?>
               };

               $('#g<?php echo $this->uid; ?>').elevateZoom(g<?php echo $this->uid; ?>_options);
               $(window).on('resize', function(){
                  $('div.zoomContainer').remove();
                  $('#g<?php echo $this->uid; ?>').elevateZoom(g<?php echo $this->uid; ?>_options);
               });

            });
         })(jQuery);
      </script>
   <?php endif; ?>

<?php endif; ?>

[Michi Löffler]

Hallo Mandrake
Ich bin auch auf der Suche nach einer solchen Zoom Funktion bei Isotope....
Wie hasst Du dein Template zusammen mit "Elevatezoom" auf Contao installiert ? Wo hast Du den Inhalt und die Scripte entsprechend auf Contao abgespeichert ? Bei mir kommt dies irgendwie nicht zum Laufen und auch andere Erweiterungen gibt es scheinbar immer noch nicht.

Vielen Dank und Grüsse
Michi