Poptrox Add Clickable Link/button

I am working with poptrox and would like to add a button or link the iframe when it pops up. I need to be able to pick what pop ups have the extra button to. I would like the butto

Solution 1:

Could you please add some code of your scenario then we can know a little about it?

I undestand you want to build a gallery using Poptrox but I don't know what you really miss.

For now maybe this snippet helps you. Give me a little more info and we can edit over it to see if we can give your solution.

$(function() {
  $('#gallery').poptrox({
    usePopupCaption: true,
    usePopupNav: true,
    popupPadding: 0
  });
});

html, body {
  background: #333;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Open Sans;
}

h1, h2 {
  font-weight: 200;
  padding: 0;
  color: #fff;
}

h1 {
  font-size: 40px;
  margin: 10px;
}

h2 {
  font-size: 18px;
  text-align: center;
  margin: 10px0;
}

a {
  color: #ccc;
  font-size: 11px;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
  text-decoration: none;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}
a:hover {
  opacity: .7;
}

section:first-child {
  margin-top: 15px;
}

.devmount {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  font: 17px Arial;
  color: #fff;
  padding: 10px40px10px0;
  margin-right: 10px;
  background: url(http://media.devmount.de/devmount_small_light.png) right center no-repeat;
  -webkit-transition: background-position .3s, color .3s;
  transition: background-position .3s, color .3s;
}
.devmountspan {
  position: absolute;
  right: 3px;
  color: transparent;
  -webkit-transition: inherit;
  transition: inherit;
}
.devmount:hover {
  opacity: 1;
  background-position: left center;
  color: transparent;
}
.devmount:hoverspan {
  color: #fff;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://rawgit.com/n33/jquery.poptrox/master/jquery.poptrox.js"></script><divid="gallery"><!-- Regular images --><section><!-- image 1--><ahref="http://placehold.it/500/09f/fff.png"><imgsrc="http://placehold.it/100/09f/fff.png&amp;text=image1"alt=""title="Just an image (#1)"/></a><!-- image 2--><ahref="http://placehold.it/500/0bf/fff.png"><imgsrc="http://placehold.it/100/0bf/fff.png&amp;text=image2"alt=""title="Just an image (#2)"/></a><!-- image 3--><ahref="http://placehold.it/500/0df/fff.png"><imgsrc="http://placehold.it/100/0df/fff.png&amp;text=image3"alt=""title="Just an image (#3)"/></a></section><section><!-- YouTube: Must be in share format (http://youtu.be/xxxxxxxxxxx) --><ahref="http://youtu.be/loGm3vT8EAQ"data-poptrox="youtube,800x480"><imgsrc="http://placehold.it/100/CC181E/fff.png&amp;text=youtube"alt=""title="A YouTube Video"/></a><!-- Vimeo: Must be in share format (http://vimeo.com/xxxxxxxx) --><ahref="http://vimeo.com/22439234"data-poptrox="vimeo,800x480"><imgsrc="http://placehold.it/100/69C8CE/fff.png&amp;text=vimeo"alt=""title="A Vimeo Video"/></a><!-- Soundcloud: Must be in share format (https://api.soundcloud.com/tracks/xxxxxxxx) --><ahref="http://api.soundcloud.com/tracks/93549370"data-poptrox="soundcloud"><imgsrc="http://placehold.it/100/FF5500/fff.png&amp;text=soundcloud"alt=""title="A Soundcloud Track"/></a></section><section><!-- IFRAME: Link straight to whatever page you want to open --><ahref="#"data-poptrox="iframe,600x400"><imgsrc="http://placehold.it/100/07f/fff.png&amp;text=iframe"alt=""title="An IFRAME"/></a><!-- AJAX: Link to whatever content you want to pull in (must be on the same domain)  --><ahref="#"data-poptrox="ajax,600x400"><imgsrc="http://placehold.it/100/07f/fff.png&amp;text=ajax"alt=""title="AJAX content"/></a><!-- Ignore: Use this if you want a particular thumbnail to just link out to something --><ahref="http://www.jqueryscript.net"data-poptrox="ignore"><imgsrc="http://placehold.it/100/07f/fff.png&amp;text=ignore"alt=""/></a></section></div><aclass="devmount"href="http://devmount.de"target="_blank">created by<span>devmount</span></a>

---

UPDATE

Let me give you a hand with your purpose now that I understand what you need.

Poptrox use his own methods. As you see there you can not only use to show images. But customization need to follow 'Poptrox rules'. You see it takes the image from href tag when you are using the gallery option so the posibilities are not much for customization.

First I recommend to you is give a look here https://www.w3schools.com/howto/howto_css_modals.asp to know the basis about how modal dialogs works. It Will give you a better comprehension. Now, about Poptrox. If you go Poptrox documentation: https://github.com/ajlkn/jquery.poptrox

Your options to give a customization of the modal dialog could be

IFRAMEs

Linkformat: Anything.
Type: iframe
Example:

<ahref="path/to/whatever.html"data-poptrox="iframe,600x400"><imgsrc="path/to/thumbnail.jpg" /></a>

AJAX Content

Link format: Anything (aslongas it's on the same domain)Type: ajax
Example:

<a href="path/to/whatever.html" data-poptrox="ajax,600x400"><img src="path/to/thumbnail.jpg" /></a>

Iframes open an 'iframe'. AJAX is basically the same but Ajax do it asyncronous. Asyncronous means that it request to the server but he doesnt wait response to continue with execution.

Knowing it. You can configure your output HTML file with buttons, links using HTML. And show it in your modal, I think the best is to do it using ajax option.

Check this example I have done and sorry my english I am not native english speaker.

Solution 2:

you can also add href instead of simple text in title change your code as:

<!-- image 1--><ahref="http://placehold.it/500/09f/fff.png"><imgsrc="http://placehold.it/100/09f/fff.png&amp;text=image1"alt=""title="<a href='https://freefrontend.com/'>Just an image (#1)</a> /></a>

This will now act as link only if the following changes are made.....

up untill now you would have come across a file "jquery.poptrox.min.js" , In that file find "captionText: r.attr('title')," and change that to "captionText: $.parseHTML(r.attr('title')),". now jQuery will parse the content of the title attribute as href instead of plain text.