Magnific-Popup - Open link from array corresponding to respective photo div









up vote
0
down vote

favorite












EDIT: I've solved my question by rigging some code together. Answers still welcome, but I've solved this for the time being. See the last section for the code.
------------------------------------------------------------------------------------------------------------------------------------



I'm attempting to open a given div that corresponds to an index within an array of web links.



The concept is simple: the divs contain a photo, and when the photo div is selected, magnific popup will do its thing and then open the corresponding link from the index.



Unfortunately, I am only able to get divIndex[0] and webLinkIndex[0] to open on any given div click selection.



If I'm not being clear enough, I apologize; if there are questions, please ask me to clarify.



I used developer tools to narrow down where the click is occurring and attempted to make my own function to handle this.



Feel free to make any modifications.



Code snippets below:



 //CLICK FUNCTION 
_openClick: function(e, el, options) e.metaKey ) )
return;


var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;

if(disableOn)
if($.isFunction(disableOn))
if( !disableOn.call(mfp) )
return true;

else // else it's number
if( _window.width() < disableOn )
return true;




if(e.type)
e.preventDefault();

// This will prevent popup from closing if element is inside and popup is already opened
if(mfp.isOpen)
e.stopPropagation();




options.el = $(e.mfpEl);
if(options.delegate)
options.items = el.find(options.delegate);

mfp.open(options);


this.smugSmugLinkClick(el);

,

///OPEN SMUGMUG LINKS FROM DIV CLICK
smugSmugLinkClick: function(el)

**///FEEL FREE TO POST CODE IN HERE TO MAKE THIS WORK**

,


And here is the array of web links



 ///SmugMug Links to iterate over for Gallery Page
var smugMugLinks = [
"https://xxx.smugmug.com/Gallery/photo1",
"https://xxx.smugmug.com/Gallery/photo2",
"https://xxx.smugmug.com/Gallery/photo3",
"https://xxx.smugmug.com/Gallery/photo4",
];



------------------------------------------------------------------------------------------------------------------------------------EDIT: Answers still accepted, but some spaghetti code did the trick for this one isolated incident:



 ///DIV INDEX --> SMUGMUGLINK INDEX
if (window.location.pathname === "/gallery/")

const childs = $(e.currentTarget).parent().parent().parent().children()

const href = $(e.currentTarget).attr("href")

childs.each((i, element) =>

const divHref = $($(element).find("div")[0]).find("a")[0].href
if (divHref === href)
window.open(smugMugLinks[i])

)










