Zoombox lightbox, CLOSE option not appears and the lightbox also do not resize

HTML & CSS
1

I am using Zoombox lightbox, for a lightbox on my site.

The close option on the video does not appear and also the specified width and height is not working. Its popping up in full screen.

This is my code.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BUDWEISER</title>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<link rel="stylesheet" type="text/css" href="css/zoombox.css" media="screen">
	<link href="http://vjs.zencdn.net/5.7.1/video-js.css" rel="stylesheet">
	
	<link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body role="document">


	<div id="fb-root"></div>
	<script>(function(d, s, id) {
  	var js, fjs = d.getElementsByTagName(s)[0];
  	if (d.getElementById(id)) return;
  	js = d.createElement(s); js.id = id;
  	js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=956935597733326";
  	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	
		<div class="container-fluid" >
			<div class="row">
				<div class="header" style="background: #c41a30;"> <!-- the top red section -->
					<div class="logo-small">
							<img src="images/drink-responsibly.png">
					</div>
					<div class="logo-small-retina">
							<img src="images/low-res/drink-responsibly-retina.png" id="top-right-retina">
					</div> 
					<div class="main-logo">
						<img src="images/budweiser.png">
					</div>
					<div class="main-logo-retina">
						<img src="images/low-res/budweiser-retina.png">
					</div>
					<div class="dream-header">
						<img src="images/dream-header.png">
					</div>
					<div class="dream-header-retina">
						<img src="images/low-res/dream-header-retina.png">
					</div>
					<div class="map">
						<div class="ireland">
							<img src="images/ireland-map.png">
						</div>
						<div class="rollOver">
							<img src="images/spacercircle.png">
							<div class="sandra">
								<a class="zoombox zgallery1" w250 h250 title="Dream Big" href="video/dream-job.mp4">
								    <img src="images/sandra-icon.png"  alt="dream job video" />
								</a>
							</div>
						</div>
					</div>

					<div class="map-retina">
						<div class="ireland-retina">
							<img src="images/low-res/ireland-map-retina.png">
						</div>	
						<div class="rollOver">
							<img src="images/spacercircle.png">
							<div class="sandra">
								<a class="zoombox zgallery1" w250 h250 title="Dream Big" href="video/dream-job.mp4">
								    <img src="images/sandra-icon.png"  alt="dream job video" />
								</a>
							</div>
						</div>	
					</div>		
					<div class="text-map">
						<img src="images/text-below-map.png">
					</div>

					<div class="text-map-retina">
						<img src="images/low-res/text-below-map-retina.png">
					</div>
			</div>

			<div class="iradio">
				<div class="iradio-logo">
						<img src="images/iradio-logo.png">
				</div>
				<div class="iradio-logo-retina">
						<img src="images/low-res/iradio-logo-retina.png">
				</div>
				<div class="garry-text">
						<img src="images/garry.png">
				</div>
				<div class="garry-text-retina">
						<img src="images/low-res/garry-retina.png">
				</div>
			</div>

			<div class="garry">
				<div class="garrybg">
						<div class="centerVideo">
						<video id="garry-vid" class="video-js vjs-big-play-centered" controls preload="auto" style="width:100%; height:auto;"
								   data-setup='{"fluid": true}'>
								    <source src="video/dream-job.mp4" type='video/mp4'>
								    <p class="vjs-no-js">
								      To view this video please enable JavaScript, and consider upgrading to a web browser that
								      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
								    </p>
						  </video>
						</div>
				</div>
<!-- 				<div class="garrybg-retina">
						<video id="garry-vid-retina" class="video-js" controls preload="auto" width="120" height="78"
								   data-setup=" {fluid: true}">
								    <source src="video/dream-job.mp4" type='video/mp4'>
								    <p class="vjs-no-js">
								      To view this video please enable JavaScript, and consider upgrading to a web browser that
								      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
								    </p>
						</video>
						<img src="images/low-res/garry-bg-retina.png">
				</div> -->
			</div>
			<div class="enter">
				<div class="enter-text">
					<img src="images/enter.png">	
				</div>	
				<div class="enter-text-retina">
					<img src="images/low-res/enter-retina.png">
				</div>	
			</div>	
			
			<div class="win" style="background: #c41a30;">
				<div class="chancetowin">
					<img src="images/your-chance.png">	
				</div>	
				<div class="chancetowin-retina">
					<img src="images/low-res/your-chance-retina.png">
				</div>	
			</div>

			<div class="form-group">
				<div class="btn-submit">
					<form action="action_page.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
					<textarea class="form-control" rows="5" cols="150" id="comment" placeholder="SHARE YOUR DREAM!"></textarea>

					<div class="fb-share-button" data-href="http://localhost/projects/budweiser/" data-layout="button"></div>
					
					<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://localhost/projects/budweiser/" data-text="Check this Out" data-hashtags="DreamBig">Tweet</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
					</script>

					<input type="image" src="images/submit-button.png" id="btn">
					</form>
				</div>
				 
			</div>
			<div class="social" style="background: #c41a30;">
				<img src="images/dream-social.png" id="share">
			</div>
			<div class="social-retina" style="background: #c41a30;">
				<img src="images/low-res/dream-social-retina.png">
			</div>
			<div class="footer">
				<iframe src="https://player.vimeo.com/video/156422073" class="footer-vid" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

				<!-- <iframe src="https://player.vimeo.com/video/156422073" class="footer-vid-retina" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->
				
			</div>
			</div>
			
		</div>	
	

				<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
				<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
				<script type="text/javascript" src="js/main.js"></script>
				<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script><!-- If you'd like to support IE8 -->
			 	<script src="http://vjs.zencdn.net/5.7.1/video.js"></script>
				<script type="text/javascript" src="js/zoombox.js"></script>
				<script type="text/javascript">
			  $(function() {
			    $('a.zoombox').zoombox();
			  });
				</script>
</body>
</html>

CSS

    .row{
    
    	margin-right: 0px;
        margin-left: 0px;
    }
    
    
    
    .container-fluid{
        padding-right: 0px;
        padding-left: 0px;
       }
    .header{
    	width: 100%;
    	height: 100%;
    	position: relative;
    
    }
    		.logo-small img{ 
    			margin: 0 auto;
    			width: 30%;
    			height: 10%;
    			padding-top: 30px;
    			margin-left: 60px;
    		}
    
    
    		.logo-small-retina {
    			margin: 0 auto;
    			display: none;
    		}
    
    		.main-logo{
    			position: relative;
    			text-align: center;
    			margin-bottom: 50px;
    		}
    
    		.main-logo img{
    			width: 15%;
    			height: 10%;
    
    		}
    		.main-logo-retina{
    
    			display: none;
    		}
    
    		.dream-header{
    			position: relative;
    			text-align: center;
    			margin-left: -40px;
    		}
    
    		.dream-header img{
    			width: 40%;
    			height: 10%;
    		}
    
    		.dream-header-retina{
    			display: none;
    		}
    
    		.map{
    
    			width: 100%;
    			height: 100%;
    		}
    
    		.map-retina{
    			display: none;
    		}
    
    		.ireland{
    
    			position: relative;
    			text-align: center;
    			margin-top: 65px;
    		}
    
    		.ireland img {
    		    position: relative;
    		    width: 40%;
    		    height: 10%;
    		    margin-top: -4%;
    		}
    
    		.ireland-retina{
    
    			display: none;
    		}
    
    
    		.sandra img {
    	    /*display: block;
    	    position: relative;
    	    width: 105px;
    	    margin-top: -50%;
    	    margin-left: 14%;*/
    	}
    		.rollOver {
    			display: block;
    			width: 2%;
    			position: relative;
    		    margin-left: 47.69%;
    		    margin-top: -22.5%;
    		}
    		.sandra{
    			display: none; 
    			position: relative;
    		    width: 250%;
    		    margin-top: -790%;
      			margin-left: -176%;
    }
    		}
    
    		
    		.sandra img {
    			display: block;
    			width: 100%;
    			position: relative;
    			
    		}
    
    
    
    
    		.text-map{
    			position: relative;
    			text-align: center;
    			margin-top: 20%;
       			margin-bottom: 5%;
    		}
    
    		.text-map img {
    		    position: relative;
    		    width: 40%;
    		    height: 10%;
    		    display: block;
    		    margin-top: 24%;
    		    margin-left: 27%;
    		    margin-right: 27%;
    		}
    
    		.text-map-retina{
    
    			display: none;
    		}
    
    .iradio{
    
    	margin-top: 20px;
    }
    		.iradio-logo{
    			position: relative;
    			text-align: center;
    			margin-top: 40px;
    			margin-bottom: 40px;
    
    		}
    		.iradio-logo-retina{
    
    			display: none;
    		}
    
    		.iradio-logo img{
    			width: 10%;
    			height: 5%;	
    		}
    
    		.garry-text{
    			position: relative;
    			text-align: center;
    			margin-top: 40px;
    			margin-bottom: 40px;
    
    		}
    
    		.garry-text img{
    			width: 20%;
    			height: 10%;	
    		}
    		.garry-text-retina{
    
    			display: none;
    		}
    .garry{
    	width: 100%;
    	/*margin-top: 20px;*/
    }
    
    		.garrybg{
    			position: relative;
    			text-align: center;
    			margin-top: 40px;
    			margin-bottom: 40px;
    			background: url("../images/garry-bg.png") no-repeat;
    			background-size: 100%;
    			text-align: center;
    
    		}
    		.centerVideo {
    			margin: auto;
    			width:33%;
    		}
    		.garrybg-retina{
    			display: none;
    		}
    
    
    
    
    .enter{
    	width: 100%;
    	/*margin-top: 20px;*/
    }		
    		.enter-text{
    			position: relative;
    			text-align: center;
    			margin-top: 40px;
    			margin-bottom: 5px;
    
    
    		}
    
    		.enter-text img{
    			width: 10%;
    			height: 5%;
    			mar
    		}
    
    		.enter-text-retina{
    			display: none;
    		}
    .win{
    	width: 100%;
    	height: 80%;
    	margin-top: 50px;
    	padding-top: 50px;
    	/*margin-top: 20px;*/
    }		
    		.chancetowin{
    			position: relative;
    			text-align: center;
    			margin-top: 40px;
    			margin-bottom: 40px;
    
    
    		}
    
    		.chancetowin img{
    			width: 70%;
    			height: 55%;
    			mar
    		}
    
    		.chancetowin-retina{
    			display: none;
    		}
    
    ::-webkit-input-placeholder {
        color: red;
        font-weight: bold;
    }
    :-moz-placeholder {
        color: red;
        font-weight: bold;
    }
    :-ms-input-placeholder {
        color: red;
        font-weight: bold;
    }
    
    .social-retina{
    		display: none;
    }
    
    .form-control{
    
    	margin-bottom: 5px;
    }
    
    .btn-submit{
    		width: 75%;
    		margin-left: auto;
    	    margin-right: auto;
    	    margin-top: 25px;
    		margin-bottom: 50px;
    		display: block;
    }
    
    #btn {
        border: 0;
        text-align: center;
        width: 80px;
        margin-left: 50%;
        margin-right: 50%;
        margin-top: 10px;
    }
    
    #share{
    
    	text-align: center;
    	display: block;
    	width: 30%;
    	height: 10%;
    	margin-right: auto;
    	margin-left: auto;
    	padding-top: 20px;
    	padding-bottom: 20px; 
    }
    
    .player .title{
    
    	display: none;
    }
    
    .fb-share-button{
    	margin: 4px 10px 0px 10px;
    	margin
    	display: block;
    	position: relative;
    	float: left;
    }
    .twitter-share-button{
    	margin: 10px;
    	display: block;
    	position: relative;
    }
    
    .footer{
    	position: relative;
    	width: 100%;
    	height: 100%;
    }
    
    .footer-vid{
    	width: 100%;
    	height: 700px;
    }
    
    .footer-vid-retina{
    	display: none;
    }
    
