Question

На фотоальбом (http://judo-sambotest.ucoz.net/photo/2)  и страницы материала (http://judo-sambotest.ucoz.net/news/zabastovka_vo_francuzskom_dzjudo_chto_ehto_bylo/2017-11-02-1#lg=1&slide=0) прикреплена  Lightgallery и  всё прекрасно показывает. Как вывести изображение на форуме через ту же Lightgallery.

Видел подобные скрипты, но ничего в них не понимаю.

Вот этот для галереи Highslide

<script type="text/javascript"> 
$(document).ready(function(){ 
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']").addClass('highslide').removeAttr('target').click(function(){ 
    return hs.expand(this); 
}); 
}); 
</script>

А этот для iLoad

<script type="text/javascript" src="http://likbezz.ru/_source/_js/iload/iLoad.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']").click(function(){ 
   L([this.href],this.title);return false; 
}); 
}); 
</script>

Пример изображения на форуме http://judo-sambotest.ucoz.net/forum/2-8-1#22

Answer 1

Покажите разметку на странице новостей для этой галереи Lightgallery.

Comments

<!-- основная колонка -->
 <div class="main-column">
 
 <div class="lightgallery">
 <?if($IMG_URL1$)?>
 <div class="article-img relative" style="background: url($IMG_URL1$) 50% 50% no-repeat; background-size: cover;">
 <a href="$IMG_URL1$" class="absolute lightgallery-link" <?if($ENTRY_NAME$)?>data-sub-html="$ENTRY_NAME$"<?endif?>></a>
 </div>
 <?endif?>
 $GLOBAL_ARTGALLERY$
 </div>
 <div class="cant2">
 <div class="element-info relative backwhite" style="padding-right: 60px;">
 <span class="e-reads">$MODER_PANEL$ &nbsp;&nbsp;</span>
 <span class="e-date">
 
 <!-- Используем тип "BlogPosting" -->
 <span itemscope itemtype="http://schema.org/NewsArticle" >
 
 <!-- Ссылка на статью -->
 <link itemprop="mainEntityOfPage" itemscope href="$ENTRY_URL$" /> 
 
 <!-- Данные о сайте: лого, телефон, адрес, название -->
 <span itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
 <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
 <img alt="Лого www.judo-sambo.com" itemprop="image url" src="/images/logo-top-mini.png" style="display: none;"/>
 <meta itemprop="width" content="70">
 <meta itemprop="height" content="70">
 </span>
 <meta itemprop="telephone" content="-">
 <meta itemprop="address" content="Россия">
 <meta itemprop="name" content="www.judo-sambo.com">
 </span>
 
 <!-- Дата публикации статьи -->
 <meta itemprop="datePublished" content="2016-01-24">Добавлено: $DATE$ / $TIME$&nbsp;&nbsp;<span>|</span></>

 <!-- Дата последнего изменения статьи -->
<meta itemprop="dateModified" content="2016-01-24">

 <!-- Автор статьи -->
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Автор: <a href="$PROFILE_URL$">$USERNAME$ </a>&nbsp;&nbsp;|</span></span> 
 
 <!-- Категория статьи -->
 <?if($CAT_NAME$)?><span class="e-category"><span itemprop="articleSection">Категория: <a href="$CAT_URL$">$CAT_NAME$ </a>&nbsp;&nbsp;|</span></span> <?endif?> 

<span class="e-reads">Просмотров: $READS$ &nbsp;&nbsp;|</span>
<span class="e-comments">Комментариев: $COM_NUM_ENTRIES$ $COM_PAGE_SELECTOR$</span> 
 
 <div class="push30 backwhite"></div>
 
 <!-- Тело статьи -->
 <span itemprop="articleBody">
 
 <!-- Заголовок статьи -->
 <h2 itemprop=" headline " style="display: none;">$ENTRY_TITLE$</h2>
 
 <!-- Главное изображение статьи -->
 <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject" style="display: none;">
 <img itemprop="image url" alt="$ENTRY_TITLE$" width="500" height="280" src="$IMG_URL1$"/>
 <meta itemprop="width" content="500">
 <meta itemprop="height" content="280">
 </span>
 
 <p style="display: none;">$BRIEF$</p>
 </span>
 <div class="content backwhite">
 $MESSAGE$
 
 </div> 
 <div class="push30"></div>
 
