We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 30879
    • 40 Posts
    time for me to try and give a bit back to the community.

    ive worked out how to incorporate fancy box with maxigallery. pretty easy solution (after i spent hours stumbling)

    ive created a TV call customscripts that i can insert custom head tags of my choice
    so i added the calls to fancybox (i also use fancy box with direct resize s i thought id just call it from there. as it works perfectly.)

    <script type="text/javascript" src="assets/plugins/directresize/libs/frameworks/jquery.js"></script>
    <script type="text/javascript" src="assets/plugins/directresize/libs/fancybox/jquery.fancybox-1.0.0.js"></script>
    <!--[if lt IE 7]>
    <script type="text/javascript" src="assets/plugins/directresize/libs/fancybox/jquery.pngFix.pack.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="assets/plugins/directresize/libs/fancybox/fancy.css" type="text/css" media="screen" />
     
    <script type="text/javascript">
     
    jQuery.noConflict();
         
     
       </script>
     
    <script type="text/javascript"> 
    	jQuery(document).ready(function() { 
    		jQuery("a.fancybox").fancybox();
    	}); 
    </script>
    





    i also created a chunk called fancymaxi and it contained

    <li>
        <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="fancybox" rel="gallery">
            <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
            [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
        </a>
        [+maxigallery.picture.title:isnot=``:then=`
            <p style="width: [+maxigallery.picture_width_thumb+]px;">
                [+maxigallery.picture.title:htmlent+]
            </p>
        `+]
    </li>
    
    


    then i made my call to show the gallery contents

    [!MaxiGallery? &display=`embedded` &embedtype=`external` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1` &galleryPictureTpl=`fancymaxi`!]
    


    and there you have it!! working sweet!






    My next challenge which im stuck with is getting it to work with the quick edit menu enabled.

    Ive read that we should cange all the other scripts to suit it but is there a way of changing IT so its more compatible with the other scripts?
    • Nice!
        palma non sine pulvere
      • My next challenge which im stuck with is getting it to work with the quick edit menu enabled.

        Ive read that we should cange all the other scripts to suit it but is there a way of changing IT so its more compatible with the other scripts?
        Evolution 1.0 comes with a nice new front-end editing system, although I’m not familiar with how it interacts with custom javascript.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 26931
          • 2,314 Posts
          Hi Tworak,

          thanks for the setup!

          My next challenge which im stuck with is getting it to work with the quick edit menu enabled.

          you probably need to run jQuerys in noconflict-mode:
          http://docs.jquery.com/Using_jQuery_with_Other_Libraries

          j
            • 7923
            • 4,213 Posts
            Thanks ALOT for writing this up! Good job!

            Quote from: tworak at Jul 15, 2009, 07:20 AM

            My next challenge which im stuck with is getting it to work with the quick edit menu enabled.
            QuickEdit uses MooTools. You should be okay if you use jQuery in noConflict mode, as you seem to be using already. Maybe there’s a problem in the order which the JS libraries are added.. I believe you need to include jQuery before MooTools in <head> and also set it to noConflict mode before including MooTools. The Evo 1.0 front end editing snippet is QuickManager+ (or some updated version of it) AFAIK.. It uses jQuery. You might want to give the Evo SVN version a go..


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

              yeah ill check out the order of the scripts.

              I was running it in no conflict mode - but i wasnt to sure what fancy box calls throughout the code were made that i had to adjust $ to JQuery

              it was late maybe ill dig further today smiley

              in regards t the SVN of revolution - especially with 1.00 released the other day.


              Is the SVN ok to use in a live website? i wasnt sure how buggy and unpolished it was?
                • 7923
                • 4,213 Posts
                No, I didn’t mean Revolution SVN version, I meant Evolution svn version (see http://modxcms.com/develop/source.html). Evolution is the next version from current MODx. Revolution is a total rewrite running on xPDO.


                  "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                  • 2632
                  • 18 Posts
                  my is not working i followed the how instruction but abit confuse on the part of template variable (tv) i create the tv this how my tv looks like
                  <script type="text/javascript" src="assets/fancybox/jquery.js"></script> <script type="text/javascript" src="assets/fancybox/jquery.fancybox-1.0.0.js"></script> <!--[if lt IE 7]> <script type="text/javascript" src="assets/fancybox/jquery.pngFix.pack.js"></script> <![endif]--> <link rel="stylesheet" href="assets/fancybox/fancy.css" type="text/css" media="screen" />   <script type="text/javascript">   jQuery.noConflict();            </script>   <script type="text/javascript">  	jQuery(document).ready(function() {  		jQuery("a.fancybox").fancybox(); 	});  </script>


                    • 7923
                    • 4,213 Posts
                    Check your browser js log for possible errors.. Just saying "my is not working" is a bit vague to start figuring out what’s the problem. Please post what are your exact problems.


                      "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                    • Great! Exactly what I was looking for.
                        ----
                        Daniel Melo