Главная » Функционал » Дополнительные функции » Вывод изображений с помощью $IMGS_ARRAY_JS$

Вывод изображений с помощью $IMGS_ARRAY_JS$

24.10.2012 в 21:16
Автор: Sheriff

Речь идёт о функции просмотра изображений материала из массива JavaScript. $IMGS_ARRAY_JS$ содержит в себе массив из ссылок на все загруженные при добавлении материала изображения. Работает, кстати, практически во всех модулях uCoz.

Вот так выглядит сам массив $IMGS_ARRAY_JS$:
Code
<script type="text/javascript">
//['original_img_url','org_width','org_height','resized_img_url','res_width','res_height']
var allEntImgs9=[['http://testsite.ucoz.de/_nw/0/29520930.jpg',1024,768,'http://testsite.ucoz.de/_nw/0/s29520930.jpg',400,300],['http://testsite.ucoz.de/_nw/0/53567075.jpg',500,375,'http://testsite.ucoz.de/_nw/0/s53567075.jpg',400,300],['http://testsite.ucoz.de/_nw/0/32914602.gif',100,100,'',0,0]];
</script>


У нас есть массив с именем, которое формируется из allEntImgs + $ID$ - ID материала.

Перейдем к скрипту.
Code
<?if($IMGS_ARRAY_JS$ )?>$IMGS_ARRAY_JS$
<div id="fi4aruimg$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 ? '<br/><br/><a href="'+aImg[0]+'" target="_blank"><img src="'+aImg[3]+'" border="0" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" /></a>' : '<br/><br/><img src="'+aImg[0]+'" border="0" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" />');                           
                             }                           
                             document.getElementById('fi4aruimg$ID$').innerHTML=html;
// Доработка: Sheriff ~ http://fi4a.ru/                     
</script>
<?endif?>

Данный скрипт выводит уменьшенные размеры изображений и ссылки на оригиналы, либо оригинальные картинки без ссылок (в случае если оригиналы маленького размера). Оригиналы изображений будут открываться в новом окне, в качестве альтернативного текста картинки используется название материала, изображения выводятся на следующую строку.
Если Вы хотите, чтобы изображения открывались в всплывающее окно, то нужно заменить:
Code
<a href="'+aImg[0]+'" target="_blank"><img src="'+aImg[3]+'" border="0" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" /></a>

На:
Code
<a href="javascript://" onclick=window.open("'+aImg[0]+'","up$ID$","scrollbars=1,resizable=1,width=auto,height=auto");return false;><img src="'+aImg[3]+'" border="0" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" /></a>


width=auto,height=auto — редактируем на своё усмотрение.



В поисках альтернативы, я наткнулся на интересное решение и немного его изменил. Получилось вот что:
Code
<?if($IMGS_ARRAY_JS$)?>$IMGS_ARRAY_JS$                            
<script type="text/javascript">                       
// Автор: fflesh                        
var allEntImgs=allEntImgs$ID$;                            
function fi4a(ru) {                            
                            var bck = ru - 1;                            
                            var nxt = ru + 1;                            
                            if (bck < 0) bck = allEntImgs.length - 1;                            
                            if (nxt >= allEntImgs.length) nxt = 0;                             
                            var img = 1;
                            var imgs = '';                            
                            for (var i = 0; i < allEntImgs.length; i++) {                            
                             img = i + 1;                            
                             if (allEntImgs[i][0].length < 1) continue;                            
                             if (i == ru) imgs += '<b class="pgSwchA">' + img + '</b> ';
                             else imgs += '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="fi4a(' + i + ');return false;">' + img + '</a> ';                            
                            }                            
                            if (allEntImgs.length > 1) imgs = '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="fi4a(' + bck + ');return false;">« Назад</a> ' + imgs + '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="fi4a(' + nxt + ');return false;">Вперёд »</a> ';                            
                            var hght = parseInt(allEntImgs[ru][2]);                            
                            if ($.browser.msie) hght += 28;                            
                            _picsCont = '<div id="_prCont" style="position:relative;width:' + allEntImgs[ru][1] + 'px;height:' + hght.toString() + 'px;"><img alt="$ENTRY_TITLE$" border="0" src="' + allEntImgs[ru][0] + '" width="' + allEntImgs[ru][1] + '" height="' + allEntImgs[ru][2] + '" /><div style="padding:10px 0 2px 0;" align="center">' + imgs + '</div></div>';                            
                            new _uWnd('wnd_prev', "Изображения", 10, 10, { popup: 1, waitimages:300000, autosizewidth: 1, hideonresize: 1, autosize: 1,  fadetype: 1, align: 'center', min: 0, max: 0, resize: 1, shadow: 0 }, _picsCont);                            
}                            
$(document).ready(function() { $('td.eMessage .fi4a a:has(img)').click(function() { fi4a(0); return false; }); }); // Доработка: Sheriff ~ http://fi4a.ru/                     
</script>                            
<div id="fi4aruimg$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 ? '<br/><br/><a href="'+aImg[0]+'" onclick="fi4a('+i+');return false;"><img src="'+aImg[3]+'" border="0" alt="$ENTRY_TITLE$" title="Нажмите, для просмотра в полном размере..." style="padding:2px;"/></a>' : '<br/><br/><img src="'+aImg[0]+'" border="0" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" />');                            
                            }                            
                            document.getElementById('fi4aruimg$ID$').innerHTML=html;                            
