Search code examples
knockout.jsprettyphoto

prettyPhoto with knockOut

I'm using knockoutjs to bind data from server for a photo gallery. When I use prettyphoto with this gallery it does not work. Here is the code:

<div class="gallery">
    <div class="gcontent" data-bind="with: gList">
        <ul id="plist" class="thumbs"  data-bind="foreach: rows">
            <li class="dd">                    
                <div class="thumb">
                    <img width="140" height="100"  data-bind="attr:{src: '/Uploads/media/Images/'+Id+Pic, alt:Title }">
                    <div class="thumbcon">
                        <div class="con">
                            <a data-bind="attr:{href: '/Uploads/media/Images/'+Id+Pic, title:Title}" rel='prettyPhoto[gallery]'>
                                show</a>
                        </div>
                    </div>
                </div>
            </li>                
        </ul>
    </div>
</div>

Is there a solution for this issue?

Solution

  • In case that someone else is facing the same problem. The problem was that ajax is not finishing and the data is not ready before calling prettyPhoto .. to fix it you have to wait until the ajax call finish.

    example:

    $.getJSON(_serviceURL(), function (data) {
if (data != null) {
......
$(document).ready(function () {$("area[rel^='prettyPhoto']").prettyPhoto();}                    
else {
......
}
});