html5lightbox integration issues

Toggle sidebar Toggle sidebar
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
I took a job integrating html5lightbox into a client's Bootstrap website and writing a JS price calculator for him (no checkout functionality, maybe Paypal later). Looked like an easy job but I'm running into trouble getting the lightbox to work a) as expected and/or b) in conjunction with his other JS. The head code may be useful here:

---

<head>
<meta charset="UTF-8">

<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/lib/bootstrap.min.css">
<link rel="stylesheet" href="css/lib/font-awesome.min.css">
<link rel="stylesheet" href="css/lib/owl.carousel.css">
<link rel="stylesheet" href="css/lib/owl.theme.css">
<link rel="stylesheet" href="css/lib/owl.transitions.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/cyan.css">

<script type="text/javascript" src="html5lightbox/jquery.js"></script>
<script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>

</head>

---

So the way html5lightbox works is just that you put the necessary scripts in the header (the last two in this case; html5lightbox uses jquery) and then assign the html5lightbox class to any video you want lightboxed.

The client is hosting videos on Youtube (which html5lightbox specifically supports) so I'm using the embed rather than watch link as per the examples on the html5lightbox site: https://html5box.com/html5lightbox/index.php

In all cases (he's got about a dozen videos he's wanting lightboxed) the videos redirect to something hosted on Youtube rather than lightboxing properly within his site.

I suspect that the html5lightbox js is conflicting with his transitions js since they both require a css class to be added to the <a> tag. Here's the first video code block:

---

<div class="item work-item zoomOut col-xs-12 col-sm-6 col-md-4 corporate liveaction animated">
<div class="item-inner">
<a class="image-wrap html5lightbox" href="https://www.youtube.com/embed/YE7VzlLtp-4">
<img src="images/portfolio/gpecstillsmall4.jpg" alt="" class="image">
<div class="caption bg-orange-red">
<div class="inner">
<h4 class="sm text-uppercase">Corp</h4>
<font color="#ffffff" face="Playfair Display, serif"><em>Name</em></font><br>
</div>
</div>
</a>
</div>
</div>

---

Any thoughts on this? I'm halfway decent at js but hardly a ninja (obviously).
 
Sgraffite

Sgraffite

Member
Jul 4, 2001
189
126
116
From what you said it sounds like the html5lightbox isn't attaching it's click event to the video at all, and treating it as a link to youtube?
 
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
Seems reasonable. Any idea why?

I did notice that getting embed links from Youtube uses an iframe and <a src...> instead of in-page <a href>. I'd assume html5lightbox code would recognize this and behave appropriately - obviously the demos on their website work fine with a href links and no iframes.

That leads me to wonder if there's a JS conflict or (almost as bad) some arcane CSS issue preventing the two classes from playing nicely together.
 
Ken g6

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,648
4,590
75
Are both Bootstrap and this html5lightbox compatible with the version of jQuery you're using? Have you tried upgrading to a newer version of jQuery?
 
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
The JQuery version I'm using is the one that's bundled with html5lightbox (most recent; html5lightbox will even pull the latest version of Jquery from Google if it's not included) so that should be fine. I'll have to look into both bootstrap and the eye candy plugin he's using... good call.

Sgraffite - I'll give jsfiddle a shot this evening.
 
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
Ok it looks like a version conflict. Even the most recent version of html5lightbox comes with jquery 1.7.

The site uses Bootstrap 3.3.0 which indicates jquery 2.1.x. D'oh.

So html5lightbox comes with its own copy of jquery inside its folder. Is there a way to allow html5lightbox to make the 1.7 calls it needs while Bootstrap continues to use 3.3?

I'd have thought putting the 1.7 reference in the head would allow that? ie...

<script type="text/javascript" src="html5lightbox/jquery.js"></script>

Doesn't work like that I guess? Suggestions?

Are there js-free lightboxes I could use? Anything less than around $100 would be in budget.
 
Ken g6

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,648
4,590
75
Generally, when jQueries conflict, you want to use the newest one for everything. Just make sure you're loading Bootstrap's copy of jquery and ignore html5lightbox's.

etherealfocus said:
html5lightbox will even pull the latest version of Jquery from Google if it's not included
Click to expand...
So it sounds like that should work.

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
Click to expand...

So that really sounds like it should work.

Edit: If it doesn't work, this might be helpful.
 
Last edited:
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
Alright, progress! It works... kind of. I cut out the reference to the old js library per Ken's advice, but now I'm having trouble getting it to initialize the js correctly. I had the init code

Code: 
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='html5lightbox']").html5lightbox();
	});
	</script>

