load video in shadowbox on page load - javascript

I need to load a video in shadowbox when the homepage loads. I need to know, what the code would be and specifically where the onload code would go to make this happen?

Well, the actual details would depend on the shadowbox code you use. I'd recommend looking into Jquery as there are a number of shadowbox/lightbox plugins for it. For the actual video I assume you'll be using flash. If this is the case you'll also want to look into swfobject (which also has a good Jquery plugin) for handling the embedding.

Related

How to lazyload a iframe with caching in mind

I used this method before.
<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>
On event with javascript I turned the data-src to src and the video started to play.
I had browser caching problems with that, videos autoplaying in background (I load a thumbnail in place for the actual iframe) when going back in the browser. Because of that I switched to a method where I just load the iframe inside a comment
<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->
and then remove the comment on click. I saw Google using this exact method on Google plus. Problem is caching again now, this time server side. I think very likely cloudflairs auto minify is removing HTML comments.
A quick search showed my its probably not possible to mark comments to they wont removed with cloudfliar. On top if this its a wordpress plugin so the issue is still relevant to all kinds of caching plugins that remove HTML comments.
So now my question is. Is there better method lazyloading iframes without HTML comments? I like to still somehow store the iframe in place ... well just as I am writing this I may be able to store the data to build a iframe in some random tag json encoded or something and then build the iframe on click.
Just came across this.
So this the <script> tag could be a good solution, no modification of data needed, but prevents the browser from doing anything with it.
HTML
<script type="text/html" class="arve-lazyload">
<iframe src="https://youtube.com/...?autoplay=1"></iframe>
</script>
jQuery
var lazyloaded_iframe = $('.arve-lazyload');
$( lazyloaded_iframe.html() ).insertAfter( lazyloaded_iframe );
The other method putting it into script was actually again causing W3Tc surround with with [CDATA] messing with my code.
This is my new and hopefully final method. I really like it. The data() gives me the attributes as it comes in. Little big on the HTML but I think finally I am save from caching plugins.
HTML
<div class="arve-lazyload" data-allowfullscreen="" data-class="arve-iframe fitvidsignore" data-frameborder="0" data-name="" data-sandbox="allow-scripts allow-same-origin" data-scrolling="no" data-src="https://www.youtube-nocookie.com/embed/w68VZ8C1Q24?iv_load_policy=3&modestbranding=1&rel=0&autohide=1&playsinline=1&autoplay=1"></div>
jQuery
lazyload = wrap.find('.arve-lazyload');
if ( lazyload.length ) {
$('<iframe></iframe>').attr( lazyload.data() ).insertAfter( lazyload );
}

How to load content in a "virtual window" like "LightBox"

I like how Lightbox does that overlay window that displays the full size image link. Is there a way to load an html file like that? I would like to have pictures, text, maybe an embedded youtube video too all able to load in that "Virtual Window", Vertical scrolling would be nice too. I would like to avoid jquery or other things like that. Like just Java, html, and css would be nice. But if that isn't possible I can handle calling the jquery if need be.
Thanks in advance to all you savvy people!
Eva
Recently, I've spent a lot of time trying to find nice no-jQuery lightbox. And I only needed to display images, not videos or HTML. My searches failed so in the end I had to give up and include jQuery in my site.
Once you give up have a look at Jquery Colorbox.
It has directly implemented display of images, YouTube or other videos as well as dynamically loaded HTML. See their examples.
Unfortunatelly, this library requires JQuery

From a SWF, play youtube video in lightbox without any code external to the swf

I am trying to build a Flash banner ad which will be hosted on a site I have no access to. My client would like to have a button which, when clicked, would open a youtube video in a lightbox frame. I've been looking all around, but all I see that seems workable involves my being able to edit the html page. I am trying to do this with AS3 and Javascript. Some solutions involve JQuery, but I am not a JQuery pro.
Can anyone offer any advice?
Thanks!
lightbox is a jquery function. The only way you could do it is if the jquery library is being loaded. Let alone the plethora of crossdomain issues.
The only way I know of doing what you want would be to create the javaScript code inside of your flash app.
I would assume it could be possible to include an entire library inside this anonymous function.
var script:XML = <script>
<![CDATA[
// Your JavaScript code here
]]>
</script>;
ExternalInterface.call(script);

How to display images only after html is properly rendered?

I am fetching all my friend's profile images and making a widget which will display images one by one on next button clicks. When I make a request to facebook server, in response while html is rendering I can see all images getting displayed on browser and once loading is done everything fits perfectly in widget. How can I avoid these image pictures getting displayed while my page is still loading.
I have heard something about lazyloading which will load images only when page is scolled down. I don't have any scroll down option nor have any idea how to use ladyload but is there anything similar which would be helpful to me?
You could use css to hide all the images in the widget:
#widget img {display:none;}
Then use jquery to show them when the DOM is read yand all images have been loaded:
$(document).ready(function() {
$('#widget img').show()
});
Something like this would work.
If you need to develop only to supported browsers [check it here] https://caniuse.com/#feat=loading-lazy-attr
you better use built-in image lazy loading like this:
<img src="https://picsum.photos/id/300.jpg" loading="lazy" />
There's various options for lazy loading images, so long as you use JavaScript.
There's quite a few libraries to help you, such as jquery's lazy load plugin: http://www.appelsiini.net/projects/lazyload
Or various alternatives you'll find via our old friend Google :)
Use the jquery Lazy Load library. Here is a nice introduction: http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22
You can use jQuery.
jQuery is "A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX."
Jquery scripts are usually started with this commands
$(document).ready(function() {
// put all your jQuery goodness in here.
});
so the commands will only be executed after the page is completely rendered.
Here you can find some jQuery Tutorials

Javascript and CSS Lightbox that can view PDFs

Has anyone ever found any lightbox type javascript / css code that can display PDFs? I have tried many libraries and none have worked for me. The environment needs to be IE6/IE7 compatible.
I am looking for something similar to this:
Lightbox 2
http://stickmanlabs.com/lightwindow/
Specifically, check out the demo "Flash Paper" for embedding PDFs
Good luck finding anything that will display a PDF in browser without a plugin.
You might consider embedding an IFrame that points to the PDF in a lightbox style. That's about the best you'll be able to do, though.
To sum up your options:
If a screen-shot of a portion of the PDF is good enough, then as tomlog answered, you could find a library or existing code to extract said portion as an image, and display that image in the "lightbox".
If, however, you need actual PDF-viewing functionality, it can not be done in IE6/7 without loading into an Adobe Flash/swf object, or contained within the official Adobe Reader browser plug-in somehow.
Going the plug-in route, you will have to use an iFrame.
If the Flash/embedding approach seems better, jvenema suggested http://stickmanlabs.com/lightwindow/ which has a "Flash Paper" demo (Flash Paper is the official way to embed PDF documents) you could check out, or embedding something else, as seen at http://www.scribd.com/ and others.
artViper's bumpbox
Bumpbox 2.0 a lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files. Now also plays
Youtube© & Vimeo© videos directly out of the box!
If it's not here, it's not anywhere: lightbox clones
You have a couple of solutions here
You could embed the PDF in an iframe (in a lightbox or panel) like http://www.cs.tut.fi/~jkorpela/html/iframe-pdf.html
Otherwise you could upload the PDF to a document sharing site like Issuu and embed their swf in your web page.
If you can find a PDF library that allows you to convert each page to an image (JPEG, GIF or something), then you could display those in your lightbox.
Obviously you would lose all the zooming and paging functionality of the PDF.

Categories

Resources