Jump to content

Picture Overlay?


Hazukiy
 Share

Go to solution Solved by .josh,

Recommended Posts

Hi, I'm trying to make a picture gallery website for my friend and the way that I wanted it work is so when you hover over a picture it shows a overlay that displays the title of the picture and some information about it. I'm currently having some issues with the jQuery as I want it so when you hover over a certain picture it only displays that overlay but atm it displays all of them which isn't how I want it to work, I would only like the certain picture that you hover over to show the overlay. Thank you.

 

Here's the HTML code:

<div id="photo-container">
  <ul id="photo-col-1" style="float: left; width: 457px">
  
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt1.jpg" alt="photo1" id="post-1"></div>
	<div class="photo-overlay"><h2>Frog</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt2.jpg" alt="photo2" id="post-2"></div>
	<div class="photo-overlay"><h2>Fast Traffic</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt3.jpg" alt="photo3" id="post-3"></div>
	<div class="photo-overlay"><h2>Leaf</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt4.jpg" alt="photo4" id="post-4"></div>
	<div class="photo-overlay"><h2>Sky</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
  </ul>  
  
  <ul id="photo-col-2" style="float: left; width: 457px">
  
	<li class="photo-col">
    <div class="preview"><img src="images/gallery/pt5.jpg" alt="photo5" id="post-5"></div>
	<div class="photo-overlay"><h2>Landscape</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt6.jpg" alt="photo6" id="post-6"></div>
	<div class="photo-overlay"><h2>Sun</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt7.jpg" alt="photo7" id="post-7"></div>
	<div class="photo-overlay"><h2>Stream</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
   
   <li class="photo-col">
    <div class="preview"><img src="images/gallery/pt8.jpg" alt="photo8" id="post-8"></div>
	<div class="photo-overlay"><h2>Tree</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div>
   </li>
  
  </ul>
 </div>

Here's the jQuery:

<script type="text/javascript"> <!--PhotoPopOut Script by Luke Harvey-->
    $(document).ready( function() {
        $('#post-1').mouseover( function() {            
            loadloginPopup();
        });
		$('#post-1').mouseout( function() {            
            unloadloginPopup();
        });
		
		function loadloginPopup() {
            $(".photo-overlay").css({      
                "display": "block"  
            });
			$(".preview img").css({      
                "opacity": "0.6"  
            });
		
        function unloadloginPopup() {
            $(".photo-overlay").css({      
                "display": "none"  
            });
			$(".preview img").css({      
                "opacity": "1"  
            });
        }    
        
        
        }        
    });
</script>

Here's what it looks like when you hover over the pictures:

 

X80IKBB.jpg

 

 

Please excuse anything that might seem 'dumb', I've just returned back to web development and I've forgotten a lot of things :)

Edited by Hazukiy
Link to comment
Share on other sites

first thing I see that looks wrong is that you have your mouseover and mouseout events only targeting #post-1 element, so they will only trigger on that first image. Seems like you should be able to change your selectors to ".preview" instead of "#post-1" to have them target all of your images (since that class looks common to div wrapped around each image). But that's a side issue.

 

As to the actual issue.. when loadloginPopup() and unloadloginPopup() are called, your jQuery targets class ".photo-overlay" which targets ALL of your elements. So what you need to do is pass a reference to the currently hovered element and use that reference instead.

 

Uh also, you have issues with syntax/placement of your loadloginPopup and unloadloginPopup functions. For starters, you didn't correctly close them (closing } improperly placed). 2nd, you have them wrapped inside the document.ready function which puts it within that jquery scope so they aren't defined when they are actually called (jquery attempts to look for them in global namespace). I don't know how you managed to even see what you DID see, unless you hella typoed posting here...

 

Overall, your code is a bit clunky and can be cleaned up a bit. jQuery provides a .hover() method you can use. So overall, code would look something like this:

 

<script type="text/javascript">
$(document).ready( function() {
  /* set initial state of things.. */
  // this line hides all of the photo detail overlays, since the html you provided has them 
  // all initially shown on page load, and it seems you only want them shown if someone hovers
  $('div.photo-overlay').css({'display':'none'});
  // base on just the presented html, this one isn't necessary, but i threw this in there just 
  // in case you have other code that somehow affects your preview images. So this line is 
  // based on what you had for your mouseleave event
  $('div.preview img').css({'opacity':'1'}); 

  /* set mouse hover events */
  // target .preview class since it's common denominator wrapped around each set of 
  // image and detail elements. enter/leave selectors will be relative to it.
  $('div.preview').hover(
    // mouse enter
    function () {
      // find and show the photo overlay for the currently hovered image
      $(this).next('.photo-overlay').css({'display':'block'});
      // reduce opacity of the image for the hovered element
      $(this).find('img').css({'opacity':'0.6'});
    },
    // mouse leave
    function () {
      // find and hide the photo overlay for the currently hovered image
      $(this).next('.photo-overlay').css({'display':'none'});
      // restore opacity of the image for the hovered element
      $(this).find('img').css({'opacity':'1'});
    }      
  );
});
</script>
Link to comment
Share on other sites

