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

You have posted test versions of other pages, and I find it hard to believe that somebody working in web development has no access to a testing server or the money to pay for cheap hosting for the purpose.

However, if this is really the case, then @chrisofarabia has alreadfy suggested alternatives:

You work for a web design agency and have no server???

1 Like

I dont have access to there server right now.

the site is just on my localhost. thats why I had send my project to you guys

Oh Actually I freelance, so I dont exactly work for a company.

Well, the bottom line is still that you need to put the page up somewhere so that we can all see exactly the same code under exactly the same conditions. As I’ve explained, your project does not work for me on localhost.

Sorry; we were all being mislead by http://orangeye.ie/the-team/

1 Like

The problem is that zoombox is using jquery 1.5 and using the deprecated msie variable while bootstrap is using version 1.9+ so you are getting an error in the console.

Uncaught TypeError: Cannot read property ‘msie’ of undefined

You would probably need to install the migrate plugin if you want to use msie.

I did see a quick fix to stop the error and that was setting the following line before calling the zoombox.

$.browser={ msie: ( navigator.appName == 'Microsoft Internet Explorer') ? true : false }


<script type="text/javascript">
				  $(function() {
					$.browser={ msie: ( navigator.appName == 'Microsoft Internet Explorer') ? true : false }
	                theme       : 'zoombox',        //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
	                opacity     : 0.8,              // Black overlay opacity
	                duration    : 800,              // Animation duration
	                animation   : true,             // Do we have to animate the box ?
	                 width       : 600,              // Default width
	                 height      : 400,              // Default height
	                gallery     : true,             // Allow gallery thumb view
	                autoplay : false                // Autoplay for video

The lightbox will now open on top and not on a new page. Whether the fix breaks the functionality is another question for the JS experts.:slight_smile:

The links to jquery won’t run locally as they were without the http prefix. e.g. // instead of http:// or https://. Its done like that so that the appropriate format is called automatically depending on whether it should be http or https.


aah… that worked perfectly. thanks a mil.

finally its hosted here now.

but, its lagging a lot. any suggestions why ?

thanks again.

The Web Developer Toolbar is showing these warnings:

You could also try reducing the number of calls to the server by combining scripts and stylesheets.



also, when I view my site on 15inch laptop, the placemaker is not appearing on the right place.

I am doing this in css

@media screen (min-width: 400px) and (max-width: 1600px){
		width: 100%;
		width: 100%;
		display: none;
	    position: relative;
	    width: 250%;
	    margin-top: -701%;
	    margin-left: -151%;

That page does not seem to have any text, it’s all images for text, without alt attributes too.

1 Like

You could try optimising all your images.

I tried with just one of yours - budweiser.png and it reduced the size from 43.8K to just 16.9K. If you do that with all your images that could be some saving…


You could remove many images, and have text for the text.

This image is 1700k which is more than the size of most sites. optimise that image down to as small as possible (possibly by 5 or ten times as small).


cool. thanks guys.

now can you please also help me with the positioning of the placemaker.

thanks a mil

gary-bg.png is 8.8MB!

It doesn’t appear in the right place at smaller sizes at all. (Although as I mentioned before, hover won’t work on touchscreens, so any content which is relying on hover to show it will be inaccessible.)

yes. you are right for small screens.

but, I right now I am talking about laptop screen.

This is never going to work properly as it is full of magic numbers and you should never use relative positioning in that way anyway.

I would have scaled the image (section) in stages with media queries rather than constantly scaling it.

If you create a stacking context around the item you want the icon to appear above (use position:relative but no co-ordinates) and then place the icon overlay absolutely in relation to that target element. Then you won’t ever need to change those co-ordinates as the overlay is bound to the target,


can you please explain with a code. thanks again.