Изображение показать в полном размере при нажатии

Question

Я использую kendo mobile с cordova plugins для создания моего приложения.

У меня есть сценарий, что мне нужно показать пользователю, что изображение его профиля в полноэкранном режиме при нажатии на изображение профиля пользователя.

Просьба предложить мне, если есть plugin, или если есть информация, которая может мне помочь, я храню изображение в базе данных как base64 format.

Я использую Knockout js to bind image in Base64 format

Заранее спасибо

Answer 1

Если вы не хотите использовать какие-либо плагин, да, вы можете использовать простую технику jQuery Modal Window по менным. Используйте почти тот же код и делайте эти изменения.

<a class="image-thumb" href="image.jpg"> 
    <img src="image-thumb.jpg" alt="Image" /> 
</a> 

И в коде, вы можете изменить этот путь:

$('a.image-thumb').click(function(e) { 

Дальнейшие изменения для создания изображения, которое будет отображаться в модальном окне, вы можете сделать что-то вроде этого:

<div id="dialog" class="window"> 
    <img src="" alt="Image" /> 
</div> 

И вам нужно заменить это, используя JavaScript! Вместо того, чтобы:

$(id).fadeIn(2000); 

Используйте этот способ:

$(".window").find("img").attr("src", $(this).attr("href")); 
$(".window").fadeIn(2000); 

Там вы идете! :)