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

[TechnoBear]

@Nauman_Tanwir

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

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:

@chrisofarabia

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.

[Gandalf]

@Nauman_Tanwir

I dont have a server.

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

[Nauman_Tanwir]

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

[Nauman_Tanwir]

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

[TechnoBear]

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.

@Nauman_Tanwir

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

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

[PaulOB]

@Nauman_Tanwir

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

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 }

e.g.

<script type="text/javascript">
				  $(function() {
					$.browser={ msie: ( navigator.appName == 'Microsoft Internet Explorer') ? true : false }
					$('a.zoombox').zoombox({
	                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
	                });
					
				});
			</script>

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.

@TechnoBear

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.

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.

[Nauman_Tanwir]

aah… that worked perfectly. thanks a mil.

[Nauman_Tanwir]

http://91.109.247.178/~buddreambig/

finally its hosted here now.

but, its lagging a lot. any suggestions why ?

thanks again.

[TechnoBear]

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.

[Nauman_Tanwir]

thanks.

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){
	.container-fluid{
		width: 100%;
	}
	.row-fluid{
		width: 100%;
	}
	.sandra{
		display: none;
	    position: relative;
	    width: 250%;
	    margin-top: -701%;
	    margin-left: -151%;
	}
}

[SamA74]

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

[Gandalf]

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…

[SamA74]

@Gandalf

You could try optimising all your images.

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

[PaulOB]

@Nauman_Tanwir

but, its lagging a lot.

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).

[Nauman_Tanwir]

cool. thanks guys.

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

thanks a mil

[SamA74]

@PaulOB

This image is 1700k which is more than the size of most sites.

gary-bg.png is 8.8MB!

[TechnoBear]

@Nauman_Tanwir

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

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.)

[Nauman_Tanwir]

yes. you are right for small screens.

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

[PaulOB]

@Nauman_Tanwir

.sandra{
display: none;
position: relative;
width: 250%;
margin-top: -701%;
margin-left: -151%;
}

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,

[Nauman_Tanwir]

@PaulOB

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.