diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/css/frontend.css | 9 | ||||
| -rw-r--r-- | views/produkttemplates/standard2.phtml | 51 |
2 files changed, 37 insertions, 23 deletions
diff --git a/views/css/frontend.css b/views/css/frontend.css index e5c48d1..9d91e06 100644 --- a/views/css/frontend.css +++ b/views/css/frontend.css @@ -535,3 +535,12 @@ input.wpsg_error { border-color:red !important; } #TB_caption { height: 50px !important; }
#TB_secondLine { font-size: 14px !important; }
+.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul { width:490px; padding:0; margin:0; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
+.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li { list-style:none; padding:0; margin:0; width:100px; height:100px; margin-bottom:30px; }
+.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li > div { width:100%; height:100%; cursor:pointer; }
+.wpsg_produkt_wrapper2 .wpsg_gallery_wrap ul li > div > img { width:100%; height:100%; object-fit:cover; object-position:center center; }
+.wpsg_produkt_wrapper2 .wpsg_produkt_produktbilder img { width:230px; height:230px; object-fit:cover; object-position:50% 50%; max-width:none; }
+.wpsg_produkt_wrapper2 .wpsg_produkt_produktbilder { width:260px; max-width:260px; }
+.wpsg_produkt_wrapper2 .wpsg_productimages { margin-right:0px !important; }
+.wpsg_produkt_wrapper2 .bigimg img { margin-bottom:15px; }
+
\ No newline at end of file diff --git a/views/produkttemplates/standard2.phtml b/views/produkttemplates/standard2.phtml index b9223d2..d695eba 100644 --- a/views/produkttemplates/standard2.phtml +++ b/views/produkttemplates/standard2.phtml @@ -12,7 +12,7 @@ ?>
-<div class="wpsg_produkt_wrapper">
+<div class="wpsg_produkt_wrapper wpsg_produkt_wrapper2">
<input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" />
<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" />
@@ -50,10 +50,9 @@ <?php if (sizeof($arAttachmentIDsAll) > 0) { for ($i = 0; $i < sizeof($arAttachmentIDsAll); $i ++) { ?>
- <?php /* URL für die Lightbox */ ?>
<?php $att = wp_get_attachment_image_src($arAttachmentIDsAll[$i], array(800, 600), false); ?>
- <a <?php if ($arAttachmentIDsAll[$i] != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo $this->getProductName($this->view['data']['id']); ?>" href="<?php echo $att[0]; ?>" class="thickbox">
+ <a data-index="<?php echo $i; ?>" <?php if ($arAttachmentIDsAll[$i] != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo $this->getProductName($this->view['data']['id']); ?>" href="<?php echo $att[0]; ?>" class="thickbox bigimg">
<?php echo wp_get_attachment_image($arAttachmentIDsAll[$i], array(300, 300), false, array()); ?>
@@ -160,27 +159,18 @@ <div class="wpsg_clear"></div>
<div class="wpsg_gallery_wrap">
-
- <div class="jcarousel-wrapper sto_carousel">
-
- <?php /* Kleine Bilder vorschau unten */ ?>
- <div class="jcarousel" style="<?php echo ((sizeof($arAttachmentIDsAll) > 5)?'margin-left:25px;':''); ?>">
- <ul>
- <?php $i = 0; foreach ($arAttachmentIDsAll as $attachment_id) { ?>
- <li>
- <a data-target="<?php echo $i; ?>" href="#">
- <div class="wpsg_image_producttemplate_small">
- <div class="box_img_wrap">
- <?php echo wp_get_attachment_image($attachment_id, 'wpsg-basket-image', false, array()); ?>
- </div>
- </div>
- </a>
- </li>
- <?php $i ++; } ?>
- </ul>
- </div>
+
+ <?php /* Kleine Bilder vorschau unten */ ?>
+ <ul>
+ <?php $i = 0; foreach ($arAttachmentIDsAll as $attachment_id) { ?>
+ <li>
+ <div data-target="<?php echo $i; ?>" class="bigimgswitch">
+ <?php echo wp_get_attachment_image($attachment_id, 'wpsg-basket-image', false, array()); ?>
+ </div>
+ </li>
+ <?php $i ++; } ?>
+ </ul>
- </div>
</div>
<?php /* Lagerbestand START*/?>
@@ -451,5 +441,20 @@ </div>
</div>
+
+ <script>
+
+ jQuery('.wpsg_produkt_wrapper2 .wpsg_gallery_wrap .bigimgswitch').on('click', function() {
+
+ var jqThis = jQuery(this);
+
+ jqThis.closest('.wpsg_produkt_wrapper2').find('.bigimg').hide();
+ jqThis.closest('.wpsg_produkt_wrapper2').find('.bigimg[data-index="' + jqThis.data("target") + '"]').show();
+
+ return false;
+
+ });
+
+ </script>
</div>
\ No newline at end of file |