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

JavaScript

Benjamin Martin
Benjamin Martin
17,582 Points
Posted by 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

https://w.trhou.se/yps0ic1i2v

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

Chyno Deluxe
Chyno Deluxe
16,936 Points

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
  if($button.hasClass("button2")){
    //change index to 1 
    i = 1;
  }

  //initialize magnificPopup
  $button.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>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  closeBtnInside:  false,
}).magnificPopup('open');
});

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

Benjamin Martin
Benjamin Martin
17,582 Points
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
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.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Glad I could help.