Вставка картинок из галереи в каталог с увеличением по клику

+20
2.2K
Моему заказчику потребовалось вставлять дополнительные картинки в каталог оборудования, в описание позиций, и чтобы при клике на картинку она увеличивалась.
Возиться с загрузкой картинок по FTP он не захотел.

В итоге смастерил конструкцию, позволяющую вставлять фото (предварительно загруженные в стандартную галерею) в любое место позиции каталога (в визуальном редакторе) путём копирования наименования фото из предлагаемого списка.

Иллюстрация

Для увеличения изображения используется стандартный lightbox.

Чтобы не "потеряться" среди обилия альбомов, используется древовидный раскрывающийся список.

Иллюстрация


Решение колченогое, но рабочее, на другое не было времени.

Последовательность действий:

1. В файле admin/components/catalog/backend.php:

Перед кодом:
  1. {/tabs}
Вставляем:
  1. {tab=Вставка фото}
  2.  
  3. Выберите альбом:
  4. <div style="border:1px solid #999;height:500px;overflow:scroll;">
  5. <ul id="dropMenu">
  6. <?
  7.  
  8. $sqlw = "SELECT * FROM cms_photo_albums";
  9.  
  10. $resultw = $inDB->query($sqlw);
  11.  
  12. while($itemw = $inDB->fetch_assoc($resultw)){
  13. $xxx = $itemw['id'];
  14. $sqlwx = "SELECT * FROM cms_photo_files WHERE album_id='$xxx'";
  15. $resultwx = $inDB->query($sqlwx);
  16. if ($inDB->num_rows($resultwx)){
  17. echo '<li class="menuCat"><span>';
  18. echo 'Фотоальбом: '.$itemw['title'].'</span>';
  19. echo '<ul>';
  20.  
  21. while($itemwx = $inDB->fetch_assoc($resultwx)){
  22.  
  23. echo '<li><span>';
  24. echo '<img src="/images/photos/small/'.$itemwx['file'].'" alt="" >';
  25. $new = $itemwx['title'];
  26. echo '<div class="tfoto">{ФОТО='.$new.'}</div>';
  27. echo '</span></li>';
  28. }
  29.  
  30. echo '</ul></li>';
  31. }
  32. }
  33.  
  34. ?>
  35.  
  36. </ul>
  37. </div>
  38.  
  39. <script type="text/javascript">
  40. // Made by Aleko (http://studioad.ru)
  41. plus=""; // Путь к иконке плюс
  42. minus=""; // Путь к иконке минус
  43. dropMenu();function dropMenu(){var c,d,e,j,i;c=new Array();d=document.getElementsByTagName('*');e=new RegExp("(^|\\b)menuCat(\\b|$)");j=0;for(i=0;i<d.length;i++){if(e.test(d[i].className)){c[j]=d[i];j++}}for(i=0;i<c.length;i++){var f=c[i].getElementsByTagName("span")[0];f.onclick=function(){var a,b;a=this.parentNode;b=a.getElementsByTagName("ul")[0];if(b.style.display=="block"){a.style.backgroundImage="url("+plus+")";b.style.display="none"}else{a.style.backgroundImage="url("+minus+")";b.style.display="block"}}}};
  44. </script>
2. В файле admin/css/styles.css в любом месте пишем:
  1. .tfoto{width:100px;font-size:12px;float:right;padding-top:24px;padding-right:20px;}
  2. #dropMenu, #dropMenu ul {list-style:none;margin:0px;padding:0px;}
  3. .menuCat {padding-left:12px;}
  4. .menuCat span {cursor:pointer;font-weight:bold;}
  5. .menuCat ul {display:none;}
3. В файл components/catalog/frontend.php:

После кода:
  1. //PROCESS FILTERS, if neccessary
  2. if ($cat['filters']){
  3. $filters = $inCore->getFilters();
  4. if ($filters){
  5. foreach($filters as $id=>$_data){
  6. require_once $_SERVER['DOCUMENT_ROOT'].'/filters/'.$_data['link'].'/filter.php';
  7. $_data['link']($field);
  8. }
  9. }
  10. }
  11. $field = str_replace('\"', '"', $field);
Вставляем:
  1. //PROCESS FILTERS
  2. $inCore->processFilters($field);
  3.  
  4. //HIGHLIGHT USER LAST SEARCH QUERY IF NECCESSARY
  5. if (isset($_SESSION['squery'])){
  6. $regex = '/('.$_SESSION['squery'].')\s*(.*?)/i';
  7. $matches = array();
  8. preg_match_all( $regex, $field, $matches, PREG_SET_ORDER );
  9. foreach ($matches as $elm) {
  10. $field = preg_replace( $regex, '<span class="search_match">'.$_SESSION['squery'].'</span>', $field );
  11. }
  12. unset($_SESSION['squery']);
  13. }
4. В файле filters/f_replace/filter.php:

Код:
  1. $link = '<a href="/photos/photo'.$photo['id'].'.html" title="'.$photo_title.'">'.$photo_title.'</a>';
Меняем на:
  1. $link = '<div><a class="lightbox-enabled" rel="lightbox" href="/images/photos/medium/'.$photo['file'].'" target="_blank"><img src="/images/photos/small/'.$photo['file'].'" alt="'.$photo['title'].'" ></a></div>';
  2.  
5. В админке фильтр "Автозамена / Фильтр ссылок" должен быть включен.

Для добавления фото в любом месте описания позиции каталога (где используется визуальный редактор), выбираем вкладку "Вставка фото"
Иллюстрация

выбираем из списка нужный альбом, нужное фото
Иллюстрация

и копируем код {Фото=Название фото} в нужное место.
Иллюстрация

Результат:
Иллюстрация

При клике увеличивается:
Иллюстрация
Предварительно, конечно, эти фото нужно загрузить в любой альбом, или создать новый. Если не нужно, чтобы загружаемые фото показывались в фотогалерее сайта, укажите в настройках данного альбома "не публиковать".

ВАЖНО: При загрузке изображений не должно быть картинок с одинаковыми наименованиями.

Почти по аналогии (с небольшими изменениями) можно устроить вставку фото и в статьи и новости. Если кому будет интересно, распишу дополнительно.
+1
oll oll 11 лет назад #
Хорошее дополнение .Большой +
0
GNabi GNabi 11 лет назад #
Почти по аналогии (с небольшими изменениями)
Какой аналог. не нашел подобного фильтра в версии 1,8.


можно устроить вставку фото и в статьи и новости. Если кому будет интересно, распишу дополнительно.

большая просьба: увелись, пожалуйста, статью... ))

Спасибо!
+1
abasia abasia 11 лет назад #
Полезное дополнение. Про вставку фото в статьи и новости, напишите пожалуйста.
+1
maia maia 11 лет назад #
Очень нужная весчь. Спасибо! Про все остальные места для вставки тоже оч хотелось бы продожения )
0
Alexneva Alexneva 11 лет назад #
Хорошо, к утру сделаю.
0
Евгений Фоменко Евгений Фоменко 10 лет назад #
Я правильно понимаю, при изменении имени картинки она перестанет отображаться?
0
Alexneva Alexneva 10 лет назад #
Да, перестанет.

Еще от автора

Вставка картинок из галереи в каталог, статьи, модули с увеличением по клику
Данное решение позволяет вставлять любое количество изображений в: - текст статьи, новости; - описание позиции универсального каталога; - самостоятель
Закругление уголков в IE и Opera без графических элементов
Настолько привык я пользоваться Мозиллой, что с выходом версии 1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.