Hey,

iam tryning to do a gallery ware images are listede on a category page ware a macro list all images, and to images large the images ned to popup.. but i cant ger image nr 2 to function , i belive it has som to do whirt the use om ID="pop".

you can se it in action at this Webpage

It is the way i nowe howe to do.

Site information:

Umbraco v6.2.4 (Assembly version: 1.0.5394.15649)

running on CE database

Macro:

@inherits umbraco.MacroEngines.DynamicNodeContext

@* Ensure that the Current Page has children, where the property umbracoNaviHide is not True *@
@if (Model.Children.Where("Visible").Any())
{
    <ul class="CleanURl">            
        @* For each child page under the root node, where the property umbracoNaviHide is not True *@
        @foreach (var childPage in Model.Children.Where("Visible"))
        {
           <div class="ListGalleryMasterDiv">               
             <a href="#" id="pop" runat="server"><img class="ListGalleryImage" src="@childPage.image" /></a>  
                     
                 <div id="overlay_form" style="display: none; z-index:100;">
                        <table>
                            <tr>
                               <td>
                                   <img class="GalleryImage"  src="@childPage.image" />
                              </td>
                          </tr>
                          <tr>
                               <td><a class="GalleryImageClose" href="#" id="close">Luk Billede</a></td>
                            </tr>
                      </table>
                    </div>
           </div>                                       
        }
    </ul>
}

Script on master page

<!--Popup Script Start -->
    <script type="text/javascript">
        $(document).ready(function () {
            //open popup
            $("#pop").click(function () {
                $("#overlay_form").fadeIn(1000);
                positionPopup();
            });
            //close popup
            $("#close").click(function () {
                $("#overlay_form").fadeOut(500);
            });
        });
        //position the popup at the center of the page
        function positionPopup() {
            if (!$("#overlay_form").is(':visible')) {
                return;
            }
            $("#overlay_form").css({
                left: ($(window).width() - $('#overlay_form').width()) / 2,
                top: ($(window).width() - $('#overlay_form').width()) / 7,
                position: 'absolute'
            });
        }
        //maintain the popup at center of the page when browser resized
        $(window).bind('resize', positionPopup);
    </script>
    <!--Popup Script Stop -->