javascriptjquerycordovaphonegap-pluginskendo-mobile

Image show in full size when click

I am using kendo mobile with cordova plugins to build my application.

I have scenario that I need to show the user that his/her profile image in full screen when clicked on user Profile picture.

Please suggest me if any plugin is available or if there any information that might help me,I am storing image in database as base64 format.

I am using Knockout js to bind image in Base64 format

Thanks in Advance

Solution

  • If you don't wanna use any plugins, yes, you can use the simple jQuery Modal Window technique by Queness. Use almost the same code, and do these changes.

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

    And in the code, you can change this way:

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

    Further changes for making the image to be displayed in the modal window, you can do something like this:

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

    And you need to replace that using the JavaScript! Instead of:

    $(id).fadeIn(2000);

    Use this way:

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

    There you go! :)