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
Related
I'm looking for a good way for webmasters to embed content from my website providing them with a simple javascript snippet.
Two things:
if I attached a stylesheet, won't it break theirs?
inline or attached CSS, their is still a risk that their style breaks mine?
what is the technique used by FB or Youtube to allow embed content, without using iframes?
Thx,
FB uses iframes.
You can make a content.html file you or other pages can load via ajax. Where content.html does not contain the whole page but just a content part. Like:
<h1>This is important</h1>
<p>here is some text.</p>
For example with jQuery you can place place a html file in a div like this: $('#result').load('content.html');
But I think it depends on what you want to share and to who. Maybe a REST API would work better in you case?
It's just an impression, but actually Facebook and other social networks do use Iframes. But they're created by their JS that you also have to embed, making the their tech choices more powerful. Later on they might update the JS and then get rid of the iframe in favour of something else.
However, currently, you embed a div with a given CSS class an a data-href, plus the JS. The script will find those divs .fb-post and fill it in with an iframe containing the post indicated by the data attribute.
If you want to make something simpler you might as well give your users an iframe with a responsive page inside it.
This question is not really specific. I want to show thumbnail images of websites when hovering (its) url. With this code: JsFiddle
I can load websites in the iframe, which kinda 'resembles' a thumbnail preview. The problem is that it has to load the complete page which is not really fast and takes up quite some system performance. So my question is how can solve this problem? I can only think of two things myself:
1.Take some sort of 'snapshot' and show that snapshot instead of loading the page
2.Load only the css and other stuf but no object like movie files banner ads etc.
If those two are not done than please provide me with an alternative.
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
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.
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.