Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2016, 09:23
Новичок на форуме
Отправить личное сообщение для Дмитрий-Шмитрий Посмотреть профиль Найти все сообщения от Дмитрий-Шмитрий
 
Регистрация: 31.01.2016
Сообщений: 5

Модальное окно с МР3 плеером
Здравствуйте! Подскажите, как в модальном окне с фотографией, вместо нижней подписи вставить МР3 плеер для проигрывания 1 композиции?

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth":520,"frameHeig ht":400});
$("a.content").fancybox({"frameWidth":600,"frameHe ight":300});
});
</script>

<div">
<a class="first" title="Место где нужно, чтобы отображался мр3 плер" href="./imgs/1.1.jpg"><img src="./imgs/1.1m.jpg"></a>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2016, 10:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Дмитрий-Шмитрий,
Самый простой вариант
<div">
   <audio src="./music/1.mp3" controls autoplay></audio><img src="./imgs/1.1m.jpg">
</div>

Так плеер сверху, поменять местами - снизу

Последний раз редактировалось Dilettante_Pro, 24.02.2016 в 10:35.
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2016, 11:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Дмитрий-Шмитрий,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>

<script type='text/javascript'>
 $(function()
 		{
 				$('a').fancybox(
 						{
 					      title : '<audio src="http://wav-library.net/sfx/industry/Industrial_alarm.mp3" controls autoplay></audio>'
 						}
 				)
 		}
 );
</script>
<style type="text/css">
.fancybox-title-float-wrap .child  audio{
  margin: 0; width: 200px; height: 30px;
}
.fancybox-title-float-wrap .child {

}
</style>
</head>
<body>
<a title="forum" href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" ><img src="http://javascript.ru/forum/images/smilies/smile.gif"></a>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2016, 11:32
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
А где звук?

Про <a> - то я и забыл...
<div>
<a class="first" title="Место" href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"><audio src="http://wav-library.net/sfx/industry/Industrial_alarm.mp3" controls autoplay></audio><img src="http://javascript.ru/forum/images/smilies/smile.gif"></a>
</div>
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2016, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Сообщение от Dilettante_Pro
А где звук?
в спецификации вашего любимого браузера
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2016, 12:42
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
При запуске вашей демки у меня тишина, при запуске моего варианта - напугал сотрудников (хороший звук вы подобрали)
Насчет браузера - не понял
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2016, 13:20
Новичок на форуме
Отправить личное сообщение для Дмитрий-Шмитрий Посмотреть профиль Найти все сообщения от Дмитрий-Шмитрий
 
Регистрация: 31.01.2016
Сообщений: 5

Рони, спасибо, ваш вариант почти подходит, но видимо я не совсем правильно написал, что мне требуется. Конечный результат должен выглядеть так же, но у меня фото-галерея и под конкретной фотографией после увеличения должна быть конкретная аудиозапись, при чём под разными фото разные записи.

Последний раз редактировалось Дмитрий-Шмитрий, 24.02.2016 в 13:22.
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2016, 13:32
Новичок на форуме
Отправить личное сообщение для Дмитрий-Шмитрий Посмотреть профиль Найти все сообщения от Дмитрий-Шмитрий
 
Регистрация: 31.01.2016
Сообщений: 5

Щас у меня вот так, фото отдельно, под ними проигрыватели. Нужно, чтобы открывалось, как у рони, только была возможность сделать множество таких фотографий и чтобы у каждого было по плееру с записью соответствующей фотографии.
<html>
<head>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth":520,"frameHeig ht":400});
$("a.content").fancybox({"frameWidth":600,"frameHe ight":300});
});
</script>
<style>
</style>
<title>Грампластинки</title>
<meta charset="windows-1251">
</head>
<body style="background-color:#990000">

<table border="0" width="580" height="150" align="center" cellpadding="0" cellspacing="0"
style="background-color:#ffffff"></td>
<td width="300" height="150" align="center" border="0">
<div">
<a class="first" title="Леонид Утёсов - У чёрного моря" href="./imgs/1.1.jpg"><img src="./imgs/1.1m.jpg"></a>
</div>
<div">
<a class="first" title="Леонид Утёсов - Автоболельщик" href="./imgs/1.2.jpg"><img src="./imgs/1.2m.jpg"></a>
</div></td>
<td align="center"></td>
</tr>
<tr>
<td height="50">
<audio id="id_15375_2" src="./music/u_chyornogo_morya.mp3" type="audio/mp3" controls="controls" width="470"></audio>
<p></p>
<audio id="id_15375_2" src="./music/avtobol.mp3" type="audio/mp3" controls="controls" width="470"></audio>
</td>
<td height="90" width="250">
Леонид Утёсов - У чёрного моря <p></p> Леонид Утёсов - Автоболельщик
</td>
</tr>
</table>
</body>
</html>

Последний раз редактировалось Дмитрий-Шмитрий, 24.02.2016 в 14:19.
Ответить с цитированием
  #9 (permalink)  
Старый 24.02.2016, 16:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

Дмитрий-Шмитрий,
на всякий случай
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #10 (permalink)  
Старый 25.02.2016, 14:34
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Дмитрий-Шмитрий,
Предлагается следующий вариант:
В странице прописывается iframe
<iframe id="imgwin" src="imgwin.html" style= "position:fixed; top:0; left:0; display:none; width:100%; height:100%;" ></iframe>

в который грузится болванка imgwin.html
<!DOCTYPE html>
<html>
<head>
   <script>
       function exit() {
           document.getElementById('audio').pause();
           window.parent.document.getElementById('imgwin').style.display = 'none';
       }
   </script>
</head>
<body>
   <a onclick="exit();"><img src=""></a>
   <audio id="audio" src=""></audio>
</body>
</html>

в теги a вместо href прописывается onclick, вызывающий функцию c параметром, однозначно определяющим картинку и музыку (как вариант - можно передавать в функцию два параметра: имена файлов картинки и музыки с путями)
function showMustGoOn(itemId) {
        $("iframe").contents().find("img").attr("src", images[itemId]);
        $("iframe").contents().find("audio").attr("src", musics[itemId]);
        $("iframe").contents().find("audio").attr("controls", "controls");
        $("iframe").css("display", "block");
        $("iframe").contents().find("audio").trigger('play');
     }



Способ проверен - работает

Последний раз редактировалось Dilettante_Pro, 25.02.2016 в 16:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающее модальное окно в определенные час. sheneman Общие вопросы Javascript 15 10.01.2018 17:00
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
модальное окно div'ом codingfighter Общие вопросы Javascript 28 03.09.2013 15:07
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59
Посоветуйте как сделать модальное окно battrack jQuery 3 12.07.2012 15:42