Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Использование массива в другом скрипте


Автор: Sinneren 1.11.2012, 08:43
Использую фотогалерею "Фоторама", которая переделывает структуру вида <div><a><img></a></div> в <div><canvas></canvas></div>. В канву нужно вписать id, которые заполняются в битриксовом шаблоне. Заполняю так:

Код

//до цикла перебора элементов объявлю массив и счётчик
<script type="text/javascript">
window.id_mass = [];
i = 0;
</script>



Код

//Затем в цикле заполняю массив
<script type="text/javascript">
window.id_mass.push('<?=$this->GetEditAreaId($arElement["ID"]);?>');
</script>


- всё это в файле шаблона компонента, что происходит далее:
запускается страница , где в head подгружается jquery, скрипт фоторамы и т.д., затем формируется страница, выводится компонент по шаблону с заполненным массивом(см.выше).
В самом скрипте фоторамы я добавил изменения, где к элементу canvas добавляется id="'+ window.id_mass[globalid]+'", globalid - само собой счётчик, который объявляется вначале и итерируется после добавления. но массив пустой, записывается undefined.
Короче говоря, как сделать этот массив глобальным, чтобы можно было использовать в подключенном скрипте.

Автор: Aliance 1.11.2012, 10:35
Открываешь страничку в браузере, жмешь правой кнопкой кода - показать код. Дальше ctrl+A, ctrl+C, ctrl+V на форум в блоке "код html", удаляешь все лишнее и тогда можно будет что-то сказать. Пока же, причиной мне видится то, что id_mass заполняются после вывода канваса.

Автор: Sinneren 1.11.2012, 11:33
Ок, вот код, немного почистил от битриксовского мусора. В конце под body подключаю скрипт фоторамы, где и пытаюсь использовать массив(до этого стоял в head, но разницы никакой, кроме некорректного отображения галереи).
Код

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css"></style>
    <link href="/bitrix/templates/folio/css/fotorama.css?1344768836" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
    <div id="content">
        <script type="text/javascript">
            var id_mass = [];
            i = 0;
        </script>
        <div class="fotorama fotorama_horizontal fotorama_shadows fotorama_csstransitions" croptofit="true"
             data-vertical="false" data-thumbsize="64" data-width="740" data-height="562" style="min-width: 0px; ">
            <div class="fotorama__wrap fotorama__wrap_style_touch fotorama__wrap_mouseout"
                 style="width: 740px; height: 562px; ">
                <div class="fotorama__noise"></div>
                <div class="fotorama__shaft"
                     style="-webkit-transition: 0ms; width: 14876px; height: 562px; -webkit-transform: translate(0px, 0px); ">
                    <div class="fotorama__state"
                         style="left: 370px; display: none; opacity: 0; background-position: 0px -96px; "></div>
                    <div class="fotorama__frame fotorama__frame_active"
                         style="visibility: visible; width: 740px; height: 562px; left: 0px; "><img
                            style="visibility: visible; width: 362px; height: 546px; top: 8px; left: 189px; "
                            src="/upload/resize_cache/iblock/5b8/740_1280_1/5b8e1abcf32ce90ffca5178eb12d36c6.jpg"
                            class="fotorama__img" id="NaN" width="362" height="546"></div>
                    <div class="fotorama__frame"
                         style="visibility: visible; width: 740px; height: 562px; left: 744px; "></div>
                    <div class="fotorama__frame"
                         style="visibility: visible; width: 740px; height: 562px; left: 1488px; "><img
                            style="visibility: visible; width: 724px; height: 482px; top: 40px; left: 8px; "
                            src="/upload/resize_cache/iblock/dc5/1280_562_1/dc592de4630ad4757dd8e85329a831fc.jpg"
                            class="fotorama__img" id="NaN" width="724" height="482"></div>
                    <div class="fotorama__frame"
                         style="visibility: visible; width: 740px; height: 562px; left: 2232px; "></div>
                </div>
                <i class="fotorama__arr fotorama__arr_prev fotorama__arr_disabled fotorama__arr_hover"
                   style="-webkit-transition: 333ms; ">◀</i><i class="fotorama__arr fotorama__arr_next"
                                                               style="-webkit-transition: 333ms; ">▶</i></div>
            <div class="fotorama__thumbs fotorama__thumbs_previews fotorama__thumbs_shadow fotorama__thumbs_shadow_no-left"
                 style="visibility: visible; height: 72px; width: 740px; ">
                <div class="fotorama__thumbs-shaft"
                     style="-webkit-transition: 0ms; -webkit-transform: translate(4px, 0px); "><i
                        class="fotorama__thumb-border"
                        style="height: 60px; top: 4px; border-width: 2px; display: inline; -webkit-transition: 0ms; -webkit-transform: translate(0px, 0px); width: 38px; "></i>

                    <div class="fotorama__thumb fotorama__thumb_selected"
                         style="height: 64px; margin: 4px; width: 42px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="42" height="64"
                                style="width: 42px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 96px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="96" height="64"
                                style="width: 96px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 96px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="96" height="64"
                                style="width: 96px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 96px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="96" height="64"
                                style="width: 96px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 43px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="43" height="64"
                                style="width: 43px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 43px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="43" height="64"
                                style="width: 43px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 43px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="43" height="64"
                                style="width: 43px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 96px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="96" height="64"
                                style="width: 96px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 43px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="43" height="64"
                                style="width: 43px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 43px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="43" height="64"
                                style="width: 43px; height: 64px; visibility: visible; "></canvas>
                    </div>
                    <div class="fotorama__thumb" style="height: 64px; margin: 4px; width: 84px; ">
                        <canvas class="fotorama__thumb__img" id="undefined" width="84" height="64"
                                style="width: 84px; height: 64px; visibility: visible; "></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="description"></div>
    </div>
</div>


<script type="text/javascript" src="/bitrix/templates/folio/js/fotorama.js"></script>


</div>
</body>
</html>

Автор: Aliance 1.11.2012, 14:11

 ! 
Aliance		Неужели самому было приятно читать код в одну строку?


Судя по
Цитата

id="NaN"
id="undefined"


Ты выложил не тот код, что отдает сервер, а тот код, который рендерится движком браузера. А нужен именно первый.

Где происходит заполнение id_mass? Что содержится в файле /bitrix/templates/folio/js/fotorama.js (если там что-то важное, если не относится к делу - зачем вообще его включать?).

Автор: Sinneren 1.11.2012, 17:11
Я разделил до момента когда, в принципе, нужно читать, а всё в целом нет нужды. 
В общем с проблемой разобрались, оказывается, не я один копался в коде, в итоге наложения произошли - от того и портак такой. Хотя всё равно эта возня оказалась бесполезной, так что извиняюсь, что потратил время зря.  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)