Menu icon Foundation
Using Megafolio with Foundation 5

I'm trying to use the Megafolio plugin from CodeCanyon, and when you insert the jquery at the bottom of the page, the gallery works fine until you insert this line of code for the foundation scripts:

<script type="text/javascript">
    		$(document).foundation();
			</script>

            

         

This is what my code looks like at the end of the body to load the jquery for Megafolio as well as foundations javascripts:

           <script src="js/vendor/jquery.js"></script>
    	    <script src="js/foundation.min.js"></script>
		    <script src="js/foundation/foundation.magellan.js"></script>

			
			<script type="text/javascript">


				jQuery(document).ready(function() {

					var api=jQuery('.megafolio-container').megafoliopro(
						{
							filterChangeAnimation:"fade",	// fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
							filterChangeSpeed:800,					// Speed of Transition
							filterChangeRotate:99,					// If you ue scalerotate or rotate you can set the rotation (99 = random !!)
							filterChangeScale:0.6,					// Scale Animation Endparameter
							delay:20,								// The Time between the Animation of single mega-entry points
							paddingHorizontal:20,					// Padding between the mega-entrypoints
							paddingVertical:20,
							layoutarray:[10]		// Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.

						});

					// CALL FILTER FUNCTION IF ANY FILTER HAS BEEN CLICKED
					jQuery('.filter').click(function() {	api.megafilter(jQuery(this).data('category'));    });

					// THE FANCYBOX PLUGIN INITALISATION
					jQuery(".fancybox").fancybox();
				});

				 

			</script>

			<script type="text/javascript">
			$(document).foundation();
			</script>
            

         

Any ideas? Anything at all?

megafoliojavascriptjqueiry

I'm trying to use the Megafolio plugin from CodeCanyon, and when you insert the jquery at the bottom of the page, the gallery works fine until you insert this line of code for the foundation scripts:

<script type="text/javascript">
    		$(document).foundation();
			</script>

            

         

This is what my code looks like at the end of the body to load the jquery for Megafolio as well as foundations javascripts:

           <script src="js/vendor/jquery.js"></script>
    	    <script src="js/foundation.min.js"></script>
		    <script src="js/foundation/foundation.magellan.js"></script>

			
			<script type="text/javascript">


				jQuery(document).ready(function() {

					var api=jQuery('.megafolio-container').megafoliopro(
						{
							filterChangeAnimation:"fade",	// fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
							filterChangeSpeed:800,					// Speed of Transition
							filterChangeRotate:99,					// If you ue scalerotate or rotate you can set the rotation (99 = random !!)
							filterChangeScale:0.6,					// Scale Animation Endparameter
							delay:20,								// The Time between the Animation of single mega-entry points
							paddingHorizontal:20,					// Padding between the mega-entrypoints
							paddingVertical:20,
							layoutarray:[10]		// Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.

						});

					// CALL FILTER FUNCTION IF ANY FILTER HAS BEEN CLICKED
					jQuery('.filter').click(function() {	api.megafilter(jQuery(this).data('category'));    });

					// THE FANCYBOX PLUGIN INITALISATION
					jQuery(".fancybox").fancybox();
				});

				 

			</script>

			<script type="text/javascript">
			$(document).foundation();
			</script>
            

         

Any ideas? Anything at all?

Rafi Benkual over 4 years ago

You can use the document ready method in the head instead:
$(document).ready(function()

To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event: $(document).ready(function()

This is why it is loaded at the top. As I understand it, this may not be a good "mobile first" solution as it asks the JS to load sooner and takes more bandwidth up-front.

Katherine Elsken over 4 years ago

I put the function up on the head of my document, but it still doesn't work. Here is the contents of my head section. Keep in mind I'm still kind of a rookie at this...

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>Jane Doe/ Photographer-Designer</title>
  <link rel="icon" type="image/png" href="images/sitelogo.png" />
   <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="fonts/style.css"
    <script src="js/vendor/modernizr.js"></script>

     <script type="text/javascript">
            jQuery(document).ready(function() {
                var api=jQuery('.megafolio-container').megafoliopro(
                    {
                        filterChangeAnimation:"fade",   // fade, rotate, scale, rotatescale, pagetop, pagebottom,pagemiddle
                        filterChangeSpeed:800,                  // Speed of Transition
                        filterChangeRotate:99,                  // If you ue scalerotate or rotate you can set the rotation (99 = random !!)
                        filterChangeScale:0.6,                  // Scale Animation Endparameter
                        delay:20,                               // The Time between the Animation of single mega-entry points
                        paddingHorizontal:20,                   // Padding between the mega-entrypoints
                        paddingVertical:20,
                        layoutarray:[10]        // Defines the Layout Types which can be used in the Gallery. 2-9 or "random". You can define more than one, like {5,2,6,4} where the first items will be orderd in layout 5, the next comming items in layout 2, the next comming items in layout 6 etc... You can use also simple {9} then all item ordered in Layout 9 type.

                    });
                // CALL FILTER FUNCTION IF ANY FILTER HAS BEEN CLICKED
                jQuery('.filter').click(function() {    api.megafilter(jQuery(this).data('category'));    });
                // THE FANCYBOX PLUGIN INITALISATION
                jQuery(".fancybox").fancybox();
            });

        </script>

    <!-- commented, remove this line to use IE & iOS favicons -->
    <link rel="shortcut icon" href="images/favicon.ico" />



    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>


    <!-- THE PREVIEW STYLE SHEETS -->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />


    <!-- MEGAFOLIO PRO GALLERY CSS SETTINGS -->
  <link rel="stylesheet" type="text/css" href="megafolio/css/settings.css" media="screen" />


     <!-- MEGAFOLIO PRO GALLERY JS FILES  -->
  <script type="text/javascript" src="megafolio/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="megafolio/js/jquery.themepunch.megafoliopro.js"></script>

    <!-- THE FANYCYBOX ASSETS -->
  <link rel="stylesheet" href="megafolio/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
  <script type="text/javascript" src="megafolio/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script>


    <!-- THE GOOGLE FONT LOAD -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>





</head>

Lynda Spangler over 4 years ago

I am using Megafolio and Foundation without a problem.

Try commenting out the jquery.themepunch.plugins.min.js script. I had to do that in my case for it to work correctly.

IE:

<!-- <script src="/js/megafolio/js/jquery.themepunch.plugins.min.js"></script> -->

I also added this to my CSS:

.mg-container{  /* This is the wrapper around the Megafolio Container*/
   max-width:1260px;
   min-width:240px;
   width:auto;
   margin:auto;
   padding:0px 30px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
}

.megafolio-container{  
  width:100%; 
   position:relative;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

My HTML:

<div class="mg-container">
   <div class="megafolio-container">

    <!-- GALLERY ENTRY CODE -->

   </div>
</div>


Katherine Elsken over 4 years ago

I figured it out! In my case I took out "js/vendor/jquery.js" from the body. Now everything works just fine. I guess your jquery can only come from one source?

Wing-Hou Chan over 4 years ago

Hey Katherine!

Hurrah! Glad that was sorted out.

It is usually preferable and recommended to use jQuery from one source. Although it is possible to use two jQuery sources with noConflict.

Broaden your knowledge here: https://api.jquery.com/jQuery.noConflict/ and here: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Happy coding and welcome to Foundation!