Javascript-форум - Скрипт скрытия мультимедиа-контента

Javascript-форум (https://javascript.ru/forum/)

- Работа (https://javascript.ru/forum/job/)

- - Скрипт скрытия мультимедиа-контента (https://javascript.ru/forum/job/15680-skript-skrytiya-multimedia-kontenta.html)

Скрипт скрытия мультимедиа-контента

Здравствуйте, уважаемые форумчане !

Нужен скрипт-аккордеон, который будет не только скрывать текст, но и воспроизводить мультимедиа-контент.
Но скрипт должен работать с множеством ссылок (блоков) - и к тому же, работать автоматически.
Например, при открытии одного из блоков срабатывает плеер (запускает музыку) ... а при открытии любого другого блока - предыдущий блок закрывается (и выключается его плеер), и включается плеер с музыкой из текущего блока.
И таким образом должны работать (автоматически включаться-выключаться) все мультимедийные ссылки.

При этом необходимо использование только средств, встроенных в браузеры - т.к. скрипт должен работать не только на странице сайта, но и на локальном компьютере (отключенном от Интернет).
Т.е., никаких сторонних сервисов или сторонних скриптовых библиотек - только HTML, и возможно Java.

Покопался в Сети, нашёл пару скриптов ...

Код:

<html>

<head>

<script>function showTooltip(divID1, divID2)

{

var myHiddenDiv = document.getElementById(divID2);

var myDiv = document.getElementById(divID1);



myHiddenDiv.style.display = 'none';

if(myDiv.style.display == 'none')

{

myDiv.style.display = 'block';

}

else

{

myDiv.style.display = 'none';

}

return false;

}



</script>

</head>

<body>

<a href='javascript:;' onclick='showTooltip("tooltip1", "tooltip2")'> show1 </a>

<div id="tooltip1" style='display: none'>

<a href=#>blah bla1</a>

</div>



<br>

<a href='javascript:;'>

<span onclick='showTooltip("tooltip2", "tooltip1")'> show2</span></a>

<div id="tooltip2" style='display: none'>

<a href=#>blah bla2</a>

</div>

</body>

</html>

Код:

<html>

<head>

<script type="text/javascript">

//обьявление функции которая выполняет переключение между вкладками

function showTab(pTabIndex)

{

var i=0; for (i=0 ; i<tabs.length ; i++)

{

//делаем нужный контент-вкладку видимой.

//стальное - невидимами

tabs[i].style.display = (i == pTabIndex) ? "block" : "none";

//выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым

tabs[i].style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff";

}

}

</script>

<!-- создаём стилевые классы для контейнеров ,содержащего гиперссылки-корешки вкладок ,

и для контейнера б содержащего сами вкладки -->

<style>

.tabhost { border: thin solid #cccccc; padding:5px; }

.tabhs A { border: thin solid #cccccc; padding: 5px 5px 0px 5px ; }

</style>

</head>

<body>

<div class="tabhs">

<A id="tabH1" href="#" ONCLICK="showTab(0);">вкладка 1 </A>&nbsp;

<A id="tabH2" href="#" ONCLICK="showTab(1);">вкладка 2 </A>&nbsp;

<A id="tabH3" href="#" ONCLICK="showTab(2);">вкладка 3 </A>

</div> <div class="tabhost">

<div id="tab1"><p>это содержимое первой вкладкиp</p> </div>

<div id="tab2"><p>это содержимое второй вкладкиp</p> </div>

<div id="tab3"><p>это содержимое третей вкладки </p> <p>это содержимое </p>

<p>это содержимое </p> <p>это содержимое </p> </div>

</div>

<script TYPE="text/javascript">

var tabs = new Array();

tabs[0] = document.all["tab1"];

tabs[1] = document.all["tab2"];

tabs[2] = document.all["tab3"];

tabs[3] = document.all["tab4"];

tabs[4] = document.all["tab5"];

var tabHs = new Array();

tabHs[0] = document.all["tabH1"];

tabHs[1] = document.all["tabH2"];

tabHs[2] = document.all["tabH3"];

tabHs[3] = document.all["tabH4"];

tabHs[4] = document.all["tabH5"];

//делаем изначально видимую первую вкладку

showTab(0);

</SCRIPT>

</body>

</html>

Но эти скрипты работают не так, как мне нужно.
Первый скрипт исправно автоматически выключает мультимедиа-контент при переходе к следующей ссылке - но зато скрипте использует всего ДВА блока, и сделать большее их количество не получается.
Да и если бы даже получилось оформить массив ссылок в том виде, как это изначально сделано в скрипте - то скрипт был бы весьма запутанным, и добавлять в него при необходимости новые блоки было бы сущим кошмаром.
Второй скрипт можно нагрузить любым количеством ссылок (и массив там получается относительно компактный и достаточно удобный для редактирования) - но при этом в скрипте НЕ работает автоматическое отключение мультимедиа-контента (т.е. одновременно продолжают работать плееры во всех ранее открытых ссылках).

Может кто-нибудь написать требуемый скрипт - или хотя бы откорректировать имеющийся (2-й) вариант скрипта ?

.

String, сколько?

Цитата:

Сообщение от ksa

String, сколько?

Так ведь у всех разный аппетит ... :-?
Предлагайте свою цену за работу - а там будет видно.

К тому же, насколько я знаю - на доработку скрипта одна цена, а для рисование "с нуля" другая ...
И при этом ещё неизвестно, какой именно вариант (доработка или "с нуля") будет лучше.

Пожалуй, поясню задачу чуть подробнее - в смысле, как должно выглядеть визуально.
На странице HTML-странице сайта (т.е. не форума) находится множество текстовых ссылок (например, размещённых столбцом).
Под каждой ссылкой имеется некоторый скрытый контент (в основном смешанный) - блоки текста, статические или анимированные графические файлы, воспроизведение звука или видео (т.е. соответствующие плееры).
Нажимаем на любую ссылку - ОТКРЫВАЕТСЯ скрытый блок, демонстрируя текст, графику, звук, видео - т.е., то, что относится именно к текущей ссылке.
Нажимаем любую другую ссылку - текущий блок ЗАКРЫВАЕТСЯ (плеер этого блока при этом должен АВТОМАТИЧЕСКИ прекратить воспроизведение) - а в открывшемся новом блоке демонстрируются только относящиеся к нему тексты, графика, звук, видео.
Т.е., единовременно на странице должна работать только ОДНА ссылка (блок) - все остальные ссылки в это время должны МОЛЧАТЬ и быть ЗАКРЫТЫ.
Каким же образом скрипт должен свободно работать в браузерах на локальных компьютерах, отключенных от Интернет.

String,
не знаю. я не в одном ни в другом скрипте не увидел контент управляющий проигрыванием звука.кинул вам в личку что есть вопросы-но вы видимо на диалог не настроены

Цитата:

Сообщение от dmitriymar

... я не в одном ни в другом скрипте не увидел контент управляющий проигрыванием звука.

Например, во 2-м скрипте на дивовый ID можно подвесить хоть текст, хоть картинки, хоть плеер.
Если непонятно - могу кинуть сюда листинг слегка изменённого кода ...

Цитата:

... кинул вам в личку что есть вопросы - но вы видимо на диалог не настроены

Личку сейчас посмотрел.
На диалог я вполне настроен - но предпочитаю вести диалог открыто.
Потому что таким образом определится приблизительно реальная "рыночная стоимость" услуги написания конкретного скрипта.
Я не жмот ... но и не лох :no:

Например, во 2-м скрипте на дивовый ID можно подвесить хоть текст, хоть картинки, хоть плеер.
с плеерами не совсем так дело обстоит
насколько я понял -от количества записей зависит количество ячеек в меню.выбралась какаято-заиграла песня-меню свернулось. при наведении на него -развернулось заиграла другая меню свернулось.так?
стоимость от 50$
аська 477691957

Цитата:

Сообщение от dmitriymar

... с плеерами не совсем так дело обстоит
насколько я понял -от количества записей зависит количество ячеек в меню.выбралась какаято-заиграла песня-меню свернулось.
при наведении на него -развернулось заиграла другая меню свернулось.так?

Ну разумеется, от количества дивов зависит количество имеющихся блоков ...
А на 1 страницу может понадобиться до более 100 штук ссылок (и скрытых блоков, соответственно).
Но т.к. блоки будут работать поодиночке - то нагрузка будет не очень высокая даже при таком количестве.

Вот слегка переструктурированный скрипт (в принципе так, как он будет располагаться на странице).
Ничего лишнего (типа украшений и прочего) мне там не нужно - иначе потом (при добавлении кода блоков) будет затруднительно работать.
Мне нужна чёткая функциональность скрипта, и ничего более.

В дивовых SCR подвесил (для примера) имена графических и звуковых файлов.
Звуковые файлы запускаются вставленными вкб-компонентами (подключаемыми модулями - а именно, стандартными виндовыми плеерами).
Замените имена этих файлов на любые другие имена файлов, имеющихся на вашем винте - и получите рабочий пример.

Код:

<html>

<head>

<script type="text/javascript">

//обьявление функции которая выполняет переключение между вкладками

function showTab(pTabIndex)

{

var i=1; for (i=1 ; i<tabs.length ; i++)

{

//делаем нужный контент-вкладку видимой.

//стальное - невидимами

tabs[i].style.display = (i == pTabIndex) ? "block" : "none";

//выделяем гиперссылку-корешок, соответствующую видимой вкладке,серым фоном , остальные - белым

tabs[i].style.backgroundColor = (i == pTabIndex) ? "#cccccc" : "#ffffff";

}

}

</script>

<!-- создаём стилевые классы для контейнеров ,

содержащего гиперссылки-корешки вкладок , и для контейнера , содержащего сами вкладки -->

<style>

.tabhost { border: thin solid #cccccc; padding:5px; }

.tabhs A { border: thin solid #cccccc; padding: 5px 5px 0px 5px ; }

</style>

</head>

<body>

<div class="tabhs">

<A id="tabH1" href="#" ONCLICK="showTab(1);">вкладка 1 </A><br><br>

<div id="tab1"><p><img src="1.jpg"><embed width="128" height="128" src="a.mp3"></p> </div>

<A id="tabH2" href="#" ONCLICK="showTab(2);">вкладка 2 </A><br><br>

<div id="tab2"><p><img src="2.jpg"><embed width="128" height="128" src="b.mp3"></p> </div>

<A id="tabH3" href="#" ONCLICK="showTab(3);">вкладка 3 </A><br><br>

<div id="tab3"><p><img src="3.jpg"><embed width="128" height="128" src="c.mp3"></p></div>

<A id="tabH4" href="#" ONCLICK="showTab(4);">вкладка 4 </A><br><br>

<div id="tab4"><p><img src="4.jpg"></p></div>

<A id="tabH5" href="#" ONCLICK="showTab(5);">вкладка 5 </A><br><br>

<div id="tab5"><p><img src="5.jpg"></p></div>

<A id="tabH6" href="#" ONCLICK="showTab(6);">вкладка 6 </A><br><br>

<div id="tab6"><p><img src="6.jpg"></p></div>

</div>

<script TYPE="text/javascript">

var tabs = new Array();

tabs[1] = document.all["tab1"];

tabs[2] = document.all["tab2"];

tabs[3] = document.all["tab3"];

tabs[4] = document.all["tab4"];

tabs[5] = document.all["tab5"];

tabs[6] = document.all["tab6"];

tabs[7] = document.all["tab7"];

tabs[8] = document.all["tab8"];

var tabHs = new Array();

tabHs[1] = document.all["tabH1"];

tabHs[2] = document.all["tabH2"];

tabHs[3] = document.all["tabH3"];

tabHs[4] = document.all["tabH4"];

tabHs[5] = document.all["tabH5"];

tabHs[6] = document.all["tabH6"];

tabHs[7] = document.all["tabH7"];

tabHs[8] = document.all["tabH8"];

//делаем изначально видимую первую вкладку

showTab(0);

</SCRIPT>

</body>

</html>

Цитата:

стоимость от 50$

В смысле - "от 50" и НИЖЕ ? :)
А если ВЫШЕ - то за что именно повышение ?

К тому же, это стоимость доработки вышеприведённого скрипта - или стоимость разработки специального скрипта ?

.

String,
А на 1 страницу может понадобиться до более 100 штук ссылок (и скрытых блоков, соответственно).
не хочу вас обидеть но блока будет достаточно одного

Цитата:

Сообщение от String

К тому же, это стоимость доработки вышеприведённого скрипта - или стоимость разработки специального скрипта ?

это стоимость нового скрипта. причём стоимость будет колебаться в большую сторону-из за тех же 100 ссылок-представляю что будет за вид у страницы если сразу все 100 развернутся

а вообще есть чёткие правила раздела-цену первым озвучивает заказчик

Цитата:

Сообщение от String

Предлагайте свою цену за работу

Вообще-то по правилам этого форума первым называть сумму должен заказчик... :)

Начну с $100... Потому как дюже много неясностей. Никакой, якобы готовый код, дорабатывать не стану. :)

Цитата:

Сообщение от dmitriymar

не хочу вас обидеть но блока будет достаточно одного

Я не обижаюсь :)
Но один блок - в смысле, каким-то образом сформировать массив так, чтобы один общий блок работал на запуск контента любой из ссылок ?
Если будет работать так как надо одним блоком - то мне вероятно без разницы, пусть работает одним блоком ...
Главное - чтобы я потом без лишней головной боли смог добавлять на страницу необходимое количество ссылок (блоков).

Цитата:

... представляю что будет за вид у страницы если сразу все 100 развернутся

Да вышеприведённые скрипты визуально одновременно не разворачиваются ...
Но толку-то ... ведь плееры во всех запущенных ссылках играют всей кучей, а не поодиночке ... вот-в том-то и проблема :(
Если бы не эта мелкая нестыковка - то я бы не морочился, а просто тупо использовал 2-й скрипт.

Цитата:

это стоимость нового скрипта. причём стоимость будет колебаться в большую сторону-из за тех же 100 ссылок

Ну, в в вышеприведённом примере я и сам могу наштамповать хоть 100, хоть 100000 ссылок :D
Только проблема в том, что мне от этого скрипта в данном виде всё равно никакого толку ... :(

Цитата:

а вообще есть чёткие правила раздела-цену первым озвучивает заказчик

Я как-то по случаю приценивался у некоторых девелоперов ...
Правда, речь шла о другом скрипте.
И они сами сразу называли примерный тариф, проанализировав мои требования.

Да и вообще по логике ... откуда же клиент может знать стоимость написания скрипта, если он нифига не шарит в программинге ?
Он может предложить хоть 1 рубль, хоть 1 штукобакс - но ведь всё равно програмер НЕ согласится работать за сумму меньшую той, чем он САМ ЛИЧНО оценивает свою работу ...
А вот взять с клиента больше - это всегда пожалуйста, только предложи ;)

Но суть не в том.
Цена 50$ (т.е. грубо говоря 1500 руб) меня устроит - в том случае, если скрипт будет качественный, небольшой и удобный.
Потому что лепить большой и невнятный код в каждую страницу (а потом ещё и регулярно копаться в этом коде) - удовольствие ниже среднего.
Так что, пока предлагаю исходить из оценки в 1000 руб (если "примерочная" версия скрипта будет хотя бы просто работать именно так как надо).

Для начала опишите, пожалуйста - каким образом собираетесь делать скрипт ?
В смысле - на дивах, на Яве или ещё как ...
Какого размера будет скрипт ?
Какой сложности (в смысле, насколько сложно будет добавлять блоки по мере надобности) ?
Насколько он будет тяжёлым для страницы сайта (при большом количестве скрытых блоков) ?

Цитата:

Сообщение от ksa

Начну с $100...

100 баксов - раз ..... 100 баксов - два ....
Господа, кто согласен взять больше ? :lol:

Цитата:

Потому как дюже много неясностей.

А что именно неясно ?
Я вроде бы всё достаточно подробно описал - и даже пример кинул ...