Just before the /body tag, but it wouldn't activate till the page had been reloaded 3-4 times. I tried moving it to just inside the opening body tag; no change.

Seems like scrolling down before clicking a link often fixes the issue so it does sound like an init bug... I think?

Here's current html:

Code: 
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="" lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">

    <title>x</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="css/lib/font-awesome.min.css">
    <link rel="stylesheet" href="css/lib/owl.carousel.css">
    <link rel="stylesheet" href="css/lib/owl.theme.css">
    <link rel="stylesheet" href="css/lib/owl.transitions.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/colors/cyan.css">
    <script type="text/javascript" src="html5lightbox/html5lightbox.js"></script>

</head>
<body>

	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='html5lightbox']").html5lightbox();
	});
	</script>

    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-logo">
<img width="90px" src="images/logo-SCP-grey-small.png" alt="LOGO">
        </div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>

    <div class="wrapper">
        
	<section id="header" class="header header_v2">
			<div class="container">
				<div class="row">
					<div class="col-md-12">

						<div class="logo">
							<a href="/"><img width="90px" src="images/logo-SCP-grey-small.png" alt="LOGO"></a>
						</div>

						<button class="menu-responsive-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>

						<nav>
							<ul class="menu-nav">
								<li><a href="index.html">Home</a></li>
								<li><a href="about.html">Team</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="prices.html">Cost</a></li>                             
								<li><a href="contact.html">Contact</a></li>
							</ul>	
						</nav>

					</div>
				</div>
			</div>
		</section><!-- /header -->

		<section class="about-more-wrap">
			<div class="container">
				<div class="about-more">
					<div class="row">
						<div class="col-md-10">
						  <h2 class="about-title">x</h2>
						  <!--							<a href="#" class="more-about-us">More about us</a>-->
						</div>
					</div>

				</div><!-- /about-more -->
			</div>
		</section><!-- /about-more-wrap -->

        <section class="portfolio">
            <div class="container">
                <div id="work-wrap" class="row">

                    <div class="item work-item zoomOut col-xs-12 col-sm-6 col-md-4 corporate liveaction animated">
                            <div class="item-inner">
                            <a class="html5lightbox" href="https://www.youtube.com/embed/url"> <!-- this video needs embed instead of watch url for some reason; others work fine with watch -->
                                <img src="images/portfolio/gpecstillsmall4.jpg" alt="" class="image">
                            <div class="caption bg-orange-red">
                                <div class="inner">
                                  <h4 class="sm text-uppercase">x</h4>
                                  <font color="#ffffff" face="Playfair Display, serif"><em>x</em></font><br>
                                </div>
                            </div>
                            </a>
                            </div>
                    </div>

                </div>
            </div>
        </section> <!-- /portfolio -->

		<footer class="footer">
            <div class="container">
                
                <hr class="divider">
                
                <div class="footer-info">
                    <div class="row">
                    
					<div class="row">
					
						<div class="col-md-4">
							<div class="info info-tel">
								<div class="info-icon">
									<i class="fa fa-phone"></i>
								</div>
								<p>x</p>
							</div>
						</div>

						<div class="col-md-4">
							<div class="info info-add">
								<div class="info-icon">
									<i class="fa fa-map-marker"></i>
								</div>
								<p>x</p>
								<p>x</p>
							</div>
						</div>

						<div class="col-md-4">
							<div class="info info-email">
								<div class="info-icon">
									<i class="fa fa-envelope"></i>
								</div>
								<p><a href="x">x</a></p>
							</div>
						</div>
					</div>
                    </div>
                </div>
            </div>
        </footer>
    </div><!-- /wrapper -->

    <script type="text/javascript" src="js/lib/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/lib/ie10-viewport-bug-workaround.js"></script>
    <script type="text/javascript" src="js/lib/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="js/lib/imagesloaded.min.js"></script>
    <script type="text/javascript" src="js/lib/owl.carousel.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="js/lib/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
	
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='html5lightbox']").html5lightbox();
	});
	</script>

</body>
</html>
 
Sgraffite

Sgraffite

Member
Jul 4, 2001
189
126
116
Your current code shows that you are initializing it twice, once at the top of the page and once at the bottom. Maybe that's causing it to open then close right away?
 
E

etherealfocus

Senior member
Jun 2, 2009
488
13
81
I've tried it top, bottom, and both - no obvious difference. Removing the init code obviously has an effect, but not a good one lol.
 
T

TechBoyJK

Lifer
Oct 17, 2002
16,699
60
91
I just want to point out that if they had existing custom CSS before using bootstrap, it's possible assignments in Bootstrap are conflicting with their custom CSS, which would mess with the ability for selectors to work, etc.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom