Главная » Функционал » Дополнительные функции » Вывод изображений с помощью $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-окне (что очень, кстати, удобно). Также присутствует возможность переключения изображений в режиме слайд-шоу (в одном и том же окне, см. скриншот).



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

Рейтинг: 25  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 11363          Комментариев: