First of all my site does not use Drupal.So any alternatives for a popup video player funcionality would be appreciated.
I want to show a popup you tube video player in my web page.I downloaded lighbox from the
following link: http://ftp.drupal.org/files/projects/lightbox2-6.x-1.11.zip
I extracted the zip file into my sites root
I added the following lines in my page header:
<link type="text/css" rel="stylesheet" media="all" href="/lightbox2/css/lightbox.css?1" />
<script type="text/javascript" src="/lightbox2/js/auto_image_handling.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox_video.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox.js?1"></script>
and the following in the body:
<a href="http://www.youtube.com/watch?v=0gBtF_awV2o" rel=lightvideo[width:500px;height:400px;]>
<img src="sample" alt="Live TV">
</a>
But the video opens up in a new tab and not as a popup.Where am i going wrong?I cant find tutorials for this anywhere, although i have this kind of code in many other pages with popup videos.
Edit: Used shadowbox. Opens up youtube page instead of popup!
Edit: Problem solved! Got Shadowbox to work. It's brilliant and easy. The commercial licence costs $20 though.
You probably are either not calling jQuery or lighbox correctly.
Make sure the have the two src correct.
I'm not sure I understood your question but you cant display video with lightbox, it says so in the FAQ and it recommends thickbox.
You could also use something videolighbox or any out there.
Good luck!
I would download Lightbox 2 from here and see if it works any better.
The reason it doesn't work is because the lightbox.js file included in the Drupal module is a modified version that uses the Drupal.settings variable, which if you don't use Drupal, is undefined.
Lightbox2 video does work in drupal.
You have to enable video support in the lightbox2 settings
The url: yourdrupal.com/admin/config/user-interface/lightbox2
The flv player should be empty if you don't have one.
Related
I'm getting a onclick popup ad on my WordPress website for last 3-days, I checked source code and found these two scripts in the footer. I believe this has come from a hack, rather than a poorly-behaved theme.
<script type="text/javascript" src="//go.pub2srv.com/apu.php?zoneid=1063894"></script>
<script async="async" type="text/javascript" src="//go.mobisla.com/notice.php?p=628268&interactive=1&pushup=1"></script>
I've tried deactivating and activation plugins one by one but that didn't helped me. Does anyone have any solution?
My website is icidelhi.in.
Check your .htaccees, and index.php, somethings hackers overwrite code in these files to redirect to stores or for spamm.
Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.
Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/
First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>
First of all, i'm kinda beginnner.
I've got similar problem to this:
jquery lightbox does not load images
Lightbox working, but somehow it cannot load the image (on the server).
I need second pair of eyes on it:
head part:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>...</title>
<style type="text/css" media="all">
#import "something.css";
</style>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" />
somewhere in the body:
<img class="HoverBorder" alt="something" src="images/photo2.jpg" id="rightImg" />
This works when I'm launching website from my drive. When I'm loading to my server it stucks at loading parts.
I tried to switch body part to direct links on my server, but also doesnt work.
Do You guys need something more?
I just solved this problem after like a week of googling the h*ll out of it.
My problem was identical to yours - when running on my HDD, lightbox loaded images without any problem, but when I uploaded the web to the server and tried to load the image in lightbox from there, I got stuck with the loading animation.
I tried literally every possible solution I found on the internet, but nothing worked. So I sucked it up and started working on another problem involving image loading failure (background image linked via css file) and found out, that the server I use sees a difference between *.jpg and *.JPG, which is a thing my computer does not do.
So, if your file paths are all right, try to play with your files' suffixes. That could help you.
Hope you solve this annoying bug soon.
Take care and good luck.
I am extremely new to Javascript and although some is intuitive, I feel moderately lost.
Trying to create a Jquery Magnific-popup website to showcase vimeo videos since it is a free plugin.
I would like thumbnails to link to this pop-up script.
I find myself getting very confused about what files to include and which to not use since I am new to Javascript.
I have been working with this website:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Which scripts do I use and which do I leave out to do that?
Please help! I appreciate any help
Thanks
What exactly are you unsure about including? The Magnific documentation is pretty good for that at the link you pasted.
Basically you'll get the 3 files they say, and include them in the order you see on their page. CSS, then jquery then magnific. Your paths to those files will vary depending on where you save them.
The Vimeo stuff, I've no idea.
you can look Jquery stuff, it may help you to solve all your Javascript needs. First of all, JQuery is nothing but, its Javascript package, it have many useful predefined functions, properties and more... first look the JQuery page
http://jquery.com/
if you looking popup forms, just look the link
http://jqueryui.com/dialog/#modal-form
Here you have a very simple example for a pop-up image:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class="test-popup-link" href="img/img.jpg">Open popup</a>
</body>
<footer>
<script>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
</script>
</footer>
</html>
I used a image gallery engine called prettyPhoto.js in a WordPress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can't for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the rel="prettyphoto" tags embedded in all the image anchor links.
I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the <a> link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.
The page in question is
http://instant-wine-cellar.co.uk/products/microcellar and try clicking on any of the microcellar pictures.
Another is the "Watch Microcellar Video" link on the front page.
For those who do not know. This image gallery script, same with a lot of others, works by:
1. putting the prettyPhoto javascript file in your server.
2. putting the prettyPhoto css file in your server.
3. referencing the path to the above files into the head (or footer) of your html file.
4. triggering the process by putting some bespoke script into your HTML file to find the <a> tags in your file with a certain rel attribute and opening the link it references, into the prettyPhoto modal box.
At first include jquery.js then plugin.
Find:
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Replace:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>