first thing I see that looks wrong is that you have your mouseover and mouseout events only targeting #post-1 element, so they will only trigger on that first image. Seems like you should be able to change your selectors to ".preview" instead of "#post-1" to have them target all of your images (since that class looks common to div wrapped around each image). But that's a side issue.

 

As to the actual issue.. when loadloginPopup() and unloadloginPopup() are called, your jQuery targets class ".photo-overlay" which targets ALL of your elements. So what you need to do is pass a reference to the currently hovered element and use that reference instead.

 

Uh also, you have issues with syntax/placement of your loadloginPopup and unloadloginPopup functions. For starters, you didn't correctly close them (closing } improperly placed). 2nd, you have them wrapped inside the document.ready function which puts it within that jquery scope so they aren't defined when they are actually called (jquery attempts to look for them in global namespace). I don't know how you managed to even see what you DID see, unless you hella typoed posting here...

 

Overall, your code is a bit clunky and can be cleaned up a bit. jQuery provides a .hover() method you can use. So overall, code would look something like this:

 

<script type="text/javascript">
$(document).ready( function() {
  /* set initial state of things.. */
  // this line hides all of the photo detail overlays, since the html you provided has them 
  // all initially shown on page load, and it seems you only want them shown if someone hovers
  $('div.photo-overlay').css({'display':'none'});
  // base on just the presented html, this one isn't necessary, but i threw this in there just 
  // in case you have other code that somehow affects your preview images. So this line is 
  // based on what you had for your mouseleave event
  $('div.preview img').css({'opacity':'1'}); 

  /* set mouse hover events */
  // target .preview class since it's common denominator wrapped around each set of 
  // image and detail elements. enter/leave selectors will be relative to it.
  $('div.preview').hover(
    // mouse enter
    function () {
      // find and show the photo overlay for the currently hovered image
      $(this).next('.photo-overlay').css({'display':'block'});
      // reduce opacity of the image for the hovered element
      $(this).find('img').css({'opacity':'0.6'});
    },
    // mouse leave
    function () {
      // find and hide the photo overlay for the currently hovered image
      $(this).next('.photo-overlay').css({'display':'none'});
      // restore opacity of the image for the hovered element
      $(this).find('img').css({'opacity':'1'});
    }      
  );
});
</script>

 

 

Ahhhhh I see and yeah sorry about the complete mess, I never program like that at all but I was in a rush so xD Thanks for your help :)

Link to comment
Share on other sites

Hi, sorry to reopen the post again but I've found an issue that I can't seem to quite get my head around? I understand the code above and I've tried all kinds of methods for this problem. Basically when I hover over the image, everything works perfect apart from the text in that overlay, for some reason when I hover over the text it thinks that I'm hovering out of the overlay and starts to spaz out. I've tried adding the H2 and P into the code but it doesn't work for me, so I guess what I'm trying to say is how would I make it so that it doesn't spaz out every time I hover over the text in the overlay? Thanks.

 

Here's the current CSS for the photo-overlay, H2 & P:

.photo-overlay {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	padding: 15px;
	width: 427px;
	cursor: pointer;
}

.photo-overlay h2 {
	color: #b91133;
	font-size: 60px;
	font-family: Edwardian Script ITC;
}

.photo-overlay p {
	line-height: 21px;
	color: #FFF;
	font-size: 20px;
}

Here's the HTML photo layout:

<li class="photo-col">
    <div class="preview"><img src="images/gallery/pt1.jpg" alt="photo1"></div>
	<div class="photo-overlay"><h2>Frog</h2><p>Information about the photo goes here.</p></div>
</li>

And here's the Javascript, which is the same:

