Hatte diesen Post aus dem Blickfeld verloren. Mit nachfolgendem Beispiel Template "iso_gallery_elevatezoom.html5" funktioniert bei mir alles wie gewünscht:
HTML-Code:
<?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; ?>
Lesezeichen