Question

Загрузил 20 картинок , но не понимаю как их вывести все, если и получится то сайт я так понимаю ростянется от множества картинок, как тогда поместить их в ссылку, чтобы они пролистивались как альбом вот пример при нажатии Читать.

https://naruto-base.su/news/manga_boruto_20_glava/2018-01-22-3337

Answer 1

есть код $IMGS_ARRAY_JS$

<?if($IMGS_ARRAY_JS$)?>
$IMGS_ARRAY_JS$
<div id="img$ID$"></div>
<script type="text/javascript">   
   var html='';   
   for(i in allEntImgs$ID$) {   
   var aImg=allEntImgs$ID$[i];   
   html+=(aImg[3] && aImg[3].length>0 ? ' <a  href="'+aImg[0]+'" target="_blank"><img width="250" src="'+aImg[3]+'" border="0"/></a><br><br>' : ' <img src="'+aImg[0]+'" border="0"/>');   
   }   
   document.getElementById('img$ID$').innerHTML=html;
</script>
<?endif?>

Comments

Картинки появились, но вот они растянули сайт можно как-то сделать чтобы была сылкой и открывались с переключением одна на другую\

---

Дмитрий Мягков,

В шаблоне страницы комментариев перед тегом </body> вставьте скрипт:

<script type="text/javascript">
$("#img140").each(function() {
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
});
</script>

это поможет в переключении фото.

---

Yuri_Geruk,

ВО он теперь переключает, но как мне срыть все эти картинки , чтоьбы сайт не растягивали, ну сделать ссылкой Читать онлайн

---

Дмитрий Мягков,

Скрыть это не выход, можно в стили дописать что-то подобное:

[id="img140"] img {
    float: left;
    max-width: 32%;
    max-height: 200px;
    display: block;
    padding: 2px;
}
[id="img140"] br {display:none;}
.viewn_mess2 {display: inline-grid;}

в итоге будет все в уменьшенном виде и удобочитаемо и визуально нормально.

---

Yuri_Geruk,

Воооооо отлично!! Сппасибо большое!! Но только теперь на главной кривой стал блок 

---

Дмитрий Мягков,

Установите те стили не перед @import url(/css/other.css); а после и будет все хорошо.

Answer 2

Внутри материала между текста или где нужно выводить фото ставим коды $IMAGE1$ и тому подобные, напротив каждого фото вы видите коды вида $IMAGEn$ где вместо n номер фото копируем и вставляем между текста материала.