<script type="text/javascript">
$(document).ready( function() {
  $('div.photo-overlay').css({'display':'none'});
  $('div.preview img').css({'opacity':'1'}); 
  $('div.preview').hover(
    function () {
      $(this).next('.photo-overlay').css({'display':'block'});
      $(this).find('img').css({'opacity':'0.6'});
    },
    function () {
      $(this).next('.photo-overlay').css({'display':'none'});
      $(this).find('img').css({'opacity':'1'});
    }      
  );
});
</script>
Link to comment
Share on other sites

  • Solution

I'm not entirely sure I understand your issue or how much I can really help you without seeing the code in the actual context of the page, but based on what you are saying, perhaps try changing the code to this:

 

<script type="text/javascript">
$(document).ready( function() {
  $('div.photo-overlay').css({'display':'none'});
  $('div.preview img').css({'opacity':'1'}); 
  $('li.photo-col').hover(
    function () {
      $(this).find('.photo-overlay').css({'display':'block'});
      $(this).find('img').css({'opacity':'0.6'});
    },
    function () {
      $(this).find('.photo-overlay').css({'display':'none'});
      $(this).find('img').css({'opacity':'1'});
    }      
  );
});
</script>
Link to comment
Share on other sites

I currently buiding a photo gallery for my website and I have a part of the code done that you might be interested in. I take the information from the alt attribute and put the text in a p tag. The other thing I do differently is I have the transparency done in css rather than jquery. You can do this for the title tag of the img tag as well.

 

Here's the HTML CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery Version 01.10.2014.01</title>
<link rel="stylesheet" href="css/photogallery.css">
</head>
<body>
<div class="container">
  <ul class="photogallery">
    <li class="birds"> 
    	<a class="links" href="images/img-great-egret-large.jpg">
    		<!-- The Alt Attribute Text is pulled in the jQuery Script --> 
    		<img class="thumbnails" src="images/thumb-great-egret.jpg" alt="Great Egret (Ardea alba)"> 
    	</a> 
    </li>
    <li class="birds"> <a class="links" href="images/img-limpkin-large.jpg"> <img class="thumbnails" src="images/thumb-limpkin.jpg" alt="Limpkin (Aramus guarauna)"> </a> </li>
    <li class="birds"> <a class="links" href="images/img-roseate-spoonbill-large.jpg"> <img class="thumbnails" src="images/thumb-roseate-spoonbill.jpg" alt="Roseate Spoonbill (Ajaja ajaja)"> </a> </li>
    <li class="birds"> <a class="links" href="images/img-white-ibis-large.jpg"> <img class="thumbnails" src="images/thumb-white-ibis.jpg" alt="White Ibis (Eudocimus albus)"> </a> </li>
  </ul>
</div>
<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/photogallery.01.10.2014.01.js"></script>
</body>
</html>

The CSS portition:

body {	font-size: 100%;	padding: 0;	margin: 0; }

img {	width: 100%; }

.container {	width: 1100px; margin: 0 auto; }

/* Transparency portion of Caption */
.pic-caption {
	background-color: rgba(0, 0, 0, 0.7);
	position: relative;
	bottom: 60px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	font-size: 1.2rem;
	z-index: 100;
}	

.photogallery {	list-style: none; }

li {
	float: left;
	width: 450px;
	height: 301px;
	border: 3px solid lightblue;
	padding: 15px 10px;
	margin: 5px;
}

li:hover {	background-color: lightblue; }

.links {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
	text-decoration: none;
}

and the jQuery (JavaScript) script:

$(function() {
	var $caption = $('.links');

	/* Append the P tag with pic-caption class to anchor tag */
	$caption.append('<p class="pic-caption" />'); 

	$('.pic-caption').each(function() {
		/* Grab text from the alt attribute */
		var titleText = $(this).siblings('img').attr('alt');
		$(this).text(titleText);	// Insert text in p tag:
		$(this).hide();	// Hide the pic-caption class:
	});	

	$caption.hover(function() {
		/* Show the pic-caption class on hover in */
		$(this).find('.pic-caption').show();
	},
	function() {
		/* Hide the pic-caption class on hover out */
		$(this).find('.pic-caption').hide();
	});

}); // End of Doc Ready:

As you can see the jQuery is rather simple.  Hope this helps - John

Edited by Strider64
Link to comment
Share on other sites

I'm not entirely sure I understand your issue or how much I can really help you without seeing the code in the actual context of the page, but based on what you are saying, perhaps try changing the code to this:

 

<script type="text/javascript">
$(document).ready( function() {
  $('div.photo-overlay').css({'display':'none'});
  $('div.preview img').css({'opacity':'1'}); 
  $('li.photo-col').hover(
    function () {
      $(this).find('.photo-overlay').css({'display':'block'});
      $(this).find('img').css({'opacity':'0.6'});
    },
    function () {
      $(this).find('.photo-overlay').css({'display':'none'});
      $(this).find('img').css({'opacity':'1'});
    }      
  );
});
</script>

 

