We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

How to get onclick to work?

    • 17097
    • 41 Posts
    libralion Reply #1, 15 years, 10 months ago
    Hi everybody,
    All week I am trying to figure out how Modx works and although it isnot simple for me, I think it is the best CMS I have seen so far.
    Now I am trying to get a picture on my testsite. I want a bigger picture to popup when you click on the small picture on the site. In HTML I normally use this code:

    <a href="http://www.jomedio.nl/images/gray_small1.JPG" onclick="window.open(’http://www.jomedio.nl/images/gray.JPG’,’jevensternaam’,
    ’width=620,height=550,scrollbars=no’); return false">
    <img border="0" src="images/gray_small1.JPG" xthumbnail-orig-image="images/gray.JPG" width="100" height="88"></a>

    But that doesnot work. How do I get it to work?
    This is my testsite: http://www.jomedio.nl/modx/index.php

    And here you can see what I mean:
    http://www.jomedio.nl
    • AugmentBLU Reply #2, 15 years, 10 months ago
      Do you have the javascript in the head of the document?
        Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
        AugmentBLU - MODX Partner

        BLUcart - MODX Revolution E-Commerce & Shopping Cart
        • 17097
        • 41 Posts
        libralion Reply #3, 15 years, 10 months ago
        Quote from: rossco at Jun 29, 2008, 09:14 AM

        Do you have the javascript in the head of the document?

        No. I have a TV for the right column and I tried to put the code in the Default Value field, but that doesnot work.
        But how do you mean, do I have the javascriptcode in the head of the document? Is there a specific javascriptcode that I also have to put in the head of the document?
        • AugmentBLU Reply #4, 15 years, 10 months ago
          To open up popups usually require some sort of JS.

          You could use this example.

          In the <head> of your template put

          <script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>


          and in the <body>
          <img src="mythumb.jpg" alt="name of image" width="150" height="150" onclick="MM_openBrWindow('myimage.jpg','mypopup','width=800,height=800')" />


          Something like that should work

          EDIT : You could always try one of the many lightbox scripts that are out? Your users might have a popup blocker on, stopping the images appearing.

          Check my simply gallery out to see what I mean. Click the yellow links under the thumbs.

          http://www.rossco-designs.com/gallery
            Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
            AugmentBLU - MODX Partner

            BLUcart - MODX Revolution E-Commerce & Shopping Cart
            • 17097
            • 41 Posts
            libralion Reply #5, 15 years, 10 months ago
            The popup works! Thanks.
            But for some reason the thumbnail gives a red cross. I checked if it is in the right folder and it is, so I don’t know why it isnot showing.
            This is the code I used in the page:

            <img src="assets/images/gray_small1.JPG" alt="gray_small" width="100" height="86" onclick="MM_openBrWindow('assets/images/gray.JPG','mypopup','width=580,height=510')"


            What was also weird is that I had to remove the "/> at the end, because else it was showing on the page.
            • AugmentBLU Reply #6, 15 years, 10 months ago
              Try validating your page and see if there is missing or extra tags in your code that is causing the "/> problem.

              As for the missing image... type the /assets/images/gray_small1.JPG in to the end of your url in your broswer to make sure it’s being found. If it’s not showing up then it must be a wrong link. Double check it’s not jpg instead of JPG.

              EDIT :I just type in http://www.jomedio.nl/modx/assets/images/gray_small1.JPG and it’s found... if you are using the site that’s not in the modx directory you need to copy the images over

              if you copy your source here I can look through it for you.
                Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
                AugmentBLU - MODX Partner

                BLUcart - MODX Revolution E-Commerce & Shopping Cart
                • 17097
                • 41 Posts
                libralion Reply #7, 15 years, 10 months ago
                You mean the code for the template, right?
                Here it is:

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
                <head>
                <meta http-equiv="content-type" content="text/html; charset=[(etomite_charset)]" />
                <title>[(site_name)] ~ [*pagetitle*]</title>
                <link rel="stylesheet" type="text/css" href="assets/templates/Blossom/style/blossom.css" />
                <!--[if lte IE 6]>
                <style type="text/css" media="screen, tv, projection">
                body { behavior: url(assets/js/csshover.htc); }
                </style>
                <script type="text/javascript" src="assets/js/sleight.js"></script>
                <![endif]-->

                <script type="text/javascript">
                <!--
                function MM_openBrWindow(theURL,winName,features) { //v2.0
                  window.open(theURL,winName,features);
                }
                //-->
                </script>

                </head>
                <body>
                <div id="wrapper1">
                <div id="header">
                <div id="logo"><h1>[(site_name)]</h1> <h2>[*pagetitle*]</h2></div>
                <div id="nav">[!Wayfinder?&startId=`0`&level=1!]</div>


                </div> <!-- end header -->
                </div> <!-- end wrapper1 -->

                <div id="wrapper2">
                <div id="content">
                [*content*]
                </div> <!-- end content -->
                <div id="content-right">
                [*content-right*]
                </div>
                <div id="content-right2">
                [*content-right2*]
                </div>
                <div id="clear">&nbsp;</div>
                </div> <!-- end wrapper2 -->
                <div id="footer">{{Footer}}</div>
                </body>
                </html>

                And the TV for the content-right is:

                <img src="assets/images/gray_small1.JPG" alt="gray_small" width="100" height="86" onclick="MM_openBrWindow(’assets/images/gray.JPG’,’mypopup’,’width=580,height=510’)"/>


                Maybe else I better use the MaxiGallery?
                • AugmentBLU Reply #8, 15 years, 10 months ago
                  Everything looks ok... have you tried using a {{chunk}} instead of a TV to see if that solves your problem?

                  Maxigallery is a really nice snippet, you should give that a shot. It would make your life easier if you want galleries and nice looking lightbox scripts.



                  <div id="content-right">
                  <img src="<img src="assets/images/gray_small1.JPG" alt="gray_small" width="100" height="86" onclick="MM_openBrWindow(’assets/images/gray.JPG’,’mypopup’,’width=580,height=510’)"/>" />
                  </div>

                  i see a problem lol... i’m not with it today.

                  <img src="<img src=" is wrong. and the end "/> "/>
                    Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
                    AugmentBLU - MODX Partner

                    BLUcart - MODX Revolution E-Commerce & Shopping Cart
                    • 17097
                    • 41 Posts
                    libralion Reply #9, 15 years, 10 months ago
                    That is weird with the double img thing. The software does that by itself. When I remove the <img= from the TV code it doesnot work anymore.
                    So I think you are right. I will try the maxiGallery.
                    Thanks for all your time! smiley
                    • AugmentBLU Reply #10, 15 years, 10 months ago
                      I have been thinking about why you are calling the image via a tv... what options are you choosing for your TV? I’m thinking it’s the TV option you have chosen that is adding the extra tags. It will work fine in a chunk, then call the chunk from the TV myimage=={{mychunk}}

                      Go with MaxiGallery if you plan on using lots of images on your site and the added benefit of the lightbox will be a great addition to your site.
                        Ross Sivills - MD AugmentBLU Edinburgh, Scotland UK
                        AugmentBLU - MODX Partner

                        BLUcart - MODX Revolution E-Commerce & Shopping Cart