@media only screen (min-width: 400px) and (max-width: 1600px){
    	.container{
    		width: 100%;
    	}
    	.row{
    		width: 100;
    	}
    }
    
    @media only screen and (max-width: 400px){
    
    	.container-fluid{
    		width: 100%;
    	}
    
    	.row{
    		position: relative;
    		width: 100%;
    	}
    
    	.header{
    		width: 100%;
    		position: relative;
    	}
    
    	.logo-small{
    		display: none;
    	}
    
    	.logo-small-retina{
    		display: block;
    		position: relative;
    		padding-top: 10px;
        	margin-left: 10px;
    	}
    
    	.main-logo{
    		display: none;
    	}
    
    	.main-logo-retina{
    		display: block;
    	}
    
    	.main-logo-retina img{
    		position: relative;
    		width: 150px;
    		margin-top: 10px;
    		margin-bottom: 10px;
    		margin-left: 105px;
        	margin-right: 105px;
    	}
    
    	.dream-header{
    		display: none;
    	}
    
    	.dream-header-retina{
    		display: block;
    	}
    
    	.dream-header-retina img {
    	    position: relative;
    	    width: 318px;
    	    margin-top: 10px;
    	    margin-bottom: 10px;
    	    margin-left: 7px;
    	    margin-right: 7px;
    	}
    
    	.map{
    		display: none;
    	}
    
    	.map-retina{
    		display: block;
    	}
    
    	.ireland{
    		display: none;
    	}
    
    	.ireland-retina{
    		display: block;
    	}
    
    	.ireland-retina img {
    	    position: relative;
    	    width: 318px;
    	    margin-top: -5px;
    	    margin-bottom: 10px;
    	    margin-left: 7px;
    	    margin-right: 7px;
    	}
    
    	.text-map{
    		display: none;
    	}
    
    	.text-map-retina{
    		display: block;
    	}
    
    	.text-map-retina img {
    	    position: relative;
    	    width: 318px;
    	    margin-top: 35px;
    	    margin-bottom: 10px;
    	    margin-left: 7px;
    	    margin-right: 7px;
    	}
    
    	.iradio{
    		width: 330px;
    		position: relative;
    	}
    	.iradio-logo{
    		display: none;
    	}
    
    	.iradio-logo-retina{
    		display:block;
    	}
    
    	.iradio-logo-retina img {
        position: relative;
        width: 40%;
        margin-top: -12px;
        margin-bottom: 10px;
        margin-left: 93px;
        margin-right: 69px;
    	}
    
    	.garry-text{
    		display: none;
    	}
    
    	.garry-text-retina{
    		display: block;
    	}
    
    	.garry-text-retina img {
        position: relative;
        width: 200px;
        margin-top: 0;
        margin-bottom: -31px;
        margin-left: 69px;
        margin-right: 69px;
    	}
    
    	.garrybg{
    		background: none;
    	}
    
    	.centerVideo{
    		width: 100%;
    
    	}
    
    /*	.garrybg-retina{
    		display: block;	
    		height: 40px;
    	}
    
    	.garrybg-retina img {
        position: relative;
        width: 400px;
        margin-top: -246px;
        margin-bottom: -240px;
        margin-left: -23px;
        margin-right: 69px;
    	}*/
    
    
    	#garry-vid-retina{
    		margin-left: 117px;
        	margin-bottom: 0;
    		z-index: 1;
    		bottom: -48px;
    	}
    
    	.enter-text{
    		display: none;
    	}
    
    	.enter-text-retina{
    		display: block;
    	}
    
    	.enter-text-retina img {
        position: relative;
        width: 200px;
        margin-top: -136px;
        margin-bottom: -138px;
        margin-left: 65px;
        margin-right: 65px;
    	}
    
    	.win {
        position: relative;
        width: 100%;
        height: 80%;
        margin-top: 44px;
        padding-top: 50px;
        /* margin-top: 20px; */
    	}
    
    	.chancetowin{
    		display: none;
    	}
    
    	.chancetowin-retina{
    		display: block;
    	}
    
    	.chancetowin-retina img{
    		position: relative;
    		width: 340px;
    		margin-top: -35px;
    		margin-left: 6px;
        	margin-right: 6px;
    	}
    	
    
    	.social{
    		display: none;
    	}
    	.social-retina{
    		display:block;
    		position: relative;
    		width: 100%;
    	}
    	.footer-vid{
    		position: relative;
    		width: 100%;
    		max-height: 100%;
    		height: 242px;
    	}
    }

JAVASCRIPT

//script for sandra's placemaker to appear on hover

$(document).ready(function(){
	$(".rollOver").hover(function() {
		$(".sandra").show();
		
			}, function() {
		$(".sandra").hide();
		
	});
});
3

This is the example from the github page

/* You can also specify a with and a height */
        <a href="VideoLink" class="zoombox w500 h400"/>

This is an example of your links:

<a class="zoombox zgallery1" w250 h250 title="Dream Big" href="video/dream-job.mp4">
								    <img src="images/sandra-icon.png"  alt="dream job video" />
								</a>

I’m guessing that might explain why your width and height are not working, although without a working page to look at, I am just guessing. I haven’t used Zoombox.

2 Likes
4

The links in your code to the supporting CSS and JS are local/relative links; therefore, a helper-bee does not see any effect from those links (thinking zoombox, etc). A link to the page would be more helpful than incomplete code.

In lieu of a link to the site, you could prepare a working page that demonstrates the issue, and attach it to your message. In that way we can see exactly what you see without the “extra” code cluttering the picture.

1 Like
5

What are the w250 h250 supposed to do?

1 Like
6

i have tried that as well. no luck.

and the site isnt live yet, so I dont have live link.

7

Then, as @ronpat suggested, you really need to set up a functioning test page somewhere if you want help in fixing the issues.

1 Like
8

@TechnoBear @ronpat https://www.dropbox.com/s/590b73i0s7gscjl/budweiser.rar?dl=0

this is my whole project.

thanks.

9

its suppose to define the width and height of the player.

this is how it is defined by the developer of zoombox.

11

Did you try correcting the links, by putting the width and height values in the class attribute, as in the github example?

12

yes, I did. No luck.

13

I have downloaded the files (and scanned them for viruses, in case anybody else is interested), but the only video I’m seeing on that page is the Budweiser video, which does not use Zoombox.

Firebug is showing the div greyed-out, and a message about “failed to load the given URL” for the PNGs.

14

oh. for the lightbox I am talking about.

You need to hover over the middle of the map to see a placemaker. Then click on that placemaker and you will see the lightbox.

Thanks again.

15

I have tried that. (Sorry; I thought it was apparent when I posted the code for the relevant area that I’d understood what ought to happen.) No placemarker appears. There is nothing clickable anywhere. I’ve tried in several browsers.

Off Topic:

You are aware, of course, that hover doesn’t work either for keyboard users or touchscreen devices? So this method excludes a number of potential visitors.

16

1440Ă—900 347 KB

This is where the placemaker is.

Thanks again.

17

Yes, I know that is where it should be. I’ve posted the view of that code from Firebug, which shows it greyed-out (i.e. there is a problem and it is not displaying correctly) and I’ve told you that Firebug reports the relevant PNGs are not loading.

