Jquery GalleryView Inside Modal

Question

I am trying to load galleryView inside modal but it doesn't seem to be working.

Using galleryView by itself seems fine. I know this was asked before but I couldn't find solutions on other posts.

Anyone have a workable example of galleryView inside modal?

EDIT:

content += "<a href='#openModal'>Pictures</a>";

$(function(){
    $('#myGallery').galleryView();
});

content +=  '<div id="openModal" class="modalDialog">'+
                    '<div id="dialog">'+
                    '<a href="#close" title="Close" class="close">X</a>'+
                    '<h3>'+place.name+'</h3>'+
                    '<p>'+place.formatted_address+'</p>';

content += "<ul id='myGallery'>";

//Loop for thumbnail                                
for (var i = 0; i < place.photos.length; i++) {
    thumbnail = place.photos[i].getUrl({'maxWidth': 88, 'maxHeight': 88});
    content += "<li><img src='"+thumbnail+"' alt='"+place.name+"'/>";

}
content += "</ul>";

content +=  '</div></div>';

Inside Infowindow I was able to set content and I can display just fine, but when I attetmpt to use galleryView... it is no longer working. Just shows blank.

Any suggestions?

Please show us what you have tried. – Jasen Mar 03 '15 at 16:36 — Jasen, Mar 03 '15 at 16:36
Its pretty much what I tried. – MilkACow Mar 03 '15 at 17:45 — MilkACow, Mar 03 '15 at 17:45

Jagadesh K · Accepted Answer · 2015-03-03T18:06:50.887

Here is the simple dialog code which loads galleryview, i tested its working

  <script type="text/javascript">
    var place = {name:"first name ", formatted_address:"street address line 1"};
    place.photos = [{url:"http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg",name:"Lone Tree Yellowstone"},{url:"http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg",name:"Is He Still There?!"},{url:"http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg",name:"Noni Nectar For Green Gecko"},{url:"http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg",name:"Flight of an Eagle Owl"}];

    var content = "<a href='#openModal'>Pictures</a>";

    content +=  '<div id="openModal" class="modalDialog" style="display:none">'+
                        '<div id="dialog">'+
                        '<a href="#close" title="Close" class="close">X</a>'+
                        '<h3>'+place.name+'</h3>'+
                        '<p>'+place.formatted_address+'</p>';

    content += "<ul id='myGallery'>";

    //Loop for thumbnail                                
    for (var i = 0; i < place.photos.length; i++) {
        thumbnail = place.photos[i].url;
        content += "<li><img src='"+thumbnail+"' alt='"+place.photos[i].name+"'/>";

    }
    content += "</ul>";

    content +=  '</div></div>';

    $(function(){
        $( "#triggerdialog" ).on( "click", function() {
          $('#model-wrapper').html(content);          
        });
        $("body").on("click","a[href='#openModal']", function() {
            console.log("model click");
            $('#myGallery').galleryView();
            $("#dialog" ).dialog();
        });
    });
</script>

   <body>
    <button id="triggerdialog">Load Content</button>
    <div id="model-wrapper" />
</body>

Here is the updated answer as per your question

Darn.. not working. I am using infowindow inside google map v3. I am trying to display the images based on the selected "getDetails". I looped through the images just fine, but now I want to make it into a gallery.. but it is not working. — MilkACow, Mar 03 '15 at 17:00
wow thank you so much! CSS is really off, but I guess thats css side. Almost cried when I saw it working! Thanks thanks!!! — MilkACow, Mar 03 '15 at 18:46
I am glad that i helped you :) Yeah there is no css in this code. Please include jquery-ui.css, here is code . I really appreciate you , if you upvote my answer. Thanks — Jagadesh K, Mar 03 '15 at 19:00
Unfortunately I can't upvote yet.. in the future I'll revisit and upvote for sure....reason is that I'm not at 15 reputation yet to do that... Anyway, CSS issue saw caused by dialog().. so I can't use z-index or positions.. time to play around with css more. Can't thank you enough! — MilkACow, Mar 03 '15 at 19:44

Jquery GalleryView Inside Modal

1 Answers1