how to pop up window on jquery image gallery

Hello Experts,

Could you please help me with the following situation?: I am building an small image gallery and everything is working fine.
But there is something I am trying to do that is not working very well. I am trying to pop up the iframe  when you click over the large image ( a href="images/large/blue.jpg ). I am not sure how to make the iframe to pop up when you click over the large image, I am implemented this little script but it is not working as
Iam expecting it. If I click over the large image it does pop up the the video contained in iframe, but then when I close the video and try to open again
it does not work at all, could you please help me out to solve this problem? Thanks,
$("#container img").live('click', function (e) {
	var Iframe = $('.selected').removeClass('selected');
	var iframevideo = $(Iframe).find("iframe:eq(0)");
	iframevideo.show();
	$('body').live('click', function (e) {
		e.preventDefault();
        	iframevideo.hide();
    });
});

thanks so much,

Winter
<html>
<head>
<title></title>
<style type="text/css">
iframe { display:none;}	  
#container{ height:400px; width:600px; background:blue }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>		
<script type="text/javascript">
	$(document).ready(function() {
		$('#gallery a').live('click', function (e) {
			e.preventDefault();
			var imgPath = $(this).attr('href');
			var lastImage = $('#container img');
                        selectedImg = $('.selected').removeClass('selected');		
			$(this).addClass('selected');
			var newImage = $('<img src="' + imgPath +'">');
			$('#container').prepend(newImage);
			lastImage.hide()
			newImage.show();
		});
		$('#gallery a:eq(0)').click();
	});
</script>			
</head>
<body>
	<div id="container">
		<!-- here is where the large image is placed -->
	</div>
	<div id="gallery">
		<ul>
			<li>
				<a href="images/large/blue.jpg" class="bc display-video" />
				<iframe src="http://player.vimeo.com/video/" width="540" height="480" frameborder="0"></iframe>
				<img src="images/small/blue.jpg" width="153" height="97" alt="" />
			</a>
		</li>
		<li>
			<a href="images/large/yellow.jpg" class="bc"  />
			<iframe src="http://player.vimeo.com/video/" width="540" height="480" frameborder="0"></iframe>
			<img src="images/gallery/small/yellow.jpg" width="153" height="97" alt="" />
			</a>
		</li>
	</ul>
</div>
</body>
</html>

Open in new window

glepizaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
on the line where you are opening the <a> tags, you are closing them too soon:
<a href="..." class="..." /> .... </a>

Get rid of the slash:
<a href="..." class="..." > ... </a>
0
glepizaAuthor Commented:
Hello Hielo,

thanks very much for your quick answer. Unfortunately I still have the same problem, the popup images works only once, I mean, when I click over the large image it pop ups once but when I close it and click over the image again it does not pop up the iframe video... I wonder why I am doing wrong...
:(
0
glepizaAuthor Commented:
I mean, what I am doing wrong.. thanks :)
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

hieloCommented:
If you are "inserting" an image in <div id="container"> dynamically, what is the point of the iframe? I don't understand what you are trying to do.  It would help if you actually commented your code so others can see what it is you think you are doing, and hopefully will be able to point out what exactly it is you are doing (wrong).
0
glepizaAuthor Commented:
Ok. the following code is now commented, sorry about my past code, you are right, I should comment all my code.
The videos are video files stored in an iframe, that is how vimeo provided to my friend (my client).
Please take the html file provided, click over the large image and notice the pop up video displayed.
Then click outside of it and it will hide. Then try to click again over the large image but the video won't appear this time.
Please lt me know if you need something else. And thanks again, I appreciate your help.
<html>
<head>
<title></title>
<style type="text/css">
iframe { display:none;}	  
#container{ height:400px; width:500px; background:#ededed }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>		
<script type="text/javascript">
	$(document).ready(function() {
		$('#gallery a').click(function(evt) {
			//don't follow link
			 evt.preventDefault();
			 //get path to new image
		   var imgPath = $(this).attr('href');
			 //get reference to old image
			 var oldImage = $('#container img');
			 //check to see if they're the same image
			 if (imgPath == oldImage.attr('src')) { 
			 	return;
			 } else {
				 //remove highglight from previously clicked thumbnail
	       $('.selected').removeClass('selected');		
				 //add highlight to this thumbnail
				 $(this).addClass('selected');
				 //create HTML for new image
				 var newImage = $('<img src="' + imgPath +'">');
				 //make new image invisible
				 newImage.hide();
				 //add to the #container div
				 $('#container').prepend(newImage);
				 //fade out old image and remove from DOM
				 oldImage.fadeOut(1,function(){
			     $(this).remove();
					});
				 //fade in new image
				 newImage.fadeIn(1);
			 }
			//add a click event to the added image to the #container div
			$("#container img").live('click', function (e) {
				// get reference to the selected thumbnail
				var selectedThumbnail = $('.selected').removeClass('selected');
				//display iframe from the selected thumbnail
				var iframevideo = $(selectedThumbnail).find(">:first-child"); 
				//show iframe video
				iframevideo.show();
				//hide iframe when you click outside of it.
				$('body').live('click', function (e) {
					e.preventDefault();
					iframevideo.hide();
				});
			});
		});
			$('#gallery a:eq(0)').click();
		});
</script>			
</head>
<body>
	<div id="container">
		<!-- here is where the large image is placed -->
	</div>
	<div id="gallery">
		<ul>
			<li>
				<a href="http://images.free-extras.com/pics/p/purple_flowers-599.jpg" class="bc display-video" />
				<iframe src="http://player.vimeo.com/video/" width="540" height="480" frameborder="0"></iframe>
				<img src="http://images.free-extras.com/pics/p/purple_flowers-599.jpg" width="153" height="100" alt="" />
			</a>
		</li>
		<li>
			<a href="http://niceflowerspics.co.cc/pictures/flowers/images/16/Green-Flowers.jpg" class="bc"  />
			<iframe src="http://player.vimeo.com/video/" width="540" height="480" frameborder="0"></iframe>
			<img src="http://niceflowerspics.co.cc/pictures/flowers/images/16/Green-Flowers.jpg" width="153" height="100" alt="" />
			</a>
		</li>
	</ul>
</div>
</body>
</html>

Open in new window

0
hieloCommented:
read the comments in the code:
$(document).ready(function() {
		$('#gallery a').live('click',function(evt) {
			//don't follow link
			evt.preventDefault();

			//get path to new image
			var imgPath = $(this).attr('href');

			//get reference to old image
			var oldImage = $('#container img');

			//check to see if they're the same image
			if (imgPath == oldImage.attr('src')) {
				return;
			} 
			else 
			{
				//remove highglight from previously clicked thumbnail
				$('.selected').removeClass('selected');

				//add highlight to this thumbnail
				$(this).addClass('selected');

				//create HTML for new image
				var newImage = $('<img src="' + imgPath +'"/>');

				//make new image invisible
				newImage.hide();

				//add to the #container div
				$('#container').prepend(newImage);

				//fade out old image and remove from DOM
				oldImage.fadeOut(1,function(){
					$(this).remove();
				});

				//fade in new image
				newImage.fadeIn(1);
			}
			//add a click event to the added image to the #container div
			$("#container img").live('click', function (e) {
				e.preventDefault();

				/* You can't remove the .selected class from the clicked <a> item
				   Otherwise when you "re-click" the large image (consecutively), 
				   nothing will be found/matched.
				*/
				// get reference to the selected thumbnail
				var selectedThumbnail = $('.selected');//.removeClass('selected');
				//display iframe from the selected thumbnail
				var iframevideo = $(selectedThumbnail).find(":first-child"); 
				//show iframe video
				iframevideo.show();
				//hide iframe when you click outside of it.
				$('body').live('click', function (e) {
					e.preventDefault();
					iframevideo.hide();
				});
			/* You must return false so that when you "re-click" the large image
			   the body event handler does NOT trigger. Currently, when you re-click 
			   after the first time, the $('body').live('click',...) is triggered also
			   which hide the iframe. To stop the event from bubbling up, you must 
			   return false.
			*/
			return false;
			});
		});
		$('#gallery a:eq(0)').trigger('click');
	});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
glepizaAuthor Commented:
Thanks you hielo, your comments were very clear and understandable. I did not take into account the even bubbling up. I am glad I learned something from here.

Winter
0
glepizaAuthor Commented:
Actually I learned several things, thanks again,

winter
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.