Loading images/videos on top of webpage's content - javascript

I have seen several websites where an image shows up on top of everything else. What is this script/library called that helps you accomplish this?

It's commonly called a lightbox.
Here's a jQuery plugin to do it.

Related

How can I add jQuery (SharePoint 2010)?

I have a HTML page that I need to be linked to within our organization's SharePoint 2010 portal. I have all needed files (CSS, images, jquery) stored in the same document library. The CSS seems to be working fine but I'm having trouble getting the jQuery to work. Any suggestions or thoughts on what could be the issue here? Thank you.
**Update: The HTML page consists of one image (image map) that I have sectioned into 100 or so clickable areas. When clicked, a jQuery plugin activates and (SHOULD) display a tooltip directly to the right of the clickable area. My issue is that the tooltip is being displayed to the right of the WHOLE image instead. So I think I was wrong in my initial question about the jQuery not working. The tooltip plugin indeed activates, it is just appearing outside the image instead of on top of the image where it should be. This works properly in a local environment but once the files are uploaded to the SharePoint server this behavior happens. Is there some internal JS/CSS files within SharePoint that I can/need to override? Thanks for helping!
Need some more details, is jQuery not loading at all? Or just errors calling jQuery functions? I'm guessing you're getting errors calling jQuery functions. You'll want to use jQuery.noConflict(); to prevent conflicts with SharePoint javascript functions. The $ symbol that jQuery uses by default is also used by SharePoint. So you call jQuery.noConflict(); at the top of your javascript, and then you just swap using the $ for calling jQuery functions to just writing jQuery. So $(document).ready becomes jQuery(document).ready. $.ajax becomes jQuery.ajax, and so on.
jQuery.noConflict Details

How to make more than two jQuery scripts work in a single webpage

-Test link for the problematic webpage-
This webpage is a landing page to a parent website. There are several javascripts that are required to run. Unfortunately, not all work simultaneously. I have tried various combinations but cannot find a way to make the webpage work.
The functions taking place in the webpage are:
Revolutionary Slider
Multiplication calculator
tabs toggler
smooth scroll-to-section menu
back-to-top button
Fancybox (lightbox)
Please help . Thankyou
Errors generated by your page
indicate that jQuery library is not the first script you are loading.
Looking into source show that you are loading jQuery in line 75.
Move this line to very top of your page.
I think this is your primary problem. Your scripts may not necessarily require different jQuery versions.

How this site shows a neat HTML box before you leave

On this site: http://shirtjs.com/product-category/collections/zeptojs/
when you move your cursor out of the html page (about to go close the tab) they show a "Wait Before You Leave!" modal centered div.
TLDR:
This doesn't occur if you 'leave' the HTML page through the sides or bottom of your browser window.
Is it a common JS library, custom made, ...
There's like 2,000,000 libraries loaded on their site! Haven't been able to trace their JS code effectively to get to the bottom of this.
Any idea how they do it?
Found it:
ouibounce lib.
https://github.com/carlsednaoui/ouibounce
Thanks for your efforts :)

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

Shadowbox(Image gallery plugin) shows black window only

I'm trying to create an image gallery using Shadowbox plugin(http://www.shadowbox-js.com).
So I got a problem with creating the gallery, That problem is: whenever I click on the link(actually thumbnail) that displays the image it starts loading then no image is displayed only a black window.
The links I use:
<img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/>
The script/link/init :
These imports are working, I verify it by using(in Chrome) Inspect element->Network.
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
notes:
1-I'm using Shadowbox as a jQuery plugin(NOT standalone).
2-jQuery is imported to my website using Google(NOT locally).
3-The real image size is 3000x2400.
Edit:
4- I realized that when right clicking->inspect element(in chrome) , the image is shown(but not in a proper way, only half of it is shown).
5-when setting handleOversize to drag the image is shown(Must click).
6-It is working in IE 9!.
You're saying that the image is not showing properly in the browser?
It may mean that the file is corrupted. Try re-saving it.
I've been using Shadowbox for quite long time now and similar problems were always caused by bad files or the files permissions not been set properly.
Since your providing an example that is local host, I can only offer general guidance and not tell you exactly what the problem is. A link surely would be welcomed.
First, make sure your call to jQuery is before the call to shadowbox.js file.
Other than that I'm sure you've given the webpage a valid !DOCTYPE which makes your Shadowbox markup correct so far as I can see at this point.
The problem could be with using jQuery and your Class Name of thumbnails.
If jQuery has modified the link with a particular style, Shadowbox may be subject to any changes in it's anchor tag.
Those changes then will cause the Shadowbox per link element to not see the original link since it's now a jQuery link. It will need to be re-cached by Shadowbox.
Solution: Try making the call to Shadowbox.init after any modifications to the thumbnail have been completed so Shadowbox caches the link once, or if needed use Shadowbox API .clearCache(); and .setup(); to re-cache those rel anchors.
I should also mention that you should ensure Shadowbox has the jQuery Adapter interface which is a download option or WordPress Plugin option.
I found the solution, It wasn't in the DOCTYPE or the browser or even my JS code!
The problem was in the CSS.
Setting the direction to right to left(rtl)(yes, the website is Arabic).
caused the images to be hidden, maybe, because the image went right and I cant see it.
It's an old question but no one answered correctly to this subject.
solution is here:
just replace "left" values with "right" and "right" values with "left" in shadowbox.css
Open the shadowbox.css and set direction:ltr for #sb-container

Categories

Resources