jquery lightbox opening HTML content instead of an image - javascript

is it possible to open a lightbox window which contains HTML content rather than just an image like in the demos?
The example listed:
Image #1
Will open the image image-1.jpg in a new lightbox window.
Is there a way using this plugin to do something like this:
View content
<div id="mycontent">I am some content</div>
And then have the div mycontent be shown in the lightbox window when clicking the link?

Lightbox supports images only.
There are alternative scripts that allow you to show HTML content.

Related

How include pdf file in popup page how html element

How to include a pdf file on a popup page as an html element.
I do not want to display as an embed or a picture, and I want to apply styles etc to the content of the PDF
Is there a plugin or similar for this?

Featherlight iFrame How to Allow Fullscreen?

I'm using Featherlight to open an iframe in a popup modal.
You can see a demo if you click the iframe button on the site.
How can I make Featherlight add allowfullscreen="true" to the generated iframe tag? Videos will not go fullscreen without this parameter.
If you view the source html of the demo you can see that it adds it. But when I download and use featherlight.min.js it does not apply that parameter to the tag by default.
View Source
From the demo:
When used on my site:
The code for opening an iframe:
Open Popup
I looked for a solution here, but I cannot find a section like this in the code.
I found the answer was to use data-featherlight-iframe-allowfullscreen="true" in the <a> tag.

How to open a lightbox on page load if url equals using google tag manager

The title pretty much says it. I would like to show a lightbox on page load only if the url is www.example.com/#popup versus www.example.com
If this could be accomplished with google tag manager that would be grand
I've see bits and pieces of this but I'm having trouble piecing it all together.
HTML:
Open element in lightbox
<div id="mylightbox">This div will be opened in a lightbox</div>
if (window.location.hash === "#popup") {
$.featherlight("#mylightbox");
}
See https://github.com/noelboss/featherlight/#manual-calling-of-featherlight
Fiddle Shows manual lightbox open call.
http://jsfiddle.net/fm9wp96r/

Jquery simple modal dialog with iframe and generated elements

Ok, guys, I need your help. My English is not so good, so I hope that you'll understand what I want.
I need some very simple modal dialog that will be generated only through JavaScript or Jquery. In that modal I will have some iframe. Modal and iframe in it must be generated via JavaScript or Jquery, because I need just some code in <script> and <a> link in body to call that js or jquery code and generate modal with iframe in it.
If there is need for CSS to create modal and iframe in it, CSS will be created via that code too. Client will put those <script> and <a> tags on his site and then will on click get modal with iframe. In iframe will be content of my own site. I need that for ads, like Google Ads.
P.S. I know how to create iframe through JavaScript, so basically I need that modal dialog to complete code. I can do that without modal dialog, using popups, but I need better solution.
Any suggestions? Thank you.
Use Colorbox. It will allow you to iframe content, and all you use are <a> tags. Super simple, 100% customizable. I use it for a lot of my client work. On the example page you will see an example of iFramed content. If you view the source, you will see the following usage:
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
...
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>
A <script> and <a> tag.
The css is not generated via the code, however, you could easily add a line as part of the script to do this in jQuery which gets called after the modal's load:
$('cboxOverlay').css({ background: '#fff' });
// etc ..

HTML "picture in picture"

I'd like to create a (preferably) HTML code that would load content from another, small page into the current website. The content of the small page is to be a set of anchors with images that change dynamically (thus encoding them into the page where they are to be displayed would not be practical). Is such a functionality achievable in pure HTML, or do I need to use javascript? Can someone provide a sample code of how it would look like?
Put this in your first HTML page
<iframe src="small-page.html" />
This creates a box on your first HTML page containing the contents of your second page.
You can control the height, width as well as other styles on the IFRAME.

Categories

Resources