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

+46
2.22K
Данное решение позволяет вставлять любое количество изображений в:

— текст статьи, новости;
— описание позиции универсального каталога;
— самостоятельно созданный модуль.

При клике на картинку она увеличивается (используется стандартный lightbox).

Нужные изображения должны быть предварительно загружены в стандартную галерею в имеющиеся или новые альбомы.

Вставка в текст происходит путём копирования кода наименования фото (например, {ФОТО=Красивый цветок}) в любое место в тексте или таблице. Превьюшки изображений вместе с кодом подгружаются в админку.

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

1. Вот этот код:
  1. {tab=Вставка фото} <!-- В файлах admin/applets/content.php и admin/applets/modules.php эту строку удалить !!!-->
  2.  
  3. <div style="margin-top:25px"><strong>Дополнительное фото</strong></div>
  4. <div style="border:1px solid #999;max-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. <script type="text/javascript">
  39. // Made by Aleko (http://studioad.ru)
  40. plus=""; // Путь к иконке плюс
  41. minus=""; // Путь к иконке минус
  42. 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"}}}};
  43. </script>
нужно прописать в файле admin/components/catalog/backend.php перед кодом:
  1. {/tabs}
2. Этот-же код, но без верхней строчки {tab=Вставка фото} нужно прописать в файле admin/applets/content.php после кода:
  1. <div style="margin-top:12px"><strong>Фотография</strong></div>
  2. <div style="margin-bottom:10px">
  3. <?php
  4. if ($do=='edit'){
  5. if (file_exists($_SERVER['DOCUMENT_ROOT'].'/images/photos/small/article'.$mod['id'].'.jpg')){
  6. ?>
  7. <div style="margin-top:3px;margin-bottom:3px;padding:10px;border:solid 1px gray;text-align:center">
  8. <img src="/images/photos/small/article<?php echo $id; ?>.jpg" />
  9. </div>
  10. <table cellpadding="0" cellspacing="0" >
  11. <tr>
  12. <td width="16"><input type="checkbox" id="delete_image" name="delete_image" value="1" /></td>
  13. <td><label for="delete_image">Удалить фотографию</label></td>
  14. </tr>
  15. </table>
  16. <?php
  17. }
  18. }
  19. ?>
  20. <input type="file" name="picture" style="width:100%" />
  21. </div>
3. Опять этот-же код, но тоже без верхней строчки {tab=Вставка фото} нужно прописать в файле admin/applets/modules.php после кода:
  1. <table width="100%" cellpadding="0" cellspacing="0" class="checklist">
  2. <tr>
  3. <td width="20"><input type="checkbox" name="is_strict_bind" id="is_strict_bind" value="1" <?php if ($mod['is_strict_bind']) { echo 'checked="checked"'; } ?>/></td>
  4. <td><label for="is_strict_bind"><strong>Не показывать на вложенных страницах</strong></label></td>
  5. </tr>
  6. </table>
4. В файле 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;}
5. В файл 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. }
6. В файле 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.  
7. В файле templates/Ваш шаблон/template.php в любом месте между тегами <head></head> вставляете:
  1. <script language="JavaScript" type="text/javascript" src="/includes/jquery/lightbox/js/jquery.lightbox.js"></script>
  2. <link href="/includes/jquery/lightbox/css/jquery.lightbox.css" rel="stylesheet" type="text/css" />
8. Желательно из файла components/catalog/frontend.php удалить в двух местах этот код:
  1. $inPage->addHeadJS('includes/jquery/lightbox/js/jquery.lightbox.js');
  2. $inPage->addHeadCSS('includes/jquery/lightbox/css/jquery.lightbox.css');
Это всё.

!!! В админке фильтр "Автозамена / Фильтр ссылок" должен быть включен.

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

ВАЖНО: При загрузке изображений не должно быть картинок с одинаковыми наименованиями.
+2
abasia abasia 10 лет назад #
Спасибо большое, очень полезное решение.
+1
Олег Васильевич я Олег Васильевич я 10 лет назад #
Прсисоединяюсь: очень полезное решение!!!
Ещё б навигацию по этим фото (предыдущая - следующая)...
Спасибо!
0
lezginka.ru lezginka.ru 10 лет назад #
+
полностью согласен с предыдущими ораторами
0
VopisUVD VopisUVD 10 лет назад #
Вот довести бы это решение до ума...
Чтоб не хаком числилось, а еще какую нибудь простенькую листалку привязать...
Цены бы не было!
0
BlondinkO BlondinkO 9 лет назад #
Спасибо =)
Листалку, случаем, никто не привязал? Очень нужно...
0
BlondinkO BlondinkO 9 лет назад #
Можно ли сделать, чтобы было обтекание текстом? Сейчас текст идет только выше-ниже картинки, не очень удобно.
0
bondar bondar 9 лет назад #
как это
0
BlondinkO BlondinkO 9 лет назад #
Это когда картинка слева, например, а текст от нее справа и внизу.
0
BlondinkO BlondinkO 9 лет назад #
То есть, вот так:


На данный момент идет сначала картинка, а ниже - текст, при оформлении материалов режет глаз.
0
letsgo letsgo 9 лет назад #
Справа, от картинки, вставьте пару баннеров Адсенса и будет хорошо выглядеть.
0
BlondinkO BlondinkO 9 лет назад #
Мне надо для сайта компании, там баннеры адсенса не совсем уместны smile Но за идею спасибо =)
0
letsgo letsgo 9 лет назад #
Вставьте свое что то, если компания :)
0
BlondinkO BlondinkO 9 лет назад #
Нашла уже другое решение, спасибо =)
0
bondar bondar 9 лет назад #
Текст на картинке??
0
Владимир Савенко ✝️ Владимир Савенко ✝️ 9 лет назад #
Отличное решение. Поставил - все работает. Обнаружил, что на шаблоне octopus где используется jquery-1.7.2 пришлось вернуть jquery дефолтный. Это не укор автору - это просто помощь тем, кто захочет данное решение реализовать на шаблоне octopus. Ну и поддерживаю вышесказанное, была бы навигация при просмотре картинок, было бы вообще ЗАМЕЧАТЕЛЬНО!
0
darum63 darum63 9 лет назад #
навигация работает на Highslide
0
Def Def 9 лет назад #
а для 1.10 работает?
0
darum63 darum63 9 лет назад #
для 1.9 почему то не работает!
0
darum63 darum63 9 лет назад #
Все заработало!!!А картинки по горизонтали выстроить можно??? вставляю вроде чтобы рядом были, а выстраиваются только вниз!
0
Yermi Yermi 9 лет назад #
подскажите плиз...у меня вместо картинкок надписи. Где натупил?(
0
Mikhail Mikhail 8 лет назад #
Добрый день!
Все изменения внес, но картинки не отображаются. Подскажите в чем, может быть проблема?
0
Димитриус Димитриус 8 лет назад #
проблема может быть в версии. Обратите внимание на дату поста...
0
Юрий Юрий 8 лет назад #
Поставил на 1.9, шаблона Ja sargas - работает !

Еще от автора

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