Having trouble with an image popup

JavaScript
1

I’m just getting my feet wet with javascript and jquery and am trying to build a site for my cousin for practice.

When I click image thumbnail my script seems to work fine then I click another and it works fine again…but when I keep clicking it seems to bog down and not display the popup images right away and when they finally do come up the fade in and out for however many times I click trying to get it to pop up.

I put the site here so you can see what I mean:

http://vanamp.netii.net/Art/Travels.html

//* Javascript Document


$(document).ready(function()
{
	

	
	$('.elastislide-list li a img').click	(function(){
		var target = $(this).attr("data-large");
		if($('.photoView'))
		{
		$('.photoView').addClass('displayNone').removeClass('photoView');
		
		
		
			$('.backdrop, .lightBox').animate({'opacity':'.50'}, 300, 'linear');
					$('.lightBox').animate({'opacity':'1.00'}, 300, 'linear');
					$('.backdrop, .lightBox').css('display', 'block');
			                document.getElementById(target).setAttribute('class', 'photoView');
			

			
			$('.close').click(function(){
					close_box();
				});

				$('.backdrop').click(function(){
					close_box();
				});

			

			function close_box()
			{
				$('.backdrop, .lightBox').animate({'opacity':'0'}, 300, 'linear', function(){
					$('.backdrop, .lightBox').css('display', 'none');
					$('.photoView').addClass('displayNone').removeClass('photoView');
				});
			}
	
	
		}
	});

});

Like I said I am just beginning to learn this so hopefully my code is not too offensive

any help is appreciated

Thanks

2

Hi vanamp. Welcome to the forums. :slight_smile:

It’s not really clear what we are meant to click on there. It’s just a black page with a few links that don’t go anywhere.

3

well then, it looks like I have another problem to figure out. there should be a scrollbar of images on the bottom to click on let me re work it and see if I can get it working.

4

OK, I had another look, and left the page open for a while, and suddenly it appeared at the bottom, but it takes quite a while to show up. It might be worth checking out other galleries. I really like Slimbox2.

5

I love the slimbox. I had some issues using it with latest jquery 1.9 but found a fix here:

thank you for this.

6

I thought I was home free then I tested it in IE 9 and I just get a blank white box. is there anything like slim box that works with IE 9

7

Is it possible for you to use an earlier version of jQuery? That’s the easiest solution.

8

I tried switching jquery versions and have not found one that works in IE 9. I click an image the box comes up without the image and I can use the NEXT button and box resizes itself to the proper dimensions for the next image but still remains blank.

Everything works great when I test in IE 8

9

O, in that case it sounds like there’s a problem with your image paths, rather than an issue with jQuery. The links to your large images may be wrong. Check that they are actually pointing the location of the images. If you post a live link, we can check for you. :slight_smile:

10

Hooray! I uploaded site so I could link it for you and it seems to be working just fine on the server. It just was not working locally…no idea why though!!!

11

Hi,

You are including jQuery twice in your page - once in line 13 and once in line 128.
Maybe this had something to do with it.

You should remove one of these versions by the way. Probably the older version (1.8.2)

12

I still see the old page in the link you first posted.

Anyhow, depending on how you have set up the links, they may need to be different on your local machine unless you have a server environment set up.