So, on the version I have downloaded, I cannot get the marker to display. I have no marker, so nothing to click and therefore no video.

I can only suggest, yet again, that you set up a test version of this somewhere so that we can all access exactly the same version. Then if I still can’t see the marker, I’ll know that there’s a problem with all three of the browsers I tested with. It also means that if you update the code, we all see the same updated version, which is a much better method of troubleshooting than asking members to download a complete project and keep updating the code themselves.

1 Like
18

ok.

I have used a blank png image, which I placed there for default and the placemaker appear when someone hovers over that image. So, the placemaker image is set to display: none; by default.

just trying to explain what I have done.

19

@Nauman_Tanwir, I’m not sure whether you’ve noticed, but so far every one of the people here who’ve tried to help you in this thread are forum staff in one capacity or another. They have asked you, more than once now, to put up a sample page to demonstrate the issue - whether you do that as a complete page on whatever hosting you have available to you, or by just creating a Codepen or similar, doesn’t really matter, but that is what you’re going to need to do here.

Asking people to download a 32Mb file that they then need to get running before they can even look at the problem, is wholly unrealistic. Aside from people’s natural concern about the potential for downloading malicious code, there is no way we can guarantee being able to replicate your own environment and any factors that may bring to the problem you want solving.

People will help when you make some level of effort to help yourself, but that’s not what I, and others, feel is going on at this point in time. Where you take this from here is really up to yourself.

7 Likes
20

Based on the example tag that was posted they are classes and so need to be inside of the class=" " attribute in order to work.

1 Like
21

yes I know, can you tell me how can I do that.

I dont have a server. so would you like to suggest an alternative ?

22

I tried that as well. didnt worked.