JQuery Нажмите на изображение

Question

У меня есть div, у которого есть изображение. Когда я нажимаю на изображение, я хотел бы преобразовать пятно, которое было изображение, чтобы играть встроенное видео, как например:

<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe> 

Любая помощь будет оценена. Мне нравится не обновлять страницу, если это возможно.

Answer 1

Посмотрите на функцию html() jQuery. Это позволяет вам брать HTML и выгружать его в контейнер.

Answer 2

Вы можете сделать это:

$('#yourImage').click(function(){ 
    $(this).replaceWith('<iframe>',{ 
     width: 560, 
     height: 315, 
     src: 'http://www.youtube.com/embed/DxkEe_l7S3g', 
     frameborder: 0, 
     allowfullscreen: true 
    }); 
}); 

Или:

$('#yourImage').click(function(){ 
    $(this).after('<iframe>',{ 
     width: 560, 
     height: 315, 
     src: 'http://www.youtube.com/embed/DxkEe_l7S3g', 
     frameborder: 0, 
     allowfullscreen: true 
    }).remove(); 
}); 

Или:

$('#yourImage').click(function(){ 
    $(this).parent().html('<iframe>',{ 
     width: 560, 
     height: 315, 
     src: 'http://www.youtube.com/embed/DxkEe_l7S3g', 
     frameborder: 0, 
     allowfullscreen: true 
    }); 
}); 

Answer 3

EDIT: Вот Fiddle работать с: http://jsfiddle.net/9pdX6/

Это зависит от того, откуда вы получаете идентификатор видео.

Допустим, у вас есть это:

<img data-id="DxkEe_l7S3g" src="some_image" /> 

Тогда вы могли бы добиться того, что вы ищете, как это:

$('img').click(function() { 
    $(this).replaceWith(
     '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + 
     $(this).data('id') + '" frameborder="0" allowfullscreen></iframe>' 
    ); 
}); 

Answer 4

$(document).ready(function(e) { 
    $("#yourImageID").click(change); 
}); 

function change(){ 
    $("#imgParentDivID").html('<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>'); 
} 

Answer 5

Есть много вариантов. Один из самых простых, вероятно, будет jQuery .replaceWith Функция, которая заменяет текущий элемент объекта новым, который вы подразумеваете.

Как так:

var vid = $("<iframe />", { frameborder: 0, src: "http://www.youtube.com/embed/DxkEe_l7S3g" }).css({ height: "315px", width: "560px" }); 

$(function() { 
    $(document).on("click", "img", function(e) { 
     $(this).replaceWith(vid); 
    }); 
}) 

EXAMPLE

Другой вариант заключается в размещении Iframe на HTML, присвоить это CSS для display: none; и использовать JQuery-х fadein/fadeout для достижения "классное" эффект. Как так:

$(function() { 
    $(document).on("click", "img", function(e) { 
     $(this).fadeOut("slow", function(e) { $("iframe").fadeIn("fast"); }); 
    }); 
}) 

EXAMPLE

Я не уверен, что именно вы ищете, но благодаря предопределенной библиотекой JavaScript JQuery, есть буквально десятки, если не 100 из способов, чтобы сделать то, что мало вы просить. Эти примеры - всего 2!

Answer 6

Скажем, изображение на

<img src="..." data-src="http://www.youtube.com/embed/DxkEe_l7S3g"/> 

с JQuery

$(document).on("click","img",function(){ 
    var frame = '<iframe width="560" height="315" src="'+$(this).data("src")+'" frameborder="0" allowfullscreen></iframe>'; 
    $(this).replaceWith(frame); 
});