// Доработка: Sheriff ~ http://fi4a.ru/
</script>                            
<?endif?>


Чем же отличается данный скрипт от первого?
Открытие полного изображения производится на этой же странице в ajax-окне (что очень, кстати, удобно). Также присутствует возможность переключения изображений в режиме слайд-шоу (в одном и том же окне, см. скриншот).



Скрипт вставлять необходимо на страницу материала и комментариев к нему в том месте, на котором Вы хотите видеть вывод изображений.

Рейтинг: 24  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 10991          Комментариев: 11
21.06.2013 в 00:54      0  

Я хочу поставить этот код себе на сайт, но мне нужно внести в него одно небольшое изменение, и я не знаю, как это сделать. Уважаемый автор, не могли бы вы дать подсказку?
Мне нужно загружать в каталог сайтов фотографии, которые по весу и размерам не вписываются в лимиты юкоза. Поэтому я загружаю их в файловый менеджер, затем вручную делаю превью, загружаю превью в каталог через "Изображения", а затем, по идее, мне нужно создать такую ссылку: < a href = "/ имя_папки_с_фото / 001.jpg " > < img src = "IMAGEURL1...30" > < /a >

В предложенном вами скрипте я немного поменяла html, чтобы все отображалось как мне нужно:
Код
'<a href="/имя_папки_с_фото/001.jpg" class="ulightbox"><img src="'+aImg[0]+'" border="0" alt="$CAT_NAME$" title="$CAT_NAME$"

И теперь остается последняя проблема - разумеется, раз в коде указана ссылка на 001.jpg, по клику на все превью открывается именно эта единственная картинка - 001.jpg.
Мой вопрос - можно ли в этом скрипте сделать так, чтобы во второй фотографии вместо 001.jpg было уже 002.jpg, в третьей - 003.jpg, и так до 050.jpg (максимальное количество фотографий)? То есть, чтобы менялось одно это число - к каждой новой фотографии прибавлялась единица?

Не знаю, понятно ли написала и возможно ли это, но очень прошу помощи.
16.05.2013 в 18:14      0  

Здравствуйте! К сожалению условные операторы $IMG_URLn$ выще 10 не работают sad
Вот так я вставил в шаблон
Код
<?if($IMG_URL11$)?><a href="$IMG_URL11$"><img title="$ENTRY_TITLE$" alt="$ENTRY_TITLE$" src="$IMG_SMALL_URL11$" /></a><?endif?>
С чем это могло быть связан?
17.05.2013 в 09:23      +1  

Здравствуйте, данная инструкция и предполагает ответ на Ваш вопрос, как отобразить изображения:
Цитата
$IMG_URLn$ выще 10
17.05.2013 в 13:19      0  

У меня вот так получилось http://arenda.nabran.ru/board/nabran/villi/villa/2-1-0-1

С другим скриптом адаптировал, вернее со слайдером.

Ребята, спасибо Вам огромное за создания этого скрипта, я вам при много благодарен.
04.02.2013 в 13:10      0  

А возможно ли? и если да - то как вывести изображения по отдельности или предположим с 11 по 15?
04.02.2013 в 19:07      0  

$ID$="11" – не? → http://forum.ucoz.ru/forum/24-1006-644083-16-1286659690

Используйте в шаблоне системную переменную $IMG_URLn$, либо внутри материала $IMAGEn$.

Пример условия (шаблон): 
Код
<?if($IMG_SMALL_URLn$)?><a href="$IMG_URLn$" class="ulightbox"><?endif?><?if($IMG_URLn$)?><img src="<?if($IMG_SMALL_URLn$)?>$IMG_SMALL_URLn$<?else?>$IMG_URLn$<?endif?>"><?if($IMG_SMALL_URLn$)?></a><?endif?><?endif?>

и т.д.

Полезные ссылки:
http://u.to/PmwRAg
http://u.to/Q87j


Либо задайте вопрос корректней.
04.11.2012 в 04:18      -1  

Лучше бы написали как со стандартным ulightbox использовать
04.11.2012 в 20:52      +2  

Что мешает самому написать?
22.09.2013 в 03:07      +1  

Код
<div id="images$ID$">
<?if($IMGS_ARRAY_JS$ )?>$IMGS_ARRAY_JS$  

  <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]+'" class="ulightbox" data-fancybox-group="ultbx" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="'+aImg[3]+'" border="0" /></a>' : '<img src="'+aImg[0]+'" border="0" />');  
  }  
  document.getElementById('images$ID$').innerHTML=html;  
  
  </script>  
  <?endif?>
</div>

вот, как я написал - отлично смотриться)
21.01.2015 в 14:40      0  

Здравствуйте, а как можно задать через Ваш код размер картинкам и сделать фото как-бы в таблице?
10.11.2015 в 10:15      0  

Да вот так ОТЛИЧНО !!