What am I doing wrong with this Lightbox widget?
Head out to http://brucegust.com/timberland/stunt.php and click on the photo. You should be getting an effect like what you see at http://ashleydw.github.io/lightbox/#image-gallery and I'm missing something.
I've played with this for a while and I determined that there's a greater mind than my own out there who could identify where I'm blowing in a matter of minutes.
What am I missing?
The photo is way to large and the little white arrows that show up on the left and right sides of the pic are gone.
What do you think?
I've played with this for a while and I determined that there's a greater mind than my own out there who could identify where I'm blowing in a matter of minutes.
What am I missing?
The photo is way to large and the little white arrows that show up on the left and right sides of the pic are gone.
What do you think?
Julian Hansen
Sorry Bruce I am getting a Browser alert on that page (Access Denied - Access to web page blocked).
ASKER
Here's my code:
I appreciate your help, friend. I've got a meeting in a few hours and this will be a sweet little feature to show them!
Bottom line: The functionality works just fine, but the picture opens up in a manner that is too big for the allocated space. You'll notice too that my logo is showing through the "screen" rather than veiled like all the other elements of the page save the picture the user has clicked on.
How do I adjust the size of the picture so that it fits within the allocated space and, I'm thinking the logo is a matter of adjusting the z-index, but I'll go ahead and ask that while I'm here as well.
Here's my page's code:
I'm trying to be sensitive to your time and make my query as streamlined as possible. Obviously, you're going to have to pop the hood on this thing beyond my HTML. I don't know why you're getting that browser alert. The JS I'm using is coming from the Lightbox you recommended. I didn't want to clutter up my question with an abundance of files, but the Lightbox you suggested is what I'm using (the Image Gallery at http://ashleydw.github.io/lightbox/#image-gallery).
Thanks, Julian!
I appreciate your help, friend. I've got a meeting in a few hours and this will be a sweet little feature to show them!
Bottom line: The functionality works just fine, but the picture opens up in a manner that is too big for the allocated space. You'll notice too that my logo is showing through the "screen" rather than veiled like all the other elements of the page save the picture the user has clicked on.
How do I adjust the size of the picture so that it fits within the allocated space and, I'm thinking the logo is a matter of adjusting the z-index, but I'll go ahead and ask that while I'm here as well.
Here's my page's code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Timberland Cabinetry</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.0.0/ekko-lightbox.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.0.0/ekko-lightbox.js"></script>
</head>
<body>
<div class="main_container">
<!--------------------------Header---------------------------------->
<div class="header_top">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-right"><form class="navbar-form" role="search" action="search.php" method="Post">
<div class="input-group add-on">
<input class="form-control" placeholder="Search" name="search" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="main_header">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-4" style="z-index:999999;">
<a href="index.php"><img src="images/logo.png" class="img-responsive logo"/></a>
</div>
<div class="col-md-7 col-sm-8 col-xs-12 hidden-xs">
<nav class="navbar navbar-default navi_bg">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse row" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Products</a>
<ul class="dropdown-menu">
<li><a href="doors.php?subcategory=Craftsman">Craftsman</a></li>
<li><a href="doors.php?subcategory=Franklin">Franklin</a></li>
<li><a href="doors.php?subcategory=Germantown">Germantown</a></li>
<li><a href="doors.php?subcategory=Marquis">Marquis</a></li>
<li><a href="doors.php?subcategory=Newport">Newport</a></li>
</ul>
</li>
<li><a href="gallery.php?category=Contemporary&subcategory=Newport">Gallery</a></li>
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Disclaimer & Warranty</a>
<ul class="dropdown-menu">
<li><a href="satellite.php?id=32">Disclaimer</a></li>
<li><a href="satellite.php?id=31">Warranty</a></li>
</ul>
</li>
<li class="dropdown">
<a data-target="#" href="satellite.php?id=15" class="current dropdown-toggle">About</a>
<ul class="dropdown-menu">
<li><a href="satellite.php?id=15">Who We Are</a></li>
<li><a href="satellite.php?id=30">Testimonials</a></li>
</ul>
</li>
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Brochure</a>
<ul class="dropdown-menu">
<li><a href="docs/contemporary.pdf" target="_blank">Contemporary Series</a></li>
<li><a href="docs/signature.pdf" target="_blank">Signature Series</a></li>
</ul>
</li>
<li><a href="satellite.php?id=12">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!--<div class="col-md-3 col-sm-2 col-xs-12 hidden-xs">
<ul class="list-inline social_icon">
<li><a href="#"><img src="images/fb.png"/></a></li>
<li><a href="#"><img src="images/utube.png"/></a></li>
<li><a href="#"><img src="images/linkedin.png"/></a></li>
</ul>
</div>-->
<!--<div class="col-md-3 col-sm-2 col-xs-6 hidden-lg hidden-md hidden-sm" style="z-index:999999;">
<ul class="list-inline social_icon">
<li><a href="#"><img src="images/fb.png"/></a></li>
<li><a href="#"><img src="images/utube.png"/></a></li>
<li><a href="#"><img src="images/linkedin.png"/></a></li>
</ul>
</div>-->
<div class="mobile_nav hidden-lg hidden-md hidden-sm">
<nav class="navbar navbar-default navi_bg">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-target="#navbar1" data-toggle="collapse" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse row" id="navbar1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Products</a>
<ul class="dropdown-menu">
<li><a href="doors.php?subcategory=Craftsman">Craftsman</a></li>
<li><a href="doors.php?subcategory=Franklin">Franklin</a></li>
<li><a href="doors.php?subcategory=Germantown">Germantown</a></li>
<li><a href="doors.php?subcategory=Marquis">Marquis</a></li>
<li><a href="doors.php?subcategory=Newport">Newport</a></li>
</ul>
</li>
<li><a href="gallery.php?category=Contemporary&subcategory=Newport">Gallery</a></li>
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Disclaimer & Warranty</a>
<ul class="dropdown-menu">
<li><a href="satellite.php?id=32">Disclaimer</a></li>
<li><a href="satellite.php?id=31">Warranty</a></li>
</ul>
</li>
<li class="dropdown">
<a data-target="#" href="about.html" class="current dropdown-toggle">About</a>
<ul class="dropdown-menu">
<li><a href="satellite.php?id=15">Who We Are</a></li>
<li><a href="satellite.php?id=30">Testimonials</a></li>
</ul>
</li>
<li class="dropdown">
<a data-target="#" href="#" class="current dropdown-toggle">Brochure</a>
<ul class="dropdown-menu">
<li><a href="docs/contemporary.pdf" target="_blank">Contemporary Series</a></li>
<li><a href="docs/signature.pdf" target="_blank">Signature Series</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="page_content">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Contemporary | Newport Style...</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<a href="gallery.php?category=Contemporary&subcategory=Marquis" style="color:#000000;">Contemporary - Marquis</a> | <a href="gallery.php?category=Contemporary&subcategory=Newport" style="color:#000000;">Contemporary - Newport</a> | <a href="gallery.php?category=Signature&subcategory=Craftsman" style="color:#000000;">Signature - Craftsman</a> | <a href="gallery.php?category=Signature&subcategory=Franklin" style="color:#000000;">Signature - Franklin</a> | <a href="gallery.php?category=Signature&subcategory=Germantown" style="color:#000000;">Signature - Germantown</a><br><br>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12 text-center">
<div class="cabinet_image gallery_image center-block">
<a href="Photos/newport_dorian_kitchen.jpg" data-toggle="lightbox" data-gallery="example-gallery">
<img src="Photos/crop.php?h=250&w=250&f=newport_dorian_kitchen.jpg" border="0" alt="Newport Dorian Kitchen" style="height:250px; vertical-align:middle;" border="0"></a><br>Newport Dorian Kitchen </div>
</div>
</div><!--I think you have to close that first <row> div-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programmatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
});
</script>
<div class="copyright text-center">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<p>Timberland Cabinets | 3515 Cleburne Rd, Spring Hill, TN 37174 | 615-377-6531 | <a href="mailto:info@timberlandcabinets.com" style="color:#737373;">info@timberlandcabinets.com</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I'm trying to be sensitive to your time and make my query as streamlined as possible. Obviously, you're going to have to pop the hood on this thing beyond my HTML. I don't know why you're getting that browser alert. The JS I'm using is coming from the Lightbox you recommended. I didn't want to clutter up my question with an abundance of files, but the Lightbox you suggested is what I'm using (the Image Gallery at http://ashleydw.github.io/lightbox/#image-gallery).
Thanks, Julian!
ASKER
I know what it is! It's the stylesheet (http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css). That is what governs the size of the image when the user clicks on it.
Problem is, when I incorporate that stylesheet, other elements of my page change. My search box takes up the width of the screen rather than being a nice, tight little box in the corner. Any suggestions on how to figure out?
Problem is, when I incorporate that stylesheet, other elements of my page change. My search box takes up the width of the screen rather than being a nice, tight little box in the corner. Any suggestions on how to figure out?
Your website is blacklisted and this is why it is blocked with status : Site Potentially Harmful
You can scan you page with https://sitecheck.sucuri.net/
You can scan you page with https://sitecheck.sucuri.net/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
lenamtl! Thanks for the suggestion. I was able to get it to work based, in part, on your recommendation, but also going back and realizing that I was trying to get the Lightbox to function alongside an older version of Bootstrap. Once I got those two dynamics reconciled, all was well.