Перейти к содержимому


Фотография
- - - - -

Popup галерея

jbzoo image jbzoo gallery

Лучший Ответ Cheren-dow , 25 May 2014 - 20:52

Apoca1ypto, сделайте следующее. Откройте шаблон элемента галереи

  1. сайт\media\zoo\applications\jbuniversal\elements\jbgallery\tmpl\jbgallery.php 

И замените все содержимое на

  1. <?php
  2. /**
  3. * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
  4. *
  5. * @package jbzoo
  6. * @version 2.x Pro
  7. * @author JBZoo App http://jbzoo.com
  8. * @copyright Copyright (C) JBZoo.com, All rights reserved.
  9. * @license http://jbzoo.com/license-pro.php JBZoo Licence
  10. * @coder Denis Smetannikov <denis@jbzoo.com>
  11. */
  12.  
  13. // no direct access
  14. defined('_JEXEC') or die('Restricted access');
  15.  
  16. $this->app->jbassets->fancybox();
  17. $i = 0;
  18. ?>
  19.  
  20. <div id="<?php echo $galleryId; ?>">
  21.  
  22. <?php foreach ($thumbs as $thumb) { ?>
  23.  
  24. <a href="<?php echo $thumb['img']; ?>"
  25. rel="<?php echo $rel; ?>"
  26. title="<?php echo $thumb['name']; ?>"
  27. class="jbgallery <?php echo ($i == 0) ? ' first' : ''; ?>"><img src="<?php echo $thumb['thumb']; ?>"
  28. alt="<?php echo $thumb['name']; ?>"
  29. title="<?php echo $thumb['name']; ?>"
  30. width="<?php echo $thumb['thumb_width']; ?>"
  31. height="<?php echo $thumb['thumb_height']; ?>"
  32. /></a>
  33.  
  34. <?php $i++; } ?>
  35.  
  36. <div class="clear clr"></div>
  37. </div>
  38.  
  39. <script type="text/javascript">
  40. jQuery(function ($) {
  41. $('#<?php echo $galleryId; ?> .jbgallery').fancybox({
  42. helpers: {
  43. "title" : { type: "outside" },
  44. "buttons": { position: "top" },
  45. "thumbs" : { width: 80, height: 80 },
  46. "overlay": { locked: false}
  47. }
  48. });
  49. });
  50. </script>
  51.  

Теперь для перво изображения будет добавляться класс first

65u_200x0.jpg

 

Через CSS скрываем все изображения

  1. .jbzoo-app-portfolio .items .jbzoo-item-teaser .jbgallery{
  2. display: none;
  3. }

А первое показываем

  1. .jbzoo-app-portfolio .items .jbzoo-item-teaser .jbgallery.first {
  2. display: inline;
  3. }

Должно работать, не проверял

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 6

#1 Apoca1ypto

Apoca1ypto

Отправлено 25 May 2014 - 19:25

Добрый вечер!

 

Подскажите как можно сделать с помощью JBZoo Image или JBZoo Gallery следующее.

Нужна popup галерея, но на странице должно отображаться лишь одно изображение (первое), если по нему кликнуть то уже открывается popup галерея, где можно пролистать все остальные изображения. JBZoo Image и JBZoo Gallery позволяют сделать popup галерею, но для этого они отображают все миниатюры на странице, а нужна только одна.

 

Спасибо!


  • 0

Во время спора в Интернете Ваш оппонент приводит неопровержимые доказательства своей точки зрения? Не отчаивайтесь. До...тесь до орфографии.


#2 Cheren-dow

Cheren-dow

Отправлено 25 May 2014 - 19:54

Apoca1ypto, доброго времени суток. Скройте через CSS все не нужные изображения и выводите только одно


  • 0
Изображение
 

#3 Apoca1ypto

Apoca1ypto

Отправлено 25 May 2014 - 19:57

Cheren-dow сказал(а) 25 Май 2014 - 18:54:

Apoca1ypto, доброго времени суток. Скройте через CSS все не нужные изображения и выводите только одно

