Пишу по просьбе человека не совсем знакомого с JS.
Он напомнил, что я обещал однажды, но соверщенно забыл. И я благодарен ему за это, так как вопрос интересный. Quote (Arei [орфография автора]) fflesh, напишите мне действительно интерестно. Так как мне хотелось такое решение представления фото не только в фотоальбоме, но ив др. модулях: "Доска объяв., новости". Напишите и проанонсируйте мне и не только мне в личку так как это многим понравится. И ещё хочу просить, помощи. Напишите пошагово лично для меня что и как надо сделать. Я понимаю что чего то нет и не так написано, но как это исправить не хватае мозгов. Пожалуйста.
Речь идёт о функции просмотра фоток материала из массива JavaScript, создаваемого к материалу системой на «автомате» практически во всех модулях юКоз.
В оригинале данная функция имеет имя _bldCont(); и доступна в модуле «Он-лайн игры». Подчеркну то, что данная и будущая - переделанная функция работает только с картинками загруженными при добавлении материала и привязанные к нему. О ваших изображениях, залитых с помощью FTP или ФМ (файловый менеджер, здесь и далее) она ничего не знает и, следовательно работать не будет.
Обрисуем задачу.В общих чертах. Для себя. Типа - набросок плана действий. ヅ - 1. Должна быть доступна в разных модулях системы.
- 2. Не должна бы привязана к материалу - то есть должна быть внешней.
- 3. Должна работать при минимальном пользовательском вмешательстве в код материала.
- 4. Должна иметь обработчик привязки к объектам. Простой и понятный.
- 5.
Вот ... пока всё, что я для себя наметил. Приступим. Как исходник, и для визуализации действий, возьму стандартную страницу, код страницы, «вид материала и комментариев к нему». Так как собираюсь активировать её только на этих страницах. На страницах материала. Вот сокращённый HTML код такой страницы: Code (HTML) <table border="0" width="100%" cellspacing="1" cellpadding="2" class="eBlock">
<tr><td width="90%"><div class="eTitle"><div style="float:right;font-size:9px;">10:05 </div><h1>Проверка7</h1></div></td></tr>
<tr><td class="eMessage"><p>Проверка7</p><span class="showImgAll"><a href="/go?http://tng.ucoz.ru/_nw/0/14676858.jpg" title="http://tng.ucoz.ru/_nw/0/14676858.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://tng.ucoz.ru/_nw/0/s14676858.jpg" align="" /></a></span> </td></tr>
<tr><td colspan="2" class="eDetails"></td></tr>
</table>
А вот «крупный план». Это для меня - как вариант. Code (HTML) <span class="showImgs"<a href="http://tng.ucoz.ru/_nw/0/14676858.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="border: 0pt none ; margin: 0pt; padding: 0pt;" src="http://tng.ucoz.ru/_nw/0/s14676858.jpg" align=""></a></span>
А вот так, выглядит сам массив $IMGS_ARRAY_JS$: Code (HTML/JS) <script type="text/javascript">
var allEntImgs11=[
['http://tng.ucoz.ru/_nw/0/14676858.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s14676858.jpg',320,240], ['http://tng.ucoz.ru/_nw/0/28784191.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s28784191.jpg',320,240], ['http://tng.ucoz.ru/_nw/0/16704327.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s16704327.jpg',320,240], ['http://tng.ucoz.ru/_nw/0/83533984.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s83533984.jpg',320,240], ['http://tng.ucoz.ru/_nw/0/95294701.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s95294701.jpg',320,240], ['http://tng.ucoz.ru/_nw/0/48905326.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s48905326.jpg',320,240]
];
</script>
А вот так, я задам ему «псевдоним» ... ヅ «allEntImgs» Code (HTML) $IMGS_ARRAY_JS$<script type="text/javascript">var allEntImgs=allEntImgs$ID$;</script>
А вот сама функция _bldCont();, которую я возьму за основу. Code (HTML/JS) <script type="text/javascript">
function _bldCont(indx){
var bck=indx-1;var nxt=indx+1;
if (bck<0){bck = allEntImgs$ID$.length-1;}
if (nxt>=allEntImgs$ID$.length){nxt=0;}
var imgs='';
for (var i=0;i<allEntImgs$ID$.length;i++){var img=i+1;
if(allEntImgs$ID$[i][0].length<1){continue;}
if (i==indx){imgs += '<b class="pgSwchA">'+img+'</b> ';}
else {imgs += '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+i+');return false;">'+img+'</a> ';}
}
if (allEntImgs$ID$.length>1){imgs = '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+bck+');return false;">« Back</a> '+imgs+'<a class="pgSwch" href="javascript://" rel="nofollow" onclick="_bldCont('+nxt+');return false;">Next »</a> ';}
var hght = parseInt(allEntImgs$ID$[indx][2]); if ($.browser.msie) { hght += 28; };
_picsCont = '<div id="_prCont" style="position:relative;width:' + allEntImgs$ID$[indx][1] + 'px;height:' + hght.toString() + 'px;"><img alt="" border="0" width="' + allEntImgs$ID$[indx][1] + '" height="' + allEntImgs$ID$[indx][2] + '" src="' + allEntImgs$ID$[indx][0] + '"/><div align="center" style="padding:8px 0 5px 0;">'+imgs+'</div></div>';
new _uWnd('wnd_prv',"Скриншоты",10,10,{popup:1,waitimages:300000, autosizewidth:1, hideonresize:1,autosize:1,fadetype:1,align:'center',min:0, max:0,resize:1},_picsCont);
}
</script>
Дабы не возникло проблем в будущем, да и просто - мне нравятся именованные функции, с осмысленными названиями, переименовываем _bldCont(); в showImgs(); и всё, что связано с ней. Также, так как я присвоил псевдоним массиву allEntImgs$ID$, с привязкой к $ID$, равный allEntImgs - корректирую и это тоже. То есть заменяю в функции allEntImgs$ID$ на allEntImgs ... Надеюсь понятно. Запутанно - но, если вы не поймёте это, дальше вам будет сложнее. Ещё раз. У нас есть массив. С именем, которое формируется из allEntImgs + $ID$ - ID материала. Мы ему, независимо от $ID$, так как делаем это в исходнике страницы, присваиваем псевдоним, ещё одно имя, которое, при любом $ID$ материала будет равняться allEntImgs. Почему? А вот потому. Смотрим и вкуриваем. Code (HTML/JS)
<script type="text/javascript">
var allEntImgs159=[
['http://tng.ucoz.ru/_nw/0/14676858.jpg',800,600,'http://tng.ucoz.ru/_nw/0/s14676858.jpg',320,240]
];
</script>
<script type="text/javascript">
var allEntImgs=allEntImgs159; /* вот здесь я присваиваю функции второе имя = allEntImgs (allEntImgs159 = allEntImgs$ID$;)
и теперь могу обращаться к массиву как allEntImgs[0][1] и получать число «800» Отсчёт с нуля, а могу и по его первому имени allEntImgs159[0][1] - и получать то же число «800» */
</script>
Если вы это не поняли - дальше можно не читать. Теперь моя функция, бывшая _bldCont();, после всех поправок, выглядит вот так: Code (Код функции - в файл) function showImgs(indx){
var bck=indx-1;var nxt=indx+1;
if (bck<0){bck = allEntImgs.length-1;}
if (nxt>=allEntImgs.length){nxt=0;}
var imgs='';
for (var i=0;i<allEntImgs.length;i++){var img=i+1;
if(allEntImgs[i][0].length<1){continue;}
if (i==indx){imgs += '<b class="pgSwchA">'+img+'</b> ';}
else {imgs += '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+i+');return false;">'+img+'</a> ';}
}
if (allEntImgs.length>1){imgs = '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+bck+');return false;">« Back</a> '+imgs+'<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+nxt+');return false;">Next »</a> ';}
var hght = parseInt(allEntImgs[indx][2]); if ($.browser.msie) { hght += 28; };
_picsCont = '<div id="_prCont" style="position:relative;width:' + allEntImgs[indx][1] + 'px;height:' + hght.toString() + 'px;"><img alt="" border="0" width="' + allEntImgs[indx][1] + '" height="' + allEntImgs[indx][2] + '" src="' + allEntImgs[indx][0] + '"/><div align="center" style="padding:8px 0 5px 0;">'+imgs+'</div></div>';
new _uWnd('wnd_prv',"Скриншоты",10,10,{popup:1,waitimages:300000, autosizewidth:1,hideonresize:1, autosize:1,fadetype:1,align:'center', min:0,max:0,resize:1},_picsCont);
}
И обращатьься к ней будем как showImgs();.
Первый и второй пункт в моём списке - готов. Мы сделали её внешней и отвязали от материала. И теперь, её можно вызвать с любого модуля, где присутствует $IMGS_ARRAY_JS$.
Для этого нужно отредактировать шаблон «Страница материала и коментария к нему» и, прямо после открывающего <body>, или, например, в верхний глобальный блок, вставить следующий код: Code (HTML - в шаблон страницы) $IMGS_ARRAY_JS$
<script type="text/javascript">var allEntImgs=allEntImgs$ID$;</script>
<script type="text/javascript" src="http://likbezz.ucoz.ru/_theme/_script/_ext/_showImgs.js"></script>
Где: http://likbezz.ucoz.ru/_theme/_script/_lib/_showImgs.js - путь до вашего файла с этой функцией. То есть нужно создать текстовый файл, в кодировке UTF-8, вставить в него код функции из окна выше, сохранить его и переименовать из _showImgs.txt в _showImgs.js или в любое другое имя. На ваше усмотрение. HTML-код вызова: Code (HTML-код вызова функции) <a href="http://tng.ucoz.ru/_nw/0/14676858.jpg" onclick="showImgs(0);return false;" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="" style="margin:0;padding:0;border:0;" src="http://tng.ucoz.ru/_nw/0/s14676858.jpg" align="" /></a>
В этом месте, можно было бы сказать всё. Но нет, у меня ещё пара пунктов.
А именно - минимум вмешательства пользователя и привязка к объектам. Вот здесь начинается самая противоричивая часть. И мне это не нравится. Так как, так, как удобно мне, оказывается не всегда удобно вам. Расскажу, как удобно мне. И постораюсь объяснить почему. Мне удобно, когда необходимые мне функции активизируются только там, где мне нужно, и только тогда, когда мне это нужно. Возможно, и я подозреваю, что для многих, это не совсем удобно. Возможно. Вы хотите по другому? - пишите по другому.
Привязка и активация функцииВсё просто. Воспользуюсь JQuery и её функциями для работы с элементами. Буду делать выборку по селектору и фильтром по содержимому и по позиции. Особо заморачиваться не буду... ヅ. Итак, привязка будет происходть ко всем ссылкам, в ячейке td.eMessage, с запакованные в контейнер, имеющий класс showImgs, и имеющие в себе картинку, то есть тег img.
Вот такая привязка у меня. Себе можете сделать так, как будет удобно вам. Кроме того, мне хотелось бы, что бы открывалось окно с текущим изображением, а не с первым. Но это - в следующий раз ... А сейчас - по-простому - чтобы переварили. Вот код. Code (JavaScript) <script type="text/javascript">
$(document).ready(function(){
$('td.eMessage .showImgs a:has(img)').click(function(){
showImgs(0);
return false;
});
});
</script>
Собираем всё вместе .... и получаем вот это:
Code (JavaScript)
function showImgs(indx){
var bck=indx-1;var nxt=indx+1;
if (bck<0){bck=allEntImgs.length-1;}
if (nxt>=allEntImgs.length){nxt=0;}
var imgs='';
for (var i=0;i<allEntImgs.length;i++){var img=i+1;
if(allEntImgs[i][0].length<1){continue;}
if (i==indx){imgs+= '<b class="pgSwchA">'+img+'</b> ';}
else {imgs += '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+i+');return false;">'+img+'</a> ';}
}
if (allEntImgs.length>1){imgs = '<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+bck+');return false;">« Back</a> '+imgs+'<a class="pgSwch" href="javascript://" rel="nofollow" onclick="showImgs('+nxt+');return false;">Next »</a> ';}
var hght = parseInt(allEntImgs[indx][2]); if ($.browser.msie) { hght += 28; };
_picsCont = '<div id="_prCont" style="position:relative;width:' + allEntImgs[indx][1] + 'px;height:' + hght.toString() + 'px;"><img alt="" border="0" width="' + allEntImgs[indx][1] + '" height="' + allEntImgs[indx][2] + '" src="' + allEntImgs[indx][0] + '"/><div align="center" style="padding:8px 0 5px 0;">'+imgs+'</div></div>';
new _uWnd('wnd_prv',"Скриншоты",10,10,{popup:1,waitimages:300000, autosizewidth:1 ,hideonresize:1 ,autosize:1 ,fadetype:1,align:'center', min:0,max:0,resize:1},_picsCont);
}
$(document).ready(function(){
$('td.eMessage .showImgs a:has(img)').click(function(){
showImgs(0);return false;
});
});
Лично я, для примера, собрал всё это и запихнут в JS файл. Подключил его в глобальном блоке - «$GLOBAL_AHEADER$» (Глобальные блоки » Верхняя часть сайта)
Вот так:
Потыкать мышкой в картинки и понаблюдать за результатом работы скрипта можно, например, вот здесь (/news/test_kartinka_galereja/2009-06-28-121). На момент 25.08.2010 1:18:01 всё работало ... ヅ ... Там же, можно и потренироваться ... ヅ ... или просто проверить, самолично как это работает.
Кроме того, дабы показать что это далеко не всё, что можно сообразить с этой неплохой функцией вот клипп - в нём видно, что переход на следущее по массиву изображение, осуществляется как кликом на управляющих элементах, так и по самой картинке.
Кроме того, там реализована выборка именно того изображения из массива, по которому осуществлён клик. И ещё, применена подстройка картинки под текущее окно браузера, если она, картинка, по горизонтали или вертикали больше ширины или высоты текущего окна просмотра.
Применяется масштабирование. Думаю, при желании и капельке усердия, вы всё это сможете сделать сами. Было бы жела́ние.
Ну, а если не получится, как нибудь и этот вопрос разберу ... P.S.Всем удачи... ヅ
Flesh.
Источник: IMGS_ARRAY_JS и функция просмотра фоток материала. Оптимизируем. Для юКоз uCoz,JavaScript,JS,FTP,JQuery,картинки,изображение,JS файл | 
