Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Benjamin Martin
Benjamin Martin
17,582 Points

How to DRY up my code used to initialize a JS plugin

I'm testing some code to add to a restaurant site.

Here is my snapshot


The JS plugin I'm practicing using is called magnific-pop-up if that matters. I'm not sure how to simplify the code at the bottom of app.js so I'm not almost exactly repeating a huge chunk of code except for a different anchor and a different index number. I was thinking I could make a function with the index number as an argument? Then call the function from each anchor with the appropriate arguement but I can't make it work.

Additionally, I don't want each link to the pop-up to create their own new popup. I only want the first time it's accessed to. Then I want the rest to return there at the proper index. I don't want it to be needlessly ineffecient.

Can anyone help me with this?

This is the magnific-pop-up documentation page: http://dimsemenov.com/plugins/magnific-popup/documentation.html

1 Answer

Hello Benjamin,

Here is how I would write your code. https://w.trhou.se/cx4wp5w2kw

var button1 = $(".button1"),
    button2 = $(".button2"),
    buttons = button1.add(button2);

buttons.on("click", function(){
  var $button = $(this), 
      i = 0;

  //check button class
  //if class is button2
    //change index to 1 
    i = 1;

  //initialize magnificPopup
  key: 'my-popup', 
  items: data,
  // index is equal to i value
  index: i,
  type: 'inline',
  inline: {
    // Define markup. Class names should match key names.
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
                '<div class="mfp-itemimg"></div>'+
                '<p class="mfp-itemname"></p>'+
                '<p class="mfp-itemdescription"></p>'+
                '<p class="mfp-itemingredients"></p>'+
  gallery: {
    enabled: true 
  closeBtnInside:  false,

While this still has plenty of room for improvement, it prevents you from having to repeat yourself.

Benjamin Martin
Benjamin Martin
17,582 Points

Is there an error in the code? Because I just tried to copy and paste it into my workspace and it doesn't fire magnificPopup

Benjamin Martin
Benjamin Martin
17,582 Points

There was an error :) It was mine. I had other changes made to this workspace, and it looks like only some of them took. SO I think I had to have two copies of it open and left one on for a while and it autosaved, or I saved it manually after I saved the original. Or something like that. Kind of a bummer but thems the breaks.

Long story short I just needed to change the items value from data to dishesData.

Thanks man I really appreciate it.

Glad I could help.