Если не сложно, подскажите, к чему привязать стили.
Сейчас решил сделать через JBZoo Gallery, указав точный размер картинки в div и добавив атрибут overflow: hidden.
  • 0

Во время спора в Интернете Ваш оппонент приводит неопровержимые доказательства своей точки зрения? Не отчаивайтесь. До...тесь до орфографии.


#4 Cheren-dow

Cheren-dow

Отправлено 25 May 2014 - 20:02

Что бы подсказать что то по CSS нужна ссылка на сайт. Можете ее выложить?


  • 0
Изображение
 

#5 Apoca1ypto

Apoca1ypto

Отправлено 25 May 2014 - 20:10

Отправил в ЛС.
  • 0

Во время спора в Интернете Ваш оппонент приводит неопровержимые доказательства своей точки зрения? Не отчаивайтесь. До...тесь до орфографии.


#6 Cheren-dow

Cheren-dow

Отправлено 25 May 2014 - 20:52   Лучший Ответ

Apoca1ypto, сделайте следующее. Откройте шаблон элемента галереи

  1. сайт\media\zoo\applications\jbuniversal\elements\jbgallery\tmpl\jbgallery.php 

И замените все содержимое на

  1. <?php
  2. /**
  3. * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
  4. *
  5. * @package jbzoo
  6. * @version 2.x Pro
  7. * @author JBZoo App http://jbzoo.com
  8. * @copyright Copyright (C) JBZoo.com, All rights reserved.
  9. * @license http://jbzoo.com/license-pro.php JBZoo Licence
  10. * @coder Denis Smetannikov <denis@jbzoo.com>
  11. */
  12.  
  13. // no direct access
  14. defined('_JEXEC') or die('Restricted access');
  15.  
  16. $this->app->jbassets->fancybox();
  17. $i = 0;
  18. ?>
  19.  
  20. <div id="<?php echo $galleryId; ?>">
  21.  
  22. <?php foreach ($thumbs as $thumb) { ?>
  23.  
  24. <a href="<?php echo $thumb['img']; ?>"
  25. rel="<?php echo $rel; ?>"
  26. title="<?php echo $thumb['name']; ?>"
  27. class="jbgallery <?php echo ($i == 0) ? ' first' : ''; ?>"><img src="<?php echo $thumb['thumb']; ?>"
  28. alt="<?php echo $thumb['name']; ?>"
  29. title="<?php echo $thumb['name']; ?>"
  30. width="<?php echo $thumb['thumb_width']; ?>"
  31. height="<?php echo $thumb['thumb_height']; ?>"
  32. /></a>
  33.  
  34. <?php $i++; } ?>
  35.  
  36. <div class="clear clr"></div>
  37. </div>
  38.  
  39. <script type="text/javascript">
  40. jQuery(function ($) {
  41. $('#<?php echo $galleryId; ?> .jbgallery').fancybox({
  42. helpers: {
  43. "title" : { type: "outside" },
  44. "buttons": { position: "top" },
  45. "thumbs" : { width: 80, height: 80 },
  46. "overlay": { locked: false}
  47. }
  48. });
  49. });
  50. </script>
  51.  

Теперь для перво изображения будет добавляться класс first

65u_200x0.jpg

 

Через CSS скрываем все изображения

  1. .jbzoo-app-portfolio .items .jbzoo-item-teaser .jbgallery{
  2. display: none;
  3. }

А первое показываем

  1. .jbzoo-app-portfolio .items .jbzoo-item-teaser .jbgallery.first {
  2. display: inline;
  3. }

Должно работать, не проверял


  • 1
Изображение
 

#7 Apoca1ypto

Apoca1ypto

Отправлено 25 May 2014 - 21:53

Все работает, спасибо!

Думаю эту опцию стоит добавить в стандартные настроки элемента.


  • 1

Во время спора в Интернете Ваш оппонент приводит неопровержимые доказательства своей точки зрения? Не отчаивайтесь. До...тесь до орфографии.






Темы с аналогичным тегами jbzoo image, jbzoo gallery

Click to return to top of page in style!