Проблема Как в модуль widgetkit accordion вставить модуль widgetkit gallery?

Тема в разделе "ZOO", создана пользователем Vermilion88, 23.03.2014.

  1. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Так смотри стили и то, что меняется.

    Кстати попробуй в настройках галереи задать высоту. Сейчас похоже стоит auto
     
  2. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    @OlegM категорически пробую на локальном сервере... везде где можно выставить 600...

    нашел немого в чем именно затык
    ... изначально выделенное равно 0... но если изменить это и второе выделенное, то показывает изображение...

    <div id="slideshow-57-545fc8aa1aeb7" class="wk-slideshow" style="position: relative; visibility: visible; width: 580px;">
    <div class="slides-container">
    <ul class="slides" style="width: 100%; overflow: hidden; position: relative; height: 580px;">
    <li style="top: 0px; left: 0px; position: absolute; display: none; height: 0px; width: 100px;"><img src="/chip/cache/widgetkit/gallery/57/1-6bf8aa26e2.jpg" data-src="/chip/cache/widgetkit/gallery/57/1-6bf8aa26e2.jpg" width="600" height="600" alt="1"></li>
    <li style="top: 0px; left: 0px; position: absolute; display: list-item; z-index: 2; height: 0px; width: 100px;"><img src="/chip/cache/widgetkit/gallery/57/2-7a4f58bd1b.jpg" width="600" height="600" alt="2"></li>
    <li style="top: 0px; left: 0px; position: absolute; display: none; height: 0px; width: 100px;"><img src="/chip/cache/widgetkit/gallery/57/3-e60f405b6f.JPG" data-src="/chip/cache/widgetkit/gallery/57/3-e60f405b6f.JPG" width="600" height="600" alt="3"></li>
    </ul>
    <div class="next"></div><div class="prev"></div> <div class="caption" style="display: none;"></div><ul class="captions" style="display: none;"><li></li><li></li><li></li></ul>
    </div>
    </div>

    Теперь осталось узнать как сделать так чтоб оно само выставляло то что изначально сохранено в галереи...
     
  3. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Можно вручную вписать стили в шаблон галереи или в CSS-файл с !important
     
  4. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    такого не смогу...да и что заметил что при смене стиля галлереи - иногда наоборот заместо высоты нужно править ширину...

    т.е где то height надо менять с 0 на 700, а где то wight нужно..

    и это все прописывается тут

    <?php
    /**
    * @package Widgetkit
    * @author YOOtheme http://www.yootheme.com
    * @copyright Copyright (C) YOOtheme GmbH
    * @license http://www.gnu.org/licenses/gpl.html GNU/GPL
    */

    $widget_id = $widget->id.'-'.uniqid();
    $settings = $widget->settings;
    $captions = array();
    $images = $this['gallery']->images($widget);
    $thumbs = $this['gallery']->images($widget, array('width' => $settings['thumb_width'], 'height' => $settings['thumb_height']));
    $sets = array_chunk($thumbs, $settings['items_per_set']);

    foreach (array_keys($sets) as $s) {
    $nav[] = '<li><span></span></li>';
    }

    $i = 0;
    ?>

    <?php if (count($images)) : ?>
    <div id="gallery-<?php echo $widget_id; ?>" class="wk-gallery-showcase" data-widgetkit="showcase" data-options='<?php echo json_encode($settings); ?>'>

    <div id="slideshow-<?php echo $widget_id; ?>" class="wk-slideshow">
    <div class="slides-container">
    <ul class="slides">

    <?php foreach ($images as $image) : ?>

    <?php
    $captions[] = '<li>'.(strlen($image['caption']) ? $image['caption']:"").'</li>';

    /* Prepare Image */
    $content = '<img src="'.$image['cache_url'].'" width="'.$image['width'].'" height="'.$image['height'].'" alt="'.$image['filename'].'" />';

    /* Lazy Loading */
    $content = ($i==$settings['index']) ? $content : $this['image']->prepareLazyload($content);
    ?>

    <?php if ($image['link']) : ?>
    <li><a class="" href="<?php echo $image['link'] ? $image['link'] : $image['url']; ?>"><?php echo $content; ?></a></li>
    <?php else : ?>
    <li><?php echo $content; ?></li>
    <?php endif; ?>

    <?php $i=$i+1;?>
    <?php endforeach; ?>

    </ul>
    <?php if ($settings['buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
    <div class="caption"></div><ul class="captions"><?php echo implode('', $captions);?></ul>
    </div>
    </div>

    <div id="slideset-<?php echo $widget_id;?>" class="wk-slideset <?php if (!$settings['slideset_buttons']) echo 'no-buttons'; ?>">
    <div>
    <div class="sets">
    <?php foreach ($sets as $set => $items) : ?>
    <ul class="set">
    <?php foreach ($items as $thumb) : ?>

    <?php

    /* Prepare Image */
    $content = '<img src="'.$thumb['cache_url'].'" width="'.$thumb['width'].'" height="'.$thumb['height'].'" alt="'.$thumb['filename'].'" />';

    ?>

    <li><div><?php echo $content; ?></div></li>
    <?php endforeach; ?>
    </ul>
    <?php endforeach; ?>
    </div>
    <?php if ($settings['slideset_buttons']): ?><div class="next"></div><div class="prev"></div><?php endif; ?>
    </div>
    </div>

    </div>

    <?php else : ?>
    <?php echo "No images found."; ?>
    <?php endif;



    <?php
    /**
    * @package Widgetkit
    * @author YOOtheme http://www.yootheme.com
    * @copyright Copyright (C) YOOtheme GmbH
    * @license http://www.gnu.org/licenses/gpl.html GNU/GPL
    */

    $widget_id = $widget->id.'-'.uniqid();
    $settings = $widget->settings;
    $zoom = in_array($settings['effect'], array('zoom', 'polaroid')) ? 1.4 : 1;
    if (is_numeric($settings['width']) && is_numeric($settings['height'])) {
    $images = $this['gallery']->images($widget, array('width' => $settings['width'] * $zoom, 'height' => $settings['height'] * $zoom));
    }
    else { $images = $this['gallery']->images($widget); }

    $css_classes = ($settings['corners'] == 'round') ? 'round ' : '';
    $css_classes .= ($settings['effect'] == 'zoom') ? 'zoom ' : '';
    $css_classes .= ($settings['effect'] == 'polaroid') ? 'polaroid ' : '';
    $css_classes .= ($settings['margin']) ? 'margin ' : '';

    ?>

    <?php if (count($images)) : ?>
    <div class="wk-gallery wk-gallery-wall clearfix <?php echo $css_classes; ?>">

    <?php foreach ($images as $image) : ?>

    <?php

    $lightbox = '';
    $spotlight = '';
    $overlay = '';

    /* Prepare Lightbox */
    if ($settings['lightbox'] && !$image['link']) {
    $lightbox = 'data-lightbox="group:'.$widget_id.'"';

    $image['caption'] = strip_tags($image['caption']);
    if ($settings['lightbox_caption']) {
    $lightbox .= (strlen($image['caption'])) ? ' title="'.$image['caption'].'"' : ' title="'.$image['filename'].'"';
    }
    }

    /* Prepare Spotlight */
    if ($settings['effect'] == 'spotlight') {
    if ($settings['spotlight_effect'] && strlen($image['caption'])) {
    $spotlight = 'data-spotlight="effect:'.$settings['spotlight_effect'].'"';
    $overlay = '<div class="overlay">'.$image['caption'].'</div>';
    } elseif (!$settings['spotlight_effect']) {
    $spotlight = 'data-spotlight="on"';
    }
    }

    /* Prepare Polaroid */
    if ($settings['effect'] == 'polaroid') {
    $overlay = (strlen($image['caption'])) ? '<p class="title">'.$image['caption'].'</p>' : '<p class="title">'.$image['filename'].'</p>';
    }

    /* Prepare Image */
    if (is_numeric($settings['width']) && is_numeric($settings['height'])) {
    $content = '<img src="'.$image['cache_url'].'" width="'.$settings['width'].'" height="'.$settings['height'].'" alt="'.$image['filename'].'" />'.$overlay;
    }
    else {
    $content = '<img src="'.$image['cache_url'].'" width="'.$image['width'].'" height="'.$image['height'].'" alt="'.$image['filename'].'" />'.$overlay;
    }

    $content = ($settings['effect'] == 'polaroid') ? '<div>'.$content.'</div>' : $content ;

    ?>

    <?php if ($settings['lightbox'] || $image['link']) : ?>
    <a class="" href="<?php echo $image['link'] ? $image['link'] : $image['url']; ?>" <?php echo $lightbox; ?> <?php echo $spotlight; ?>><?php echo $content; ?></a>
    <?php elseif ($settings['effect'] == 'spotlight') : ?>
    <div <?php echo $spotlight; ?>><?php echo $content; ?></div>
    <?php elseif ($settings['effect'] == 'polaroid') : ?>
    <div><?php echo $content; ?></div>
    <?php else : ?>
    <?php echo $content; ?>
    <?php endif; ?>

    <?php endforeach; ?>

    </div>

    <?php else : ?>
    <?php echo "No images found."; ?>
    <?php endif;
    <?php
    /**
    * @package Widgetkit
    * @author YOOtheme http://www.yootheme.com
    * @copyright Copyright (C) YOOtheme GmbH
    * @license http://www.gnu.org/licenses/gpl.html GNU/GPL
    */

    $widget_id = $widget->id.'-'.uniqid();
    $settings = $widget->settings;
    $zoom = in_array($settings['effect'], array('zoom', 'polaroid')) ? 1.4 : 1;
    if (is_numeric($settings['width']) && is_numeric($settings['height'])) {
    $images = $this['gallery']->images($widget, array('width' => $settings['width'] * $zoom, 'height' => $settings['height'] * $zoom));
    }
    else { $images = $this['gallery']->images($widget); }

    $css_classes = ($settings['corners'] == 'round') ? 'round ' : '';
    $css_classes .= ($settings['effect'] == 'zoom') ? 'zoom ' : '';
    $css_classes .= ($settings['effect'] == 'polaroid') ? 'polaroid ' : '';
    $css_classes .= ($settings['margin']) ? 'margin ' : '';

    ?>

    <?php if (count($images)) : ?>
    <div class="wk-gallery wk-gallery-wall clearfix <?php echo $css_classes; ?>">

    <?php foreach ($images as $image) : ?>

    <?php

    $lightbox = '';
    $spotlight = '';
    $overlay = '';

    /* Prepare Lightbox */
    if ($settings['lightbox'] && !$image['link']) {
    $lightbox = 'data-lightbox="group:'.$widget_id.'"';

    $image['caption'] = strip_tags($image['caption']);
    if ($settings['lightbox_caption']) {
    $lightbox .= (strlen($image['caption'])) ? ' title="'.$image['caption'].'"' : ' title="'.$image['filename'].'"';
    }
    }

    /* Prepare Spotlight */
    if ($settings['effect'] == 'spotlight') {
    if ($settings['spotlight_effect'] && strlen($image['caption'])) {
    $spotlight = 'data-spotlight="effect:'.$settings['spotlight_effect'].'"';
    $overlay = '<div class="overlay">'.$image['caption'].'</div>';
    } elseif (!$settings['spotlight_effect']) {
    $spotlight = 'data-spotlight="on"';
    }
    }

    /* Prepare Polaroid */
    if ($settings['effect'] == 'polaroid') {
    $overlay = (strlen($image['caption'])) ? '<p class="title">'.$image['caption'].'</p>' : '<p class="title">'.$image['filename'].'</p>';
    }

    /* Prepare Image */
    if (is_numeric($settings['width']) && is_numeric($settings['height'])) {
    $content = '<img src="'.$image['cache_url'].'" width="'.$settings['width'].'" height="'.$settings['height'].'" alt="'.$image['filename'].'" />'.$overlay;
    }
    else {
    $content = '<img src="'.$image['cache_url'].'" width="'.$image['width'].'" height="'.$image['height'].'" alt="'.$image['filename'].'" />'.$overlay;
    }

    $content = ($settings['effect'] == 'polaroid') ? '<div>'.$content.'</div>' : $content ;

    ?>

    <?php if ($settings['lightbox'] || $image['link']) : ?>
    <a class="" href="<?php echo $image['link'] ? $image['link'] : $image['url']; ?>" <?php echo $lightbox; ?> <?php echo $spotlight; ?>><?php echo $content; ?></a>
    <?php elseif ($settings['effect'] == 'spotlight') : ?>
    <div <?php echo $spotlight; ?>><?php echo $content; ?></div>
    <?php elseif ($settings['effect'] == 'polaroid') : ?>
    <div><?php echo $content; ?></div>
    <?php else : ?>
    <?php echo $content; ?>
    <?php endif; ?>

    <?php endforeach; ?>

    </div>

    <?php else : ?>
    <?php echo "No images found."; ?>
    <?php endif;
     
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Чего не можешь?
    Заменить
    Код (PHP):
    1. <li><?php echo $content; ?></li>

    на
    Код (PHP):
    1. <li style="height: 600px;"><?php echo $content; ?></li>

    ?
     
  6. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    @OlegM вставил...визуально окно стало больше... но попрежнему пусто...

    может что с явой?

    если галерею поставить первой... то она открывается нормально... так что дело наверное в яве, раз стили показывает одиннаковыми...

    также если галарею поставить 2 или 3, то работает все только в том случае, если поставить автооткрывание при заходе на страничку...
     
    Последнее редактирование: 10.11.2014
  7. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Так я это и говорил :)
    Просто для скрытых элементов невозможно определить высоту блока (галереи).
     
  8. Offline

    olegww Недавно здесь

    Регистрация:
    25.11.2014
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    Не стал заморачиваться с явой и прочими изысками программирования, у меня решилось так.
    В созданном виджете аккордеон нужно картинки и доп виджеты заключать в таблицы с указанием высоты и ширины, последнее скорее всего не обязательно.
    например так.

    html код аккордеона с виджетом галлерея внутри

    Код (html):
    1. <table style="height: 600px;" width="950"> // размеры такие же как катринки
    2. <tbody>
    3. <tr>
    4. <td><img class="align-center" src="images/картинка" width="950" height="650" alt="1" /></td>
    5. </tr>
    6. </tbody>
    7. </table>
    8. <h2 class="remove-margin-t"><b>Текст заголовка</b></h2>
    9. <table style="height: 250px;" width="150"> // указываем высоту и ширину таблицы такую какая установлена в параметрах виджета c id 25 и пишем его в ячейку
    10. <tbody>
    11. <tr>
    12. <td>[widgetkit id=25]</td>
    13. </tr>
    14. </tbody>
    15. </table>
     
    Последнее редактирование: 25.11.2014
  9. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    у меня схожая проблема. только я пытаюсь в widgetkit аккордеоне разместить widgetkit аккордеон) не подскажите что и где нужно прописать чтобы они могли работать оба одновременно? и вообще почему аккордион не работает если прятать его за обычным спойлером? вот страница где я это пытаюсь реализовать http://presidentmodels.ru/site5/tseny
     
  10. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    По-моему, все ответы есть в этой теме - проблема в JS.
     
  11. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    разве то что я просто прячу html кодом аккордион может влиять на правильное отображение?
     
  12. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Конечно!
    Попробуй повесить на чекбокс спойлера вызов инициализации виджетов (если я правильно понимаю код :))
    Код (javascript):
    1. $widgetkit.lazyload();
     
  13. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    а поподробнее?)
     
  14. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Вставь в JS спойлера этот код, чтобы срабатывал после клика на чекбокс.
     
  15. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    извини, не очень понял

    <div class="spoiler">

    <input type="checkbox" >
    <div class="box">

    <table style="width:500px; height:500px;"> <tr><td> [widgetkit id=61]</tr></table>

    </div>

    </div>

    каким образом?)
     
  16. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    а я откуда знаю, как у тебя спойлер сделан? Кто разработчик сайта то?
     
  17. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    я, код спойлера просто взял чтобы потестить) там нет js. через любой спойлер аккордеон не работает
     
  18. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Точно, на CSS сделано...

    Тогда добавь в JS шаблона код типа
    Код (javascript):
    1. $(".spoiler input[type=checkbox]").click(function() {
    2.      $widgetkit.lazyload();
    3. });
     
  19. Hexttr87
    Offline

    Hexttr87 Недавно здесь

    Регистрация:
    16.12.2014
    Сообщения:
    7
    Симпатии:
    0
    Пол:
    Мужской
    Олег, что значит в js шаблона?
     
  20. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    в templates/шаблон/js/template.js после
    Код (javascript):
    1. $(document).ready(function(){
     

Поделиться этой страницей

Загрузка...