We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 29703
    • 217 Posts
    Hello everyone,

    I’m having a few problems with Maxigallery and I’m wondering if anyone could help me out.

    Basically I’m trying to combine two methods; the picture and thumbnails on the same page (http://wiki.modxcms.com/index.php/MaxiGallery#Picture_and_thumbnails_on_same_page"" target="_blank" rel="nofollow">link) and pulling images from other childgalleries.

    Everything works fine but I can’t get an image displayed on the page with the thumbnails until a thumbnail is clicked. I need the first image to be displayed by default but because all the images are in childgalleries the placeholder [+maxigallery.picture.filename+] doesn’t work.

    Anyone have any ideas?
      • 7923
      • 4,213 Posts


        "He can have a lollipop any time he wants to. That's what it means to be a programmer."
        • 29703
        • 217 Posts
        Hi, thanks for the reply.

        I’ve tried my best with what you gave me, but I’m as stuck as can be.

        This is basically what I have:

        mgGalleryPicture (chunk)

        <li>
               <a href="javascript:void(0);"
        onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+]);return
        false;">
                       <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
        class="thumbnail" title="[+maxigallery.picture.title:htmlent+]"
        alt="[+maxigallery.picture.title:htmlent+]" />
               </a>
        </li>


        mgJs (chunk)

        <script type="text/javascript">
        //<![CDATA[
        function showPic(url,title,descr,width,height) {
                $("#maxImage").fadeOut("fast", function(){
                	$("#maxImage").attr({
        			src: url,
        			width: width,
        			height: height
        		});
                	$(this).fadeIn("fast");
        	});
        	$("#maxTitle").html(title);
        	$("#maxDescr").html(descr);
        }
        //]]> 
        </script>


        mgPicture (chunk)

        <img id="maxImage[+maxigallery.picnumber+]"  src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" title="Click for full size" />
        
        [[Wayfinder?&startId=`24`&outerTpl=`portfolionavtpl`&level=1]]
        
        [+maxigallery.picture_link_url+]
        
        <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() { 
            $("#maxImage").onclick();
        });
        //]]> 
        </script>


        I’ve also called the Jquery library in the head (output is <script type="text/javascript" src="http://localhost/henryhoffman/assets/js/jquery-1.2.6.min.js"></script>)

        Any ideas? This is the first time I’ve used JQuery so there’s undoubtedly something appallingly easy that I’ve missed.

        Many thanks.
          • 7923
          • 4,213 Posts
          You need to have the id="maxImage[+maxigallery.picnumber+]" attribute in the mgGalleryPicture chunk in the link tag, not in mgPicture chunk.

          And you need to change the $("#maxImage").onclick(); to $("#maxImage1").onclick();


            "He can have a lollipop any time he wants to. That's what it means to be a programmer."
            • 29703
            • 217 Posts
            Thanks so much. Sorry for the delay, it’s been freshers week and all. . .

            I’ve been battling this for a while until realising I have the wrong version of Maxigallery. I got the 0.6 test, made your amendments and everything works fine.

            Thanks.

            Edit ->

            Nope, it seems I’m still having a problem.

            The main image isn’t picking up the first image in the childgallery automatically.

            <img id="maxImage"  src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" title="Click for full size" />


            This is a line from my mgPicture chunk and basically [+maxigallery.path_to_gal+], [+maxigallery.picture.filename+] and [+maxigallery.picture.title:htmlent+] aren’t returning anything.

            Any ideas?
              • 7923
              • 4,213 Posts
              Did you look that is there some javascript error coming up? the first image is changed via javascript you know.. By this specifically what is in your mgPicture chunk:

              <script type="text/javascript">
              //<![CDATA[
              $(document).ready(function() { 
                  $("#maxImage").onclick();
              });
              //]]> 
              </script>
              

              You did change that #maxImage to #maxImage1 like I told you, right?


                "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                • 29703
                • 217 Posts
                Hi, thanks for your help with this. I’m sure I’m just missing something obvious.

                I did change maxImage to maxImage1, here is what I have in total:

                mgGalleryPicture

                <li>
                       <a href="javascript:void(0);" id="maxImage[+maxigallery.picnumber+]"
                onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+]);return
                false;">
                               <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
                class="thumbnail" title="[+maxigallery.picture.title:htmlent+]"
                alt="[+maxigallery.picture.title:htmlent+]" />
                       </a>
                </li>


                mgJs

                <script type="text/javascript">
                //<![CDATA[
                function showPic(url,title,descr,width,height) {
                        $("#maxImage").fadeOut("fast", function(){
                        	$("#maxImage").attr({
                			src: url,
                			width: width,
                			height: height
                		});
                        	$(this).fadeIn("fast");
                	});
                	$("#maxTitle").html(title);
                	$("#maxDescr").html(descr);
                }
                //]]> 
                </script>


                mgPicture

                <img id="maxImage"  src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" title="Click for full size" />
                
                [[Wayfinder?&startId=`24`&outerTpl=`portfolionavtpl`&level=1]]
                
                [+maxigallery.picture_link_url+]
                
                <script type="text/javascript">
                //<![CDATA[
                $(document).ready(function() { 
                    $("#maxImage1").onclick();
                });
                //]]> 
                </script>


                Your help here is really appreciated, I’m so close.
                  • 7923
                  • 4,213 Posts
                  Seems ok for me.. is there some javascript error coming when you access the page for the first time?


                    "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                    • 29703
                    • 217 Posts
                    Hmm, yes it seems I’m getting the error:

                    Error: $(document).ready is not a function
                    Source File: http://localhost/henryhoffman/the-portfolio-of-web-and-print-designer-Henry-Hoffman.html
                    Line: 124


                    Does this mean anything to you?

                    Edit ->

                    Oops, seemingly that was the error when logged in as the manager. The error I get when not logged in is as follows:

                    Error: $("#maxImage1").onclick is not a function
                    Source File: http://localhost/henryhoffman/the-portfolio-of-web-and-print-designer-Henry-Hoffman.html
                    Line: 93
                      • 7923
                      • 4,213 Posts
                      hmm.. do you possibly have other js libraries also included to the page other than jquery? or do you have several different versions of jquery included to the page?


                        "He can have a lollipop any time he wants to. That's what it means to be a programmer."