Ok so basically when I hover over the picture, the overlay does appear but when I hover over the P and H2 within the overlay it spazs out. Basically it thinks that the mouse is going out of the overlay because the H2 and P isn't added. I'm not sure how I would fix this, I've tried adding it to the code but it doesn't work. I've added the site to a sub domain if you wonna check it out. Thanks

 

http://lucienorris.comze.com/

Link to comment
Share on other sites

I currently buiding a photo gallery for my website and I have a part of the code done that you might be interested in. I take the information from the alt attribute and put the text in a p tag. The other thing I do differently is I have the transparency done in css rather than jquery. You can do this for the title tag of the img tag as well.

 

Here's the HTML CODE:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery Version 01.10.2014.01</title>
<link rel="stylesheet" href="css/photogallery.css">
</head>
<body>
<div class="container">
  <ul class="photogallery">
    <li class="birds"> 
    	<a class="links" href="images/img-great-egret-large.jpg">
    		<!-- The Alt Attribute Text is pulled in the jQuery Script --> 
    		<img class="thumbnails" src="images/thumb-great-egret.jpg" alt="Great Egret (Ardea alba)"> 
    	</a> 
    </li>
    <li class="birds"> <a class="links" href="images/img-limpkin-large.jpg"> <img class="thumbnails" src="images/thumb-limpkin.jpg" alt="Limpkin (Aramus guarauna)"> </a> </li>
    <li class="birds"> <a class="links" href="images/img-roseate-spoonbill-large.jpg"> <img class="thumbnails" src="images/thumb-roseate-spoonbill.jpg" alt="Roseate Spoonbill (Ajaja ajaja)"> </a> </li>
    <li class="birds"> <a class="links" href="images/img-white-ibis-large.jpg"> <img class="thumbnails" src="images/thumb-white-ibis.jpg" alt="White Ibis (Eudocimus albus)"> </a> </li>
  </ul>
</div>
<script src="js/jquery-1.10.2.min.js"></script> 
<script src="js/photogallery.01.10.2014.01.js"></script>
</body>
</html>

The CSS portition:

body {	font-size: 100%;	padding: 0;	margin: 0; }

img {	width: 100%; }

.container {	width: 1100px; margin: 0 auto; }

/* Transparency portion of Caption */
.pic-caption {
	background-color: rgba(0, 0, 0, 0.7);
	position: relative;
	bottom: 60px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	font-size: 1.2rem;
	z-index: 100;
}	

.photogallery {	list-style: none; }

li {
	float: left;
	width: 450px;
	height: 301px;
	border: 3px solid lightblue;
	padding: 15px 10px;
	margin: 5px;
}

li:hover {	background-color: lightblue; }

.links {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
	text-decoration: none;
}

and the jQuery (JavaScript) script:

$(function() {
	var $caption = $('.links');

	/* Append the P tag with pic-caption class to anchor tag */
	$caption.append('<p class="pic-caption" />'); 

	$('.pic-caption').each(function() {
		/* Grab text from the alt attribute */
		var titleText = $(this).siblings('img').attr('alt');
		$(this).text(titleText);	// Insert text in p tag:
		$(this).hide();	// Hide the pic-caption class:
	});	

	$caption.hover(function() {
		/* Show the pic-caption class on hover in */
		$(this).find('.pic-caption').show();
	},
	function() {
		/* Hide the pic-caption class on hover out */
		$(this).find('.pic-caption').hide();
	});

}); // End of Doc Ready:

As you can see the jQuery is rather simple.  Hope this helps - John

 

Thanks a lot for sharing ^^ Yeah this does look a lot more simple, I might give this a try :) Thanks.

Link to comment
Share on other sites

Your issue is that when you hover over the h2/p elements, you are no longer hovering over the image div.preview element so it triggers the mouse-out portion. Once that hides the overlay though then you are once again hovering over the image so it triggers the mouse-over portion and shows the overlay again. This is what is causing it to flicker.

 

The simplest fix would be to just target the parent li tag, as suggested by trq, for the hover event as regardless of whether you are hovering over the overlay or the image you are still hovering over the li element.

 

Now, on an unrelated matter: When replying please do not quote entire posts. Only quote whatever is relevant to your response, or nothing at all. We all have scroll bars, we can go back if necessary.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.