• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 705
  • Last Modified:

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

0
glepiza
Asked:
glepiza
  • 5
  • 3
1 Solution
 
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now