<?if($TAGS$)?>
 <div class="push1"></div>
 <hr />
 <div class="tag-cloud">
 <p>Теги материала:</p>
 $TAGS$
 </div>
 <hr />
 <?endif?>

 <?if($COM_IS_ACTIVE$)?>
 <?if($COM_CAN_READ$)?>
 <div class="push15"></div>
 <div class="title-h3">Комментарии ($COM_NUM_ENTRIES$)</div>
 $COM_BODY$
 <div class="push15"></div>
 <?endif?>
 
 <?if($COM_CAN_ADD$)?>
 $COM_ADD_FORM$
 <?else?>
 <?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg">Добавлять комментарии могут только зарегистрированные пользователи.
 <br><a rel="nofollow" href="$REGISTER_LINK$">Регистрация</a> | <a rel="nofollow" href="$LOGIN_LINK$">Вход</a></div><?endif?>
 
 <?endif?>
 <div class="push30"></div>
 <?endif?>
 </div>
 <!-- /. основная колонка -->

---

В  $GLOBAL_ARTGALLERY$ та же разметка 

<div class="lightgallery">
 <?if($IMG_URL1$)?>
 <div class="article-img relative" style="background: url($IMG_URL1$) 50% 50% no-repeat; background-size: cover;">
 <a href="$IMG_URL1$" class="absolute lightgallery-link" <?if($ENTRY_NAME$)?>data-sub-html="$ENTRY_NAME$"<?endif?>></a>
 </div>
 <?endif?>

но для 2,3,4 и т.д. изображений

---

В общий вид страниц форума после $BODY$ , пишем это

<script>
     $(function() {$('[title*="Нажмите"]').removeAttr('class').removeAttr('target').wrap('<div id="lightgallery"></div>');});
</script>
<script type="text/javascript">
     lightGallery(document.getElementById('lightgallery'));
</script>

Также в <head> </head> должны быть подключены скрипты галереи и файл CSS

---

После добавления скрипта изображение на форуме выводится так

<!--IMG1-->
  <div id="lightgallery">
  <a href="/_fr/0/4833671.jpg" title="Нажмите для просмотра в полном размере...">
  <img style="margin:0;padding:0;border:0;" src="/_fr/0/s4833671.jpg" align=""></a></div>
  <!--IMG1-->

 В новостях так

<div class="article-img relative" style="background: url(/_nw/0/37804160.jpg) 50% 50% no-repeat; background-size: cover;">
 <a href="/_nw/0/37804160.jpg" class="absolute lightgallery-link" data-sub-html="Следователи в Новгородской области начали проверку инцидента на детском турнире по дзюдо в Боровичах"></a>
 </div>

На фото так

<div class="element relative"> 

  <img src="//judo-sambotest.ucoz.net/_ph/1/732980487.jpg" class="img-responsive" alt="Varya_1"> 

<a href="//judo-sambotest.ucoz.net/_ph/1/732980487.jpg" class="lightgallery-link absolute" data-sub-html="Varya_1"></a>

</div>

И получается несколько одинаковых id на странице

 

---

Да, про айди упустил момент, не сильно вдавался в документацию, но попробуйте так

<script>
     $(function() {$('[title*="Нажмите"]').removeAttr('class').removeAttr('target').wrap('<div class="lightgallery"></div>');});
</script>
<script type="text/javascript">
     lightGallery(document.getElementsByClassName('lightgallery'));

</script>

---

Sentimo,

Теперь выводится так и не работает  <div class="lightgallery">  <a href="/_fr/0/4833671.jpg" title="Нажмите для просмотра в полном размере...">  <img style="margin:0;padding:0;border:0;" src="/_fr/0/s4833671.jpg" align=""></a>  </div>  Как я понимаю по аналогии с фото и новостями  надо дополнительно прописывать классы и атрибуты для   <a href="/_fr/0/4833671.jpg" title="Нажмите для просмотра в полном размере..."> и  <img style="margin:0;padding:0;border:0;" src="/_fr/0/s4833671.jpg" align="">

---

Вячеслав Кодин,

Не обязательно, http://sachinchoolur.github.io/lightGallery/docs/ почитайте... На выходных если будет время адаптируя для форума юкоз, а так обратитесь к фрилансерам

---

Sentimo,

Методом научного тыка разобрался. Всё работает. Спасибо за подсказки.