Модальное окно с МР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> |
Дмитрий-Шмитрий,
Самый простой вариант <div"> <audio src="./music/1.mp3" controls autoplay></audio><img src="./imgs/1.1m.jpg"> </div> Так плеер сверху, поменять местами - снизу |
Дмитрий-Шмитрий,
<!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>
|
рони,
А где звук? Про <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> |
Цитата:
|
рони,
При запуске вашей демки у меня тишина, при запуске моего варианта - напугал сотрудников (хороший звук вы подобрали) Насчет браузера - не понял |
Рони, спасибо, ваш вариант почти подходит, но видимо я не совсем правильно написал, что мне требуется. Конечный результат должен выглядеть так же, но у меня фото-галерея и под конкретной фотографией после увеличения должна быть конкретная аудиозапись, при чём под разными фото разные записи.
|
Щас у меня вот так, фото отдельно, под ними проигрыватели. Нужно, чтобы открывалось, как у рони, только была возможность сделать множество таких фотографий и чтобы у каждого было по плееру с записью соответствующей фотографии.
<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> |
Дмитрий-Шмитрий,
на всякий случай Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Дмитрий-Шмитрий,
Предлагается следующий вариант: В странице прописывается 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');
}
Способ проверен - работает |
| Часовой пояс GMT +3, время: 16:54. |