share|improve this question



























    up vote
    0
    down vote

    favorite












    EDIT: I've solved my question by rigging some code together. Answers still welcome, but I've solved this for the time being. See the last section for the code.
    ------------------------------------------------------------------------------------------------------------------------------------



    I'm attempting to open a given div that corresponds to an index within an array of web links.



    The concept is simple: the divs contain a photo, and when the photo div is selected, magnific popup will do its thing and then open the corresponding link from the index.



    Unfortunately, I am only able to get divIndex[0] and webLinkIndex[0] to open on any given div click selection.



    If I'm not being clear enough, I apologize; if there are questions, please ask me to clarify.



    I used developer tools to narrow down where the click is occurring and attempted to make my own function to handle this.



    Feel free to make any modifications.



    Code snippets below:



     //CLICK FUNCTION 
    _openClick: function(e, el, options) e.metaKey ) )
    return;


    var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;

    if(disableOn)
    if($.isFunction(disableOn))
    if( !disableOn.call(mfp) )
    return true;

    else // else it's number
    if( _window.width() < disableOn )
    return true;




    if(e.type)
    e.preventDefault();

    // This will prevent popup from closing if element is inside and popup is already opened
    if(mfp.isOpen)
    e.stopPropagation();




    options.el = $(e.mfpEl);
    if(options.delegate)
    options.items = el.find(options.delegate);

    mfp.open(options);


    this.smugSmugLinkClick(el);

    ,

    ///OPEN SMUGMUG LINKS FROM DIV CLICK
    smugSmugLinkClick: function(el)

    **///FEEL FREE TO POST CODE IN HERE TO MAKE THIS WORK**

    ,


    And here is the array of web links



     ///SmugMug Links to iterate over for Gallery Page
    var smugMugLinks = [
    "https://xxx.smugmug.com/Gallery/photo1",
    "https://xxx.smugmug.com/Gallery/photo2",
    "https://xxx.smugmug.com/Gallery/photo3",
    "https://xxx.smugmug.com/Gallery/photo4",
    ];



    ------------------------------------------------------------------------------------------------------------------------------------EDIT: Answers still accepted, but some spaghetti code did the trick for this one isolated incident:



     ///DIV INDEX --> SMUGMUGLINK INDEX
    if (window.location.pathname === "/gallery/")

    const childs = $(e.currentTarget).parent().parent().parent().children()

    const href = $(e.currentTarget).attr("href")

    childs.each((i, element) =>

    const divHref = $($(element).find("div")[0]).find("a")[0].href
    if (divHref === href)
    window.open(smugMugLinks[i])

    )










    share|improve this question

























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      EDIT: I've solved my question by rigging some code together. Answers still welcome, but I've solved this for the time being. See the last section for the code.
      ------------------------------------------------------------------------------------------------------------------------------------



      I'm attempting to open a given div that corresponds to an index within an array of web links.



      The concept is simple: the divs contain a photo, and when the photo div is selected, magnific popup will do its thing and then open the corresponding link from the index.



      Unfortunately, I am only able to get divIndex[0] and webLinkIndex[0] to open on any given div click selection.



      If I'm not being clear enough, I apologize; if there are questions, please ask me to clarify.



      I used developer tools to narrow down where the click is occurring and attempted to make my own function to handle this.



      Feel free to make any modifications.



      Code snippets below:



       //CLICK FUNCTION 
      _openClick: function(e, el, options) e.metaKey ) )
      return;


      var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;

      if(disableOn)
      if($.isFunction(disableOn))
      if( !disableOn.call(mfp) )
      return true;

      else // else it's number
      if( _window.width() < disableOn )
      return true;




      if(e.type)
      e.preventDefault();

      // This will prevent popup from closing if element is inside and popup is already opened
      if(mfp.isOpen)
      e.stopPropagation();




      options.el = $(e.mfpEl);
      if(options.delegate)
      options.items = el.find(options.delegate);

      mfp.open(options);


      this.smugSmugLinkClick(el);

      ,

      ///OPEN SMUGMUG LINKS FROM DIV CLICK
      smugSmugLinkClick: function(el)

      **///FEEL FREE TO POST CODE IN HERE TO MAKE THIS WORK**

      ,


      And here is the array of web links



       ///SmugMug Links to iterate over for Gallery Page
      var smugMugLinks = [
      "https://xxx.smugmug.com/Gallery/photo1",
      "https://xxx.smugmug.com/Gallery/photo2",
      "https://xxx.smugmug.com/Gallery/photo3",
      "https://xxx.smugmug.com/Gallery/photo4",
      ];



      ------------------------------------------------------------------------------------------------------------------------------------EDIT: Answers still accepted, but some spaghetti code did the trick for this one isolated incident:



       ///DIV INDEX --> SMUGMUGLINK INDEX
      if (window.location.pathname === "/gallery/")

      const childs = $(e.currentTarget).parent().parent().parent().children()

      const href = $(e.currentTarget).attr("href")

      childs.each((i, element) =>

      const divHref = $($(element).find("div")[0]).find("a")[0].href
      if (divHref === href)
      window.open(smugMugLinks[i])

      )










      share|improve this question















      EDIT: I've solved my question by rigging some code together. Answers still welcome, but I've solved this for the time being. See the last section for the code.
      ------------------------------------------------------------------------------------------------------------------------------------



      I'm attempting to open a given div that corresponds to an index within an array of web links.



      The concept is simple: the divs contain a photo, and when the photo div is selected, magnific popup will do its thing and then open the corresponding link from the index.



      Unfortunately, I am only able to get divIndex[0] and webLinkIndex[0] to open on any given div click selection.



      If I'm not being clear enough, I apologize; if there are questions, please ask me to clarify.



      I used developer tools to narrow down where the click is occurring and attempted to make my own function to handle this.



      Feel free to make any modifications.



      Code snippets below:



       //CLICK FUNCTION 
      _openClick: function(e, el, options) e.metaKey ) )
      return;


      var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;

      if(disableOn)
      if($.isFunction(disableOn))
      if( !disableOn.call(mfp) )
      return true;

      else // else it's number
      if( _window.width() < disableOn )
      return true;




      if(e.type)
      e.preventDefault();

      // This will prevent popup from closing if element is inside and popup is already opened
      if(mfp.isOpen)
      e.stopPropagation();




      options.el = $(e.mfpEl);
      if(options.delegate)
      options.items = el.find(options.delegate);

      mfp.open(options);


      this.smugSmugLinkClick(el);

      ,

      ///OPEN SMUGMUG LINKS FROM DIV CLICK
      smugSmugLinkClick: function(el)

      **///FEEL FREE TO POST CODE IN HERE TO MAKE THIS WORK**

      ,


      And here is the array of web links



       ///SmugMug Links to iterate over for Gallery Page
      var smugMugLinks = [
      "https://xxx.smugmug.com/Gallery/photo1",
      "https://xxx.smugmug.com/Gallery/photo2",
      "https://xxx.smugmug.com/Gallery/photo3",
      "https://xxx.smugmug.com/Gallery/photo4",
      ];



      ------------------------------------------------------------------------------------------------------------------------------------EDIT: Answers still accepted, but some spaghetti code did the trick for this one isolated incident:



       ///DIV INDEX --> SMUGMUGLINK INDEX
      if (window.location.pathname === "/gallery/")

      const childs = $(e.currentTarget).parent().parent().parent().children()

      const href = $(e.currentTarget).attr("href")

      childs.each((i, element) =>

      const divHref = $($(element).find("div")[0]).find("a")[0].href
      if (divHref === href)
      window.open(smugMugLinks[i])

      )







      javascript jquery wordpress magnific-popup






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 10 at 4:26

























      asked Nov 10 at 2:37









      pythlang

      84113




      84113



























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235562%2fmagnific-popup-open-link-from-array-corresponding-to-respective-photo-div%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235562%2fmagnific-popup-open-link-from-array-corresponding-to-respective-photo-div%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Darth Vader #20

          How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

          Ondo