Проблема с удалением / анимацией контейнера флеш-видео плеера YouTube
Я использовал код из следующего вопроса для вставки видео YouTube на страницу: Как изменить размер проигрывателя YouTube, от размера миниатюр до "нормального" размера.
Учитывая следующий HTML:
<dl>
<dt>Thoughts of Sacrament</dt>
<dd><div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div><div class="close">x</div><p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p></dd>
<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" /></dd>
</dl>
Я ожидал, что следующий jQuery должен удалить .placeholder Div, который содержит видео YouTube:
$(document).ready(function(){
// ...Other code to insert the YouTube...
$("div.close").click(function() {
$(this).sibling("div").remove();
// $(this).parent().empty();
});
});
В конце концов я стремлюсь "перевернуть" оригинальную анимацию, а затем поменять видео на YouTube для оригинала. .png, но у меня проблемы с доступом к соответствующему div. Закомментированный код работает и очищает родительский элемент, но я просто не могу получить доступ к брату .placeholder,
Любая помощь будет более чем оценена, заранее спасибо =)
Обновить:
Пока что я не продвинулся дальше, чем раньше, текущая страница здесь, и код этой страницы ниже:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery & YouTube</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--
Currently -almost- works
- unfortunately the 'close' option doesn't care
if the video's been played or not (and will remove the picture if it's there).
- the close button also (tries?) to animate the flash object and then drops
the replacement image in. Looks wrong.
On updating the page, the image -after closing/removing the video
is no longer 'clickable'
-->
<script type="text/javascript">
$(document).ready(function(){
$(".placeholder img").click(function () {
var videoID = $(this).attr("id");
$(this).animate({
width: "445px",
height: "364px"
}, 600, function() {
$(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>", function() {$(this).parent().children().find("div .close").toggle()} );
});
});
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").animate({
width: "252px",
height: "199px"
}, 600, function() {
$(this).replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="branding" title="demo page for jQuery issues.">
<h1>jQuery and YouTube problems</h1>
<div id="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">dates</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder">
<img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
</div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<div class="placeholder">
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</div>
<div class="close">x</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
Вы заметите чрезмерное использование div (используется потому, что я подумал - по какой-то причине - это может облегчить навигацию по DOM: насколько я могу судить, это не так), за что я могу только извиниться. И я принесу необходимые жертвы Мейеру, Молли и Седерхольму.
1 ответ
Итак... после некоторой работы, а также множества и множества и, ну, в общем, проб и ошибок и большого количества ссылок на документы jQuery и другие вопросы SO, чтобы понять, что здесь происходит, я собрал вместе особо грязные средства доступа родной брат .placeholder дела.
$(document).ready(function(){
// ...Other code to insert the YouTube...
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</dd>
</dl>
</div>
Я надеялся, что это каким-то образом вернет страницу в исходное положение, чтобы я мог нажать на .png чтобы увеличить изображение, а затем заменить на видео, нажмите на .close div, чтобы уменьшить его, а затем иметь возможность нажать на .png чтобы увеличить его и вставить видео на YouTube снова.
Я не знаю, почему это казалось хорошей идеей, но это так. К сожалению, это не работает, и я понятия не имею, почему. У меня есть... догадка, что это может быть связано с живым событием / функцией / вещью jQuery (я действительно новичок в jQuery), но пока не вижу, как все соединить.
Я собираюсь оставить вопрос открытым еще немного, так как подозреваю, что есть много лучших ответов, применимых к поставленному мной вопросу. Там почти должно быть, правда.
Просто для завершения, так как это развитие предыдущего вопроса, я выложу весь код из html файл ниже, так что любой, кто придет, может увидеть, что я сделал, и, надеюсь, иметь представление о том, почему, если не лучшее понимание моего процесса принятия решений.
Весь код:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>in the absence of light | ITAOL</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function () {
var videoID = $(this).attr("id");
$(this).animate({
width: "445px",
height: "364px"
}, 600, function() {
$(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>");
});
});
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="branding" title="In the Absence of Light.">
<h1 title="In the Absence of Light">In The Absence of Light</h1>
<div id="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">dates</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder">
<img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
</div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<div class="placeholder">
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</div>
<div class="close">x</div>
</dd>
</dl>
</div>
<div id="foot">
</div>
</